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

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

Discussion in 'XenForo Questions and Support' started by Moddis, Mar 22, 2014.

  1. Moddis

    Moddis Active Member

    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?

  2. Chris D

    Chris D XenForo Developer Staff Member

    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 and Amaury like this.
  3. Moddis

    Moddis Active Member

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

  4. Brogan

    Brogan XenForo Moderator Staff Member

    It works fine.
    It is used extensively in CSS templates throughout.
    Moddis likes this.
  5. Moddis

    Moddis Active Member

    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.
  6. Chris D

    Chris D XenForo Developer Staff Member

    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.
    Amaury likes this.
  7. Moddis

    Moddis Active Member

    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 ?
  8. Chris D

    Chris D XenForo Developer Staff Member

    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.
    Moddis likes this.
  9. Mike

    Mike XenForo Developer Staff Member

    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.
    Chris D and Moddis like this.
  10. Moddis

    Moddis Active Member

    Got it, thanks Mike!

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

    The correct format to use in xml file is:
    .blockLinksList a color: {xen:property 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 {xen:property variable}; when replacing in templates section of the xml.
    Chris D likes this.

Share This Page