XF 1.2 EXTRA.css

[Amaury]

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?

 

[MattW]

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

eg:

.competitionList .sectionHeaders a
{
    display: block;
    color: @subHeading.color;
    outline: none;
}

Which takes the subHeading group and the colour property

 

[Amaury]

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

eg:

.competitionList .sectionHeaders a
{
    display: block;
    color: @subHeading.color;
    outline: none;
}

Which takes the subHeading group and the colour property

Thanks!

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?

 

[MattW]

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]

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

View attachment 63965

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

 

[MattW]

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

Yep, that should work:

http://xenforo.com/help/css-templates/

 

[Amaury]

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

 

[Jeremy]

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

 

[Amaury]

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

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

 

[Jeremy]

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.