Colours for the search boxes...


Well-known member

I am running nuts. I just do not find the right CSS class or the spot in style properties to change the colours of the advanced search boxes. Especially the background of it.

Does anybody has an idea where to change the colours or with which ID i can chnage this in extra.csss?


Chris D

XenForo developer
Staff member
Let me tell you how to find this. It will help you for other things.

Do you use Chrome or Firefox?

I use Chrome, but the steps are similar for Firefox.

Right click the top left hand corner of the element you want to change (you do this so you're more likely to pick up the parent element, rather than clicking near input checkbox and being taken to the wrong bit) and then click Inspect Element.

You see how <div class="controlsWrapper"> is highlighted? That's the element and class that we need to style... To double check this if you hover over that in the code, you will see it highlighted on your screen:

Definitely looks like the right one.

Also, you can "practice" how you want it to look because you can alter the style right from within your browser (for testing purposes).

So, right there I can see the current CSS that applies (e.g. .formPopup .controlsWrapper) and all its other properties. I can also click the little square next to the background colour and change it to something I like:

And preview the results live in the browser:

Now, for some reason if I wanted that bizarre colour for my search background all I need to do is go to EXTRA.css and add:

.formPopup .controlsWrapper
background-color: #8500FF;
And then the change will be live :)

Hope that helps.

EDIT: By the way, just so you understand the different selectors in CSS...

You can apply styles to lots of different types of selector. Typically you will apply styling to classes or IDs.

Yesterday the stuff you asked for required us to use the ID of certain elements rather than classes.

But the way to identify these in CSS is classnames are prefixed with a dot: .
And in CSS ID names are prefixed with a hash: #

So if you see something like <input type="text" class="textCtrl" id="ctrl_email" />

Then you would apply styling to its class name using .textCtrl but you'd apply styling to its id using #ctrl_email

Usually classnames are preferable, but IDs are useful as they are usually unique and will only apply to a single element.

Sorry if you already knew all of this.


Well-known member
Thank you so much !!!!

I did it almost right, but did not know about the ".formPopup" part. Now it works. I should have asked earlier...

You made my day...(y)

Chris D

XenForo developer
Staff member
The steps above will literally apply to styling everything. So it's really useful.

Sometimes it's not quite so straight forward but it's a good place to start :)