Add site “logo”

Hello orbitstudios72,

Put below css code into your current theme’s style.css file located at https://planetjoey.ca/wp-content/themes/your_current_theme/ folder.
In url bracket put your site logo image url.


.site-title a {
background: url("https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_(business).svg/1280px-IMG_(business).svg.png") no-repeat;
background-size: 80%;
color:transparent !important;
font-size:25px !important;
display: block;
padding-bottom:50px !important;
}


Note : All Changes you done in style.css or other file are gone when you update theme. So prefer Child Theme.

Hope this helps you.

Thank you! I will give this a try today!

I haven’t ever worked with child themes before so I will start to look into that… The easiest way would be to paste this code into the CSS Editor that comes with the theme, but that doesn’t seem to be working for me when I paste code into there… Does anyone have any ideas about that?

Ok thanks – that worked! Two more questions now:

1. How do I remove the “site description” that appears under the logo?

2. When I view the site on the two smaller screen sizes (ie. tablet and phone), the logo is left justified – can I set that to automatically become centered for those display sizes like the Site Title currently is?

Hello orbitstudios72,

A. Remove site description

Try below css
.site-description{display: none !important;}

B. Logo align for mobile and tablet

Try for tablet and mobile below css.


@media(max-width:480px){
.site-title a {
background: url("https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_(business).svg/1280px-IMG_(business).svg.png") no-repeat 35px;
background-size: 80%;
color:transparent !important;
font-size:25px !important;
display: block;
padding-bottom:55px !important;
}
}
@media(max-width:768px){
.site-title a {
background: url("https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_(business).svg/1280px-IMG_(business).svg.png") no-repeat 265px;
background-size: 30%;
color:transparent !important;
font-size:30px !important;
display: block;
padding-bottom:55px !important;
}
}


Hope this helps you.

Thank you so much! I will try this and let you know!

Nice CSS – using the background image for the existing link is a really good approach ??

The one change I’d recommend (in addition to avoiding editing your theme files directly for the reasons you’ve already discussed) would be to try to not use !important unless absolutely necessary.

!important acts as an override, so it can make it difficult to get future CSS updates to work as expected until you track down the !important style that is getting in the way ??

Try removing each of the !important references and reloading the page at different screen sizes. If you find something doesn’t work without !important, see if there is a way you can write a more specific CSS style instead of falling back on !important ??

Hello orbitstudios72,

If above css not work for you, then update all above css with below code. It works well for all devices.


.site-title a {
height:auto;
width: 300px;
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_(business).svg/1280px-IMG_(business).svg.png");
background-repeat: no-repeat;
background-position: center left;
background-size: auto 100%;
color:transparent;
font-size:25px ;
display: block;
padding-bottom:50px;
margin: 0 auto;
}
@media(max-width: 992px) {
.site-title a {
background-position: center center;
padding-bottom:55px;
}


Hope this will helps you.

Thanks guys – I was able to set up the child theme yesterday so that is working and I will try the code above for the logo later today…

Let us know how it goes!