• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Edit quicksearch textbox

Morgain

Well-known member
#1
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.
 

Brogan

XenForo moderator
Staff member
#2
Add to EXTRA.css:
Code:
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

Well-known member
#4
The text in the search box stays stubbornly grey.

In EXTRA.css I have

Code:
/* 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

Well-known member
#5
Change this:

Code:
color: #black;
To this:

Code:
color: black;
or

Code:
color: #000;

So the final code:


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

Fuhrmann

Well-known member
#8
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:

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

Sem título.png


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

And change:


Sem título2.png


Then the result:


Sem título3.png