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

Is it possible to use xen:if in CSS?

Discussion in 'XenForo Development Discussions' started by Daniel 'RTRD', Dec 2, 2012.

  1. Daniel 'RTRD'

    Daniel 'RTRD' Well-Known Member

    Is it possible to use <xen:if is="{$xenOptions.SomeRandomOption} == 0"> in CSS?
     
  2. HWS

    HWS Well-Known Member

    Yes, if that variable is available in your CSS template. :)
     
  3. Daniel 'RTRD'

    Daniel 'RTRD' Well-Known Member

    But the template is CSS and that code is "HTML". Would it still work?
     
  4. HWS

    HWS Well-Known Member

    The <xen> code is not HTML and does work in all templates.
     
  5. James

    James Well-Known Member

    No, you cannot use XenForo template syntax in any template ending in .css.
     
  6. Daniel 'RTRD'

    Daniel 'RTRD' Well-Known Member

    Is there any way to do this in CSS?
     
  7. James

    James Well-Known Member

    Write the CSS in a XenForo template such as header and wrap it in style tags.

    <xen:if is="condition">
    <style>
    //css
    </style>
    </xen:if>
     
    Chris D likes this.
  8. Chris D

    Chris D XenForo Developer Staff Member

    There's a few things you can do.

    Firstly, you could require different CSS based on conditionals, e.g.:

    Code:
    <xen:if is="!{$xenOptions.someOption}">
    	<xen:require css="someOption.css" />
    <xen:else />
    	<xen:require css="someOther.css" />
    </xen:if>
    You can also use curly conditionals inline which are incredibly useful, they work like this:

    Code:
    <div class="primaryContent {xen:if '!{$xenOptions.someOption}', 'someClass', 'someOtherClass'}">
    	Stuff
    </div>
    EDIT: Yeah James' is a good way as well. If it's just to alter one small class then inline style tags are great and can be wrapped in conditionals.
     
  9. Daniel 'RTRD'

    Daniel 'RTRD' Well-Known Member

    Thanks!

    But if I use edit_format="select" how do I get the option? Can I still use <xen:if is="{$xenOptions.SomeRandomOption} == 0">?
     
  10. Chris D

    Chris D XenForo Developer Staff Member

    What do you mean?
     
  11. Daniel 'RTRD'

    Daniel 'RTRD' Well-Known Member

    Option:
    Code:
    <option option_id="RandomOption" edit_format="radio" data_type="string" can_backup="1">
          <default_value>2</default_value>
          <edit_format_params>1 = Yes
    2 = No</edit_format_params>
          <sub_options></sub_options>
          <relation group_id="RandomOption" display_order="20"/>
        </option>
    Template:
    Code:
    <xen:if is="{$xenOptions.RandomOption} == 1">
        do something
    </xen:if>
    This does not seem to work for me. Why?
     
  12. Chris D

    Chris D XenForo Developer Staff Member

    Should work...

    Only thing I'd say, is, whenever I do format parameters, I don't use spaces...

    So the format parameters on one option on my Registration Form Timer add-on look like:

    Code:
    error={xen:phrase reg_form_error}
    redirect={xen:phrase reg_form_redirect}
    success={xen:phrase reg_form_success}
    Maybe the space between the option ID and the text is breaking it somehow?
     
  13. Lawrence

    Lawrence Well-Known Member

    Try placing the half-quotes around the 1.

    PHP:
    [CODE]<xen:if is="{$xenOptions.RandomOption} == '1'">
     
        do 
    something
     
    </xen:if>[/CODE]
     
  14. Daniel 'RTRD'

    Daniel 'RTRD' Well-Known Member

    Still the same.
     
  15. Daniel 'RTRD'

    Daniel 'RTRD' Well-Known Member

    That did not work either. :(
     
  16. cclaerhout

    cclaerhout Well-Known Member

    It seems you can use any of xenForo conditionnals in css templates.
    Look inside "editor_ui.css":
    HTML:
    <xen:if is="{$pageIsRtl}">
        /* Flip these around as they point left and right */
        .xenForoSkin span.mce_indent {background-position:-540px 0}
        .xenForoSkin span.mce_outdent {background-position:-400px 0}
    <xen:else />
        .xenForoSkin span.mce_indent {background-position:-400px 0}
        .xenForoSkin span.mce_outdent {background-position:-540px 0}
    </xen:if>
    There are also some special helpers for css, see "editor_contents.css":
    HTML:
    a:link,
    a:visited
    {
        {xen:helper cssImportant, @property "link";
    color: @primaryMedium;
    text-decoration: none;
    @property "/link";}
        {xen:helper cssImportant, @property "ugcLink";
    padding: 0 3px;
    margin: 0 -3px;
    border-radius: 5px;
    @property "/ugcLink";}
    }
    
    or "attachment_editor.css":

    HTML:
    {xen:helper clearfix, '.AttachmentEditor .AttachedFile .controls'}

    Now check from which template you are calling this css template:
    1. Check if inside this (normal) template, the variable xenOptions is working
    2. Check if your css template has been included, ex:
      Code:
      <xen:require css="css_template.css" />
     
    dwdmadmac and Daniel 'RTRD' like this.
  17. HWS

    HWS Well-Known Member

    We successfully use XenForo template syntax in .css templates.
     
  18. James

    James Well-Known Member

    Can you provide an example? To my knowledge you can't use any syntax except the ones specifically for CSS templates.
     
  19. HWS

    HWS Well-Known Member

    We have several usergroup <xen:if is="VAR"> conditions in EXTRA.css to accommodate some special formatting we provide for some of our usergroups.

    It works without problems.
     

Share This Page