Search window colours

Neil E.

Active member
Totally new to xenForo...
I need to change the colours of the search box that comes up when a user types in text. I couldn't find a suitable spot to make changes anywhere in Style Properties. Is there a document that graphically illustrates the naming of each "area" of the forum layout? This would better help me locate items. I find the text description (including pop-ups) is hard to match up to what I'm looking for. For example I can't find the settings for the navigation tab hover settings. I had no problem finding the selected tab hover settings.

Jake Bunce

XenForo moderator
Staff member
This popup?

Screen shot 2012-05-08 at 1.07.07 AM.png

Here is some CSS you can use:

Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code:

	background-color: green !important;

	background-color: blue !important;

.formPopup .controlsWrapper
	background-color: red !important;
The result:

Screen shot 2012-05-08 at 1.18.10 AM.png

Most areas have their own style properties, but these elements don't have properties. They reference colors from the palette. CSS is required to change just those specific instances without having to change the palette.

I actually don't know of a color map. That's a good idea.

Neil E.

Active member
Jake, I used your example and could see the change. A great first step to learning more. Life got in the way and I'm only now back looking at XenForo.

A few notes: I understand that all aspects of the forum are built on code. I see that changes can be made grapically through "style properties" or directly by editing code in a specific template. What is the most suitable method for colour changing? Keep in mind I'm totally new to this and the biggest problem is identifying what each area of the forum is called. It seems bizarre to me that other areas pick their colours from the primary or secondary settings. Although tedious I would prefer to just edit each component with no consequence to other components.

My biggest concern is totally messing up something that will break how the forum operates when I'm just altering a colour or style. Being methodical should reduce this possibility. It seems to me that editing templates is more efficient. Using your example of the search popup, instead of just "green", can I use a hex value of "008C00" to define what green I want?

I think I see the value of using EXTRA.css to leave original templates unmolested. Would it be best to have every single template copied into EXTRA and modified there? I need to determine a modification 'philosophy' before getting started.

Neil E.

Active member

Studying this more I see the customized style components shows what's been modified. Thus any editing can be reverted back to the default setting. Does this also reflect any code changes made directly to a template?