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

XF 1.2 EXTRA.css

Discussion in 'Styling and Customization Questions' started by Amaury, Jan 1, 2014.

  1. Amaury

    Amaury Well-Known Member

    In vBulletin, if I want to add color to something that isn't controlled by a style variable by default, in additional.css I could do color: white, for example. However, if I later made all the text red, I would have to go back in additional.css and change that accordingly. However, if I do color: {vb:stylevar postbit_color}, then I would not.

    Is there a similar function in XenForo with the style properties?
  2. MattW

    MattW Well-Known Member

    Yeah, you can reference a style property in the CSS with the @ symbol


    .competitionList .sectionHeaders a
        display: block;
        color: @subHeading.color;
        outline: none;
    Which takes the subHeading group and the colour property
    ForoStyle and Amaury like this.
  3. Amaury

    Amaury Well-Known Member


    Question, though: How did you get that? The only place I see the @ symbols is on the color palette. On the individual style properties, I just see, for example, Sub-Heading. Where did you get subHeading.color?
  4. MattW

    MattW Well-Known Member

    That snippet is from @Chris Deeming 's Competitions add-on.

    Have a look in some of the other .css templates via the ACP and you'll see other examples of it being used.

    If you hover over the name of the style property in the ACP, it will give you the @ value to use

    Amaury likes this.
  5. Amaury

    Amaury Well-Known Member

    Which I've done before. I'm a derp.

    Now, if I wanted to reference the backgrounds or borders, would these be correct?

    • subHeading.background
    • subHeading.border
    Tracy Perry likes this.
  6. MattW

    MattW Well-Known Member

    Yep, that should work:

    Amaury likes this.
  7. Amaury

    Amaury Well-Known Member

    If I want to reference a font, will something like @body.font work?
  8. Jeremy

    Jeremy Well-Known Member

    If there is a body style property with a .font attribute, yes.
  9. Amaury

    Amaury Well-Known Member

    By that, do you mean that if I have Arial in the font family box of the Body style property, it'll reference that?
  10. Jeremy

    Jeremy Well-Known Member

    It should yes. I don't actively use style properties myself so I'm not super familiar with what is available, but that is how the system works.
    Amaury likes this.

Share This Page