Is it possible to use xen:if in CSS?

[Daniel 'RTRD']

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

 

[HWS]

Yes, if that variable is available in your CSS template.

 

[Daniel 'RTRD']

Yes, if that variable is available in your CSS template.

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

 

[HWS]

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

 

[James]

No, you cannot use XenForo template syntax in any template ending in .css.

 

[Daniel 'RTRD']

No, you cannot use XenForo template syntax in any template ending in .css.

Is there any way to do this in CSS?

 

[James]

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]

There's a few things you can do.

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

<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:

<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.

 

[Daniel 'RTRD']

Thanks!

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

 

[Chris D]

What do you mean?

 

[Daniel 'RTRD']

What do you mean?

Option:

<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:

<xen:if is="{$xenOptions.RandomOption} == 1">
    do something
</xen:if>

This does not seem to work for me. Why?

 

[Chris D]

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:

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?

 

[Lawrence]

<xen:if is="{$xenOptions.RandomOption} == 1">
    do something
</xen:if>

This does not seem to work for me. Why?

Try placing the half-quotes around the 1.

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

 

[Daniel 'RTRD']

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:

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?

Still the same.

 

[Daniel 'RTRD']

Try placing the half-quotes around the 1.

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

That did not work either.

 

[cclaerhout]

It seems you can use any of xenForo conditionnals in css templates.
Look inside "editor_ui.css":

<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":

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":

{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:
   

   <xen:require css="css_template.css" />

 

[HWS]

No, you cannot use XenForo template syntax in any template ending in .css.

We successfully use XenForo template syntax in .css templates.

 

[James]

We successfully use XenForo template syntax in .css templates.

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

 

[HWS]

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

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.