Open style.css in the twentyeleven theme folder for editing in a plain text or coding editor. Do not actually change anything! We are only looking and copying. Scroll down to line 571. Under #access selector are several background rules for various browsers. Copy/paste the entire selector group with all its rules to the Additional CSS panel of the customizer. Delete the rules in the customizer that do not pertain to background. Edit the background property values as desired, then save the customizer changes.
Thread Starter
hbouma
(@hbouma)
Thank you for your answer bcworkz!
In the style.css (from line 571) is find these codes:
#access {
background: #222; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f78f1e, #f78f1e);
background: -o-linear-gradient(#f78f1e, #f78f1e);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f78f1e), to(#f78f1e)); /* older webkit syntax */
background: -webkit-linear-gradient(#f78f1e, #f78f1e);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0px auto 0px;
width: 100%;
#f78f1e is the colour I would like to change. You wrote: “Copy/paste the entire selector group with all its rules to the Additional CSS panel of the customizer.” Some questions:
– What do you mean with: “to the Additional CSS panel”?
– How do I know what the rules is that does not pertain to background?
As you can see, I am not an expert 😉
Henk
Thread Starter
hbouma
(@hbouma)
I use a Macbook Pro. In Google Chrome I used the combination cmd+alt+i. I found out with line I should be changing. It seems the menu background uses to colors… I removed the lines:
background: -moz-linear-gradient(#f78f1e, #f78f1e);
background: -o-linear-gradient(#f78f1e, #f78f1e);
And I changed the remaining line into:
background: -webkit-linear-gradient(#2a58eb, #2a58eb);
I saved the style.css and put it back with my ftp protocol. Nothing happend …
Thread Starter
hbouma
(@hbouma)
Found it 😉 In the Mac finder I had to go back to another level, return to the path where the changed style.css was and upload it then. Working!!
Thread Starter
hbouma
(@hbouma)
Not found it… The code now is:
#access {
background: #222; /* Show a solid color for older browsers */
background: -webkit-linear-gradient(#2a58eb, #2a58eb);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0px auto 0px;
width: 100%;
}
#2a58eb should be dark blue but it’s still orange. Help 😉
Directly editing style.css is a bad idea. Your work will be lost when the theme updates. None the less, your changes should work. Probably your browser is still using the old file version from its cache. You’ll need to flush its cache and reload the page to see CSS changes.
The best place to put custom CSS is that Additional CSS panel because such CSS is output as inline CSS on the page and reliably overrides the same rules from external files. You can leave your style.css edits as they are, they’ll revert eventually. But please do copy to Additional CSS. To find it, in the admin area go Appearance > Customize. Near the bottom of the left hand menu is “Additional CSS”. Expand it. Paste into the edit area. If there is already content (not including the info box which you can close) in the edit area, add your CSS below anything else already there. Click the Publish button. You can immediately see the effect in the customizer preview, but you might still need to flush the browser cache and reload the actual page to see the effect.
Of course, if you’ve already seen the effect from editing style.css there will not be any difference unless you reverted the style.css changes yourself.
