XF 1.3 Can you used @ tags in Extra.css ?

[Moddis]

I tried this in EXTRA.CSS but it does not pull the color:

.blockLinksList a {
color: @textCtrlText;
}

Can those type of variables be used in css templates, and if so, what is the correct format?

Thanks!

 

[Chris D]

Works for me.

It's more than likely an issue with the specificity of the selector. It may not be specific enough to override the original value.

So, you could either add more specificity to it, by prefixing those classes with a parent container selector (e.g. if those are a list of links in <ul> tags you could try ul .blockLinksList a) or you could enforce it by putting !important at the end.

 

[Moddis]

Well I actually tried it on another and I did confirm it showing up just as the "@textCtrlText" instead of the color itself:

 

[Paul B]

It works fine.
It is used extensively in CSS templates throughout.

 

[Moddis]

Wait it worked the second time after I actually went into the Extra.css template and resaved it.

What I did initially was export the style, mass update a specific color and replaced it with the @ variable. Then I imported in and it was showing the variable instead of the color. So maybe I had to go into the template and save it so that it refreshed or something.

 

[Chris D]

mass update a specific color

How did you do this? Export the XML?

If so, then, yeah, entirely expected.

When you save a template it is compiled. It's at compile time that these variables are swapped out for the expected property values.

 

[Moddis]

Yep, I exported it as an independent style via the Styles area and replaced #color with @variable in the exported XML. Then just re-imported that style via admin area.

@Chris D .. So wait, does this mean I have to re-save other custom css templaes in that style that use @variables ?

 

[Chris D]

I'd have thought re-importing the style would have sorted that. Maybe that's a bug... (@Mike?)

Right now, yes, it seems as though you will need to re-save those that you have edited externally.

 

[Mike]

The @variables are not actually what's in the template -- it's a shorthand for editing. Put a variable in a custom template and then export it and see what it looks like.

 

[Moddis]

Got it, thanks Mike!

So instead of:
.blockLinksList a {color: @textCtrlText;}

The correct format to use in xml file is:
.blockLinksList a color: {xenroperty textCtrlText};

One think to note for self when doing a mass search/replace is to continue using @variable format when replacing color in properties (CDATA) and {xenroperty variable}; when replacing in templates section of the xml.