• 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?

James

Well-known member
#7
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

XenForo developer
Staff member
#8
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.
 

Daniel 'RTRD'

Well-known member
#9
Thanks!

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

Daniel 'RTRD'

Well-known member
#11
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?
 

Chris D

XenForo developer
Staff member
#12
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?
 

Daniel 'RTRD'

Well-known member
#14
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.
 

cclaerhout

Well-known member
#16
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" />
 

HWS

Well-known member
#19
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.