XF 1.3 Conditionals in the Extra.css?

JacquiiDesigns

Well-known member
I'm trying to wrap a conditional statement around the following code in Extra.css template.
I've tried both of the following:

Code:
<xen:if is="!{$visitor.user_id}">
/* no Events tab in navbar */
li.navTab.events{
display: none !important;
}
</xen:if>
Code:
<xen:if is="!{xen:helper ismemberof, $visitor, 1}">
/* no Events tab in navbar */
li.navTab.events{
display: none !important;
}</xen:if>

Is it even possible to use conditionals in the extra.css? I thought yes - but these conditionals aren't working correctly.
Can you suggest a correct conditional so that the code above is hidden for guests but shows for logged in users?

J.
 
EXTRA.css doesn't support conditional statements.
You have to apply them to the HTML templates.

The link in my signature has a list of the most commonly used conditional statements.
 
@MsJacquiiC

Conditionals are working in the extra.css template or any css templates. If you insert this code in it, your body background color will be purple.
Code:
<xen:if is="2 == 2">
   html body{
     background-color: {xen:if "1 == 1", "purple", "green"} !important;
   }
</xen:if>

html body{
   background-color: yellow;
}

Your conditional doesn't work because it's using some variables that are not available in the css templates. These variables are not available there, because the css are cached, which means having these variables here won't be useful (the display will not be refreshed because of the cache). Here are the available variables in the css templates:
PHP:
    $params = array(
       'displayStyles' => $this->_displayStyles,
       'smilieSprites' => $this->_smilieSprites,
       'customBbCodes' => !empty($bbCodeCache['bbCodes']) ? $bbCodeCache['bbCodes'] : array(),
       'xenOptions' => XenForo_Application::get('options')->getOptions(),
       'dir' => $this->_textDirection,
       'pageIsRtl' => ($this->_textDirection == 'RTL')
     );

You can also make custom variables using the style properties (keep in mind the cache thing):
Code:
{xen:if "@myStyleProperty == 'this'", "then value is x", "else value is y"};

As an alternative, you can insert your conditional in the main template that requires your css template and make a custom css template for this usergroup. Once the custom css template done, go inside your main template and inserts in it:
HTML:
<xen:if is="!{xen:helper ismemberof, $visitor, 1}">
<xen:require css="custom.css" />
</xen:if>
 
Last edited:
Top Bottom