Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
The theme probably has a style by default to make the header image massive.
Have you tried overriding this? You can expose that style using a tool like Firebug.
Thread Starter
Sarah
(@keep-calm-and-sing-on)
Thanks Andrew.
I have never used Firebug and was hoping to avoid learning another new program. I think my brain’s on the verge of overloading! I will if I have to, though.
Right now I’m just using Cyberduck and Text Edit in a Child’s Theme to over ride the style php.
Sarah
This code is to add a clickable 72×72 logo image to the left of site title and tagline in (unedited) Twentyeleven theme. Code must be used in child theme stylesheet or Custom CSS plugin. Change image url to yours, the image must be 72×72.
/*----------------- add logo begins -----------------*/
#branding #searchform {
display: none;
}
#branding .only-search + #access div {
padding-right: 0;
}
#site-title, #site-description {
margin-left: 96px;
margin-right: 0;
position: relative;
}
#site-title a:before {
background-image: url("http://dummyimage.com/72x72/ff0000/ffffff.png");
background-size: cover;
content: "";
display: block;
width: 72px;
height: 72px;
position: absolute;
top: 48px;
left: -96px;
}
@media (max-width: 800px) {
#site-title, #site-description { margin-left: 0px; text-align: center; }
#site-title a:before { position: static; margin: 0px auto 12px; }
}
/*----------------- add logo ends -----------------*/
Thread Starter
Sarah
(@keep-calm-and-sing-on)
Thank you so much. I’ve added the code but for some reason the logo still is not showing up. I must have done something wrong. Here is what I have on my child theme style sheet.
/*----------------- add logo begins -----------------*/
#branding #searchform {
display: none;
}
#branding .only-search + #access div {
padding-right: 0;
}
#site-title, #site-description {
margin-left: 96px;
margin-right: 0;
position: relative;
}
#site-title a:before {
background-image: url"http://voicelinestudio.com/wp-content/uploads/2013/07/SingLogo1.png";
background-size: cover;
content: "";
display: block;
width: 72px;
height: 72px;
position: absolute;
top: 48px;
left: -96px;
}
@media (max-width: 800px) {
#site-title, #site-description { margin-left: 0px; text-align: center; }
#site-title a:before { position: static; margin: 0px auto 12px; }
}
/*----------------- add logo ends -----------------*/
Look at this line more closely compared to the example above:
#site-title a:before {
background-image: url http://voicelinestudio.com/wp-content/uploads/2013/07/SingLogo1.png;
}
You are missing the parentheses.
Thread Starter
Sarah
(@keep-calm-and-sing-on)
Thank you so much! WPyogi and paulwpxp. I can’t tell you how much time I have wasted on that problem in the last week.
Sarah
