Edit quicksearch textbox

[Morgain]

I would like to edit the quicksearch box to make it more prominent.

I've tried making changes to search_bar.css
but it doesn't do anything.

I want to change the colour of the border, make it thicker; and change colour of the background.

 

[Paul B]

Add to EXTRA.css:

input[type=search]{
border: 5px solid yellow;
background-color: #cc0000;
}

Change the CSS to suit.

Thread moved from template modifications to styling and customisation.

 

[Morgain]

Brogan thank you. I am so enjoying all this learning with everyone being so helpful. Especially you, Dodgeboard and Jake Bunce.

 

[Morgain]

The text in the search box stays stubbornly grey.

In EXTRA.css I have

/* search colours and position */
input[type=search]{
border: 1px solid #993333;
background-color: #99cc99;
color: #black;
margin-left: 30px;
}

The background colour, border, and placing via margin all work. Not the font.

 

[Fuhrmann]

Change this:

color: #black;

To this:

color: black;

or

color: #000;

So the final code:

/* search colours and position */
input[type=search]{
border: 1px solid #993333;
background-color: #99cc99;
color: black;
margin-left: 30px;
}

 

[Morgain]

oops thank you

 

[Morgain]

Er no - tried both. Still grey not responding.

 

[Fuhrmann]

Er no - tried both. Still grey not responding.

If you want to change only from the search box you can put this on the EXTRA.css:

#QuickSearchQuery::-moz-placeholder
{
font-style: italic;
color: red !important;
}
 
#QuickSearchQuery::-webkit-input-placeholder
{
font-style: italic;
color: red !important;
}

BUT, if you want to change all the placeholders of the forms in XenForo, go to AdminCP -> Appearance -> Styles Properties -> Forms

And change:





Then the result:

 

[Morgain]

Fuhrmann thank you for all this thorough and clear information. So appreciated.