[Twenty Eleven] Change Search Bar Color

not really a child theme – but this is your problem (are you aware that your modifications will be overwritten when you upgrade your wordpress the next time?)

#branding .only-search #s {
	background-color: #666;
	border-color: #000;
	color: #222;
}

and

#branding .only-search #s:focus {
	background-color: #bbb;
}

Hey thanks for your help Alch!

As for the child theme, I had all the files in a different folder from TwentyEleven, cleverly named notwentyeleven, but now everything is clearly labeled and the metadata no longer says TwentyEleven. From what I’ve read, I think that should make the theme safe from being overwritten. Thanks calling attention to that. It would be awful if I lost all my work ??

As for the search bar, I added in the code you provided to the main css, to no avail. Any ideas what’s preventing it from working?

Thanks again for your assistance!

As for the search bar, I added in the code you provided to the main css, to no avail. Any ideas what’s preventing it from working?

what i posted are the existing styles for the search box which define the colors (background, text, and border); you need to locate them in style.css, and change the color codes to suit your ideas.

if you don’t see the changes in the browser, try to clear the browser cache by pressing ‘CTRL F5’.

Excellent, thank you!

@ alchymyth

I’ve been able to edit and see changes with many of the css values, but for some reason these ones will not render in my browsers.

I edited parent as well as child to see if that would make a difference, flushed cache, tried in different browsers.

It seems that changing all these values will work:

#branding #searchform {
	position: absolute;
	top: 3.8em;
	right: 7.6%;
	text-align: right;
}
#branding #searchform div {
	margin: 0;
}
#branding #s {
	float: right;
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: width, background;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: width, background;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: width, background;
	-o-transition-timing-function: ease;
	width: 72px;
}
#branding #s:focus {
	background-color: #f9f9f9;
	width: 196px;
}
#branding #searchsubmit {
	display: none;
}

but in these not:

#branding .only-search #searchform {
	top: 5px;
	z-index: 1;
}
#branding .only-search #s {
	background-color: #666;
	border-color: #000;
	color: #222;
}
#branding .only-search #s,
#branding .only-search #s:focus {
	width: 85%;
}
#branding .only-search #s:focus {
	background-color: #bbb;
}
#branding .with-image #searchform {
	top: auto;
	bottom: -27px;
	max-width: 195px;
}
#branding .only-search + #access div {
	padding-right: 205px;
}

My site is offline, otherwise I would have provided a link.

I had the same problem. You want to modify:

input#s {
	background-color: #fff;
	background-image: url(images/search.png) no-repeat 5px 6px;
}

I changed background to background-image and added background-color. Change #fff to whatever you would like.

@ shermantown

Thanks for that ??

i didn’t try any of the suggestions for modifying the parent theme because i don’t want to modify it. i added the code that globaltimoto suggested to the child theme and that worked. thanks!