You can change the background-color by adding it to this CSS (line 503):
#branding {
background-color: #xxxxxx;
border-top: 2px solid #BBBBBB;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
Obviously, substitute the color you want. Then you’ll probably want to change the color in the search box which you can do here (line 625):
#branding #searchform {
background-color: white;
position: absolute;
right: 7.6%;
text-align: right;
top: 3.8em;
}
WPyogi,
Thank you for this info. In my child theme editor area is the entire style.css supposed to show? Or where is the preferred area to edit? I have dreamweaver and am considering doing it there. If I look at parent theme style.css it is robust and has all the info, but my child is just the 5 or so lines I copied pasted from a website to create the child. Am I doing something wrong here?
Thanks in advance!
E.G.
When opening editor under appearance of my child theme, the following is produced:
/*
Theme Name: Twenty Eleven Child Theme
Description: Child theme for Twenty Eleven
Author: Danny Lutsk
Author URI: http://autofindvb.com
Template: twentyeleven
*/
@import url(“../twentyeleven/style.css”);
body {
background: #333;
}
For child themes, just add the entire CSS section — with the changes you want. No, the parent style.css does not show in the child style.css — but when the page is rendered the browser uses both stylesheets — but the child stylesheet overrides the parent one.
So just add the pieces I copied above — with your changes.
BTW, the best way to work with CSS is by using Firebug — so that you can see what CSS is affecting which sections of your page. You might also want to look at the Codex on CSS and the W3C on CSS.
WPyogi,
I have, use, and love firebug, but I don’t think my question is clear. I want to change many components of my twenty eleven theme, thus do I need to import the entire Style.css sheet into my child theme? In order to leave the parent alone? Again, the only thing I have in child is this: and feel like it should mirror what my parent theme looks like? So when I use firebug to identify line coding, I can go straight to Dreamweaver, change and update?
*
Theme Name: Twenty Eleven Child Theme
Description: Child theme for Twenty Eleven
Author: Danny Lutsk
Author URI: http://autofindvb.com
Template: twentyeleven
*/
@import url(“../twentyeleven/style.css”);
body {
background: #333;
}
When you say “add the entire CSS section”. Which section is this? The entire code from parent theme? I don’t want to continually pluck things from parent, if I can just start with the child theme. I am so confused
The CSS code sections that I copied in my first answer above — THIS:
#branding {
background-color: #xxxxxx;
border-top: 2px solid #BBBBBB;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
#branding #searchform {
background-color: white;
position: absolute;
right: 7.6%;
text-align: right;
top: 3.8em;
}
Note that you need to put the color you want in the first one — replace the xxxxxx with the color code. Google hex color codes if you are not familiar with them.
You don’t HAVE to “pluck” things from the parent stylesheet if you know how to code them yourself so they work.
When using firebug, I understand how color codes work and to make them work. It all works. The problem is my child theme css is only those short lines I listed above. The actions of what you describe I have completed and thank you for them, but you are misunderstanding my questions- probably because I am posing it difficult.
Are you implying that to change anything in my child theme, I must first locate it in my parent, edit it elsewhere and then include it in my child theme css? This seems ridiculously sloppy to me. Can’t I just have the exact code in my child theme as my parent theme and start the coding in child and allow the import rule to not interfere with parent. I am frustrated that I cannot get across to you what I am trying to do.
e.g. Does everyone’s child theme start with just the header and they individually add respective lines of coding on what the desire to change on their theme?
What did your child theme look like when you first installed it in terms of style.css. Did it look like mine above? Or did it envelope coding similar to the parent theme with the exception of the header which is required to be different in child?
Or let me put it this way. My parent theme style.css file is 52k large. My child theme style.css is 249bytes. Is that an issue?
Yes, all child theme stylesheets start out empty except for the header section and the import line.
You only need whatever code in your child css file for what you want to be different from the parent. So no, file size makes no difference at all.
Have you read Child Themes?
Perhaps I confused things — because all you really need in your child style.css for the changes above is:
#branding {
background-color: #xxxxxx;
}
#branding #searchform {
background-color: white;
}
The rest just duplicates what is already there in the parent stylesheet.
I realize that I went off on a tangent and tried to get you to answer a completely different question when you were trying and succeeding at answering my original question. Thanks for sticking with me on this one.
I thought maybe my child theme setup was different than other users or that it didn’t fully import the parent them coding. Your recent posts have confirmed things and I really appreciate your effort.
So in order:
-use firebug to identify code ling
-archive style.css parent
-copy it in note pad or dreamweaver or whatever (optional)
-edit it to add your changes
-save in child style.css
-changes take effect
I have read child themes several times. I guess I may have a comprehension problem 🙁
