Child theme is not styling elements WordPress
- SOLVED
I have set up a child theme for twenty eleven. I have been able to make minor adjustments to the template through the admin section. Now I would like to make some color and content adjustments but I am running into some trouble.
How do I style the navigation? I used Firebug to locate, and attempted to change the color of the background from black to white. It is not taking. Do I need to style a different element altogether or overwrite more than one from the parent?
http://dev1.lauradenyes.com/
Currently I have added the following to the child theme:
#access{
background-color: #ffffff;
}
#access a{
background-color: #ffffff;
color: #000;
}
Further, this was styled as a starting point. What I would eventually like to do is slap a background image behind the entire navigation. I hope to cut the bottom of the banner image off and splice it behind the navigation so that the navigation links are just below the graphic. Less negative space.
Or if it is smarter to use negative padding for the entire navigation to move the line of copy up, I am also open to that.
Ideas?
Answers (4)
Manoj Raj answers:
/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme
Author: Your name here
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");
#access{
background-color: #ffffff;
}
#access a{
background-color: #ffffff;
color: #000;
}
Is this the way you defined your child theme's css?
Manoj Raj comments:
Have you activated the child theme? Currently it is showing the main twentyeleven theme in your website...
Manoj Raj comments:
For the navigation thing ... add this to your child theme css
.only-search.with-image {
margin-top: -24px;
position: relative;
z-index: 2;
}
#access { position: relative; z-index: 1; }
#branding .with-image #searchform { bottom: -37px;}
So your final css for the child theme would be the following
/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme
Author: Your name here
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");
#access{
background-color: #ffffff;
}
#access a{
background-color: #ffffff;
color: #000;
}
.only-search.with-image {
margin-top: -24px;
position: relative;
z-index: 2;
}
#access { position: relative; z-index: 1; }
#branding .with-image #searchform { bottom: -37px;}
little D comments:
Nice! Updated the theme to the child-theme, reset the banner image, added the styling info and we're almost there but now there is a pesky black background covering the banner graphic. Do I need to set the background to transparent?