EXTRA.css Tutorial Request

[allthingsweezer]

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

 

[zappaDPJ]

I use Firebug for Firefox. It's really all you need. http://getfirebug.com/

Once you've identified the code, add it to EXTRA.css along with any edits you want to make.

 

[allthingsweezer]

I use Firebug for Firefox. It's really all you need. http://getfirebug.com/

Once you've identified the code, add it to EXTRA.css along with any edits you want to make.

Fair enough, but how does EXTRA.css know which CSS file to make the override to? Can you give me an example of how it might look?

 

[zappaDPJ]

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.

 

[allthingsweezer]

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]

EDIT: I took a while to write this so not quite relevant now

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.

 

[Chris D]

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?

Yep, that's how the CSS knows what to apply the changes to

 

[Main Company]

If I place code in Extra.css, should this automatically be applied? Do I need to make any other changes in ACP in order to "enable" this css code?

 

[DEZero]

It will apply automatically, in some cases you must add !important to your css, but there are no other acp options that you must edit.