How To Add Your Logo To A WordPress Hybrid Theme

I post this as I had a bit of trouble working it out, so guess some others may also struggle.

Well, what I share now is not what I first did – it is the sensible option! When I first installed Hybrid News, a child theme for Hybrid, I edited the Hybrid code. But today there was an upgrade and I lost my logo, and I could not remember where I made the original edit (see, keeping logs of all changes is important!).

So today I decided the try a more sensible option – to edit the child theme – for this is the reason to have a child theme! So I needed to work out what to change in the Hybrid News stylesheet. Well, here it is:

In the style.css for your Hybrid child theme (I assume all are like Hybrid News), add this:

#site-title {
background: url("/images/logo.jpg") no-repeat;
display: block;
line-height: 100px;
text-indent: -999px; margin:0 0 10px 0;
}
#site-title a {
background: url("/images/logo.jpg") no-repeat;
display: block;
line-height: 100px;
text-indent: -999px; margin:0 0 10px 0;
}

This assumes of course that your image is in an “images” directory and called logo.jpg. You can put an absolute URL here if you like.

Save the page, delete your cache if you run a cache plugin, and hey presto, you have your own logo on your Hybrid wordpress themed website.