Is it possible to use xen:if in CSS?

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

But if I use edit_format="select" how do I get the option? Can I still use <xen:if is="{$xenOptions.SomeRandomOption} == 0">?
 
What do you mean?
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?
 
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?
 
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?
Still the same.
 
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" />
 
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.
 
Top Bottom