WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Twenty Eleven] Change Search Bar Color (9 posts)

  1. pinala
    Member
    Posted 2 years ago #

    Hi all!
    Working on a child theme of Twenty Eleven and I can't seem to change the color of the search bar. Does anyone know where to add color values to replace the black/white?

    Thanks!

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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;
    }
  3. pinala
    Member
    Posted 2 years ago #

    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!

  4. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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'.

  5. pinala
    Member
    Posted 2 years ago #

    Excellent, thank you!

  6. globaltimoto
    Member
    Posted 2 years ago #

    @ 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.

  7. shermantown
    Member
    Posted 2 years ago #

    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.

  8. globaltimoto
    Member
    Posted 2 years ago #

    @ shermantown

    Thanks for that :)

  9. tinacious
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic