EXTRA.css Tutorial Request

Hi All,

I was hoping someone could give me a quick tutorial on how to make edits to EXTRA.css as opposed to the Style Properties. For example, I see that I can go to Style Properties: Header and Navigation, and change the default banner, but I would prefer to use EXTRA.css to do this. That way, if I upgrade Xenforo or the theme gets updated I won't have to worry about re-applying that, yes?

So if I wish to make a series of Style Property adjustments via EXTRA.css, how do I know what the CSS code is to make the change? Is there an easy way to locate the CSS code a soecific Style Property so that I can then add it to EXTRA.css?

Any clarification would be appreciated.

- Greg


Well-known member
It overrides the classes you choose so for example the block quote you've used to quote my post has the following class definition to define the border:

.bbCodeQuote {
    border-color: #F9D9B0;
If you wanted for example to add padding and change the border colour to red you would simply add the following to EXTRA.css

.bbCodeQuote {
    border-color: #FF0000;
    padding: 5px;
If that doesn't have the desired effect then adding !important to the end of the line (prior to the semi-colon) should force the override.
ok, so since i don't really know anything about css, the line that begins with a period (i.e. .bbCodeQuote) is crucial and needs to be included in each of my EXTRA.css edits?

Chris D

XenForo developer
Staff member
EDIT: I took a while to write this so not quite relevant now :p

Generally each element has its own unique class, or combination of classes.

If I wanted to change the colour of the avatar holder for example....


You can right click any element in Firefox or Chrome and click Inspect Element, so if I right click the blue bit around the avatar and click Inspect Element, chrome pops up with this:


So on the left we can see the HTML. The div element for an avatar is configured with the "avatarHolder" class.

On the right, also important we see the CSS rules which are matched for that element, this is probably the most important bit.

In Chrome (and probably Firefox too) you can even edit things right in the browser for preview purposes. Just click the colour and choose one from the picker. Or if you know your colour just type the new hex code in.

I want it a nice red:


And that now looks like this:


So what do you need to put into extra.css?

Look at the style again:


In extra.css you need to put:

.messageUserBlock div.avatarHolder {
background-color: #d34949;
Trying not to go into too much detail, but that will work.

So you can apply these basics to anything else.