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

EXTRA.css Tutorial Request

Discussion in 'Styling and Customization Questions' started by allthingsweezer, Jun 10, 2012.

  1. 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
     
    Stephen Fifty and creativeforge like this.
  2. zappaDPJ

    zappaDPJ Well-Known Member

    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.
     
    Yorick likes this.
  3. 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?
     
  4. zappaDPJ

    zappaDPJ 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:

    Code:
    .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

    Code:
    .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.
     
  5. 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?
     
  6. Chris D

    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....

    avatarcontainer.PNG

    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:

    chromedev.PNG

    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:

    avatar_holder_red.PNG


    And that now looks like this:

    avatar_holder_red2.PNG


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

    Look at the style again:

    avatar_holder_red.PNG

    In extra.css you need to put:

    Code:
    .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.
     
  7. Chris D

    Chris D XenForo Developer Staff Member

    Yep, that's how the CSS knows what to apply the changes to (y)
     
  8. Main Company

    Main Company Active Member

    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?
     
    Stephen Fifty likes this.
  9. DEZero

    DEZero Well-Known Member

    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.
     
    Stephen Fifty likes this.

Share This Page