Changing a colour in Twenty Eleven theme / using child theme

Do I make changes there on the child theme?

Yes

does this overwrite the appropriate part on the parent theme?

Yes

do I do it in Appearance: Editor?

Yes

what is the code that will do this?

CSS (style.css):

#access {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);
	-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: 0 auto 6px;
	width: 100%;
}

Thanks for your help Ayman.

I just pasted all that code into the editor, but it hasn’t made any difference. The link bar is still black.

I pasted it right at the bottom of the child theme. Should I paste it at a specific point?

You should change the colors:

#access {

	background: #222; /* put your color code instead of #222 */
	background: -moz-linear-gradient(#252525, #0a0a0a); /* put your color codes instead of #252525 and #0a0a0a */
	background: -o-linear-gradient(#252525, #0a0a0a); /* put your color codes instead of #252525 and #0a0a0a */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* put your color codes instead of #252525 and #0a0a0a */
	background: -webkit-linear-gradient(#252525, #0a0a0a); /* put your color codes instead of #252525 and #0a0a0a */
}

Thank you! I’ll try that and report back. (I did tell you I was a beginner!!!!)

(I did tell you I was a beginner!!!!)

No worries, we all try to do our best ??

Looks like you’ve got it corrected… I am seeing the links underline with red when I roll over them at this time. If it is corrected as you needed… great! If not then let me know what links you are wanting to change and I will be happy to give you a suggestion.

By the way… if the child theme is created properly you should put you css there. This keeps the css for the color in place even when you update the parent theme… updating your wordpress or theme will not remove your new custom css that was placed in your child theme.

Thank you Ayman! Success!

Except that now I need to make two other changes on the link bar, to complete the look.

Firstly, I need to change the link text (to the pages) to black. Where would I find the code for that?

And second, I need to change the colour of the search box from grey to white, leaving the text black. I know the colours I need are ffffff and 000000, but I don’t know the code.

Please could you help?

Thank you so much, I’m very grateful.

Firstly, I need to change the link text (to the pages) to black.

If you mean the menu links (Home, About me, Contact me) than the CSS for that is:

#access a {
color: #eee; /* Put the color code you need instead of "eee" */
}

To change the search box background you will need this CSS:

#branding .only-search #s {
background-color: #666; /* Change to "FFF" for white backgound  */
border-color: #000; /* This is for the borders of the search box  */
color: #222; /* This is the color of the font when you type in the search bar */
}

One more thing you can change is the color or the search box when you click in it. The CSS for that is:

#branding .only-search #s:focus {
	background-color: #bbb; /* Change the "bbb" to any color you like */
}

Hope this is helpful for you.

Hi graphicsmart – sorry, I didn’t see your reply when I posted my last one.

No, it’s not the links throughout the blog I’m focusing on here. They’re a dark red and I’m happy with that.

With Ayman’s help I’ve changed the solid black bar immediately under the header image from black to yellow. – the bar that houses the links to the pages.

I now need to change the text colour of these links (to About Me, Contact Me, etc) to black. And I also need to change the colour of the search box from grey to white, leaving the text in that box black.

Can you help…?
Thank you!

PS – I think the child theme is installed correctly.

The search box grey can be changed in the https://janiceheppenstall.com/blog/wp-content/themes/twentyeleven/styles.css on line 673. Change the background-color: css to the hex color code of your choice: ie… background-color: #FFF;

The menu text color is in that same file:
https://janiceheppenstall.com/blog/wp-content/themes/twentyeleven/styles.css
but on line 580. Change the color: #EEEEEE; to color: #000; if you would like black.

If you wonder how we can assist with info like this… check out the firefox browser and an addon called Firebug.

Ayman – Thank you! All done!
Thank you so much for your help.

Thank you GraphicSmart!

And thanks for the Firebug recommendation. I do want to learn about this stuff. Actually am quite impressed with myself for getting this far!

Thanks again.

Using the firefox browser… get the Firebug Add On… the MeasureIt Add On and the ColorZilla Add On.

If you have those a whole bunch of your needs will be easily answered. It will give you the info you need to know what file and what line on that file you need to change. Not only that but FireBug will allow you to change the css right there in the Firefox window until you get the color, padding, margins, etc… correct. Then once you like what you see, you simply go to the file and line of code that it shows… make the changes in the file and re-upload that file to the server.

[sig moderated as per the Forum Rules]

Thank you!

You are welcome. Good luck and happy “Dancing with Sunflowers” ??