It's Funky Friday, so here's a little something to make your search box fun:
Changing search box color
- Go to your Help Center > Customize Design
- Access your CSS files
- Do a search for /* Search box */
- Find the following element:
.search-box input, .sub-nav .search input {
To change the background color, simply add background: #HEX;
.search-box input, .sub-nav .search input {
line-height: 1.2em;
font-weight: lighter;
padding: .75em 2.7em;
width: 100%;
background: #FF0066;
-webkit-appearance: none;
}
Changing the color of the search icon
The fun doesn't stop there! You can also change the color of the magnifying glass.
- Look for the following:
.search-box:before, .sub-nav .search:before {
- Now add some color: #HEX to it:
.search-box:before, .sub-nav .search:before {
color: #fff;
edit:
Thanks to Carlos to added the following code to change the text color
Based on another document by Moderator Wes, you can change your placeholder text.
$('#query').attr('placeholder','Search our Forums');
You can then use after the above, the following CSS
::-webkit-input-placeholder {
color: #000000;
Enjoy!
