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

XF 1.3 Conditionals in the Extra.css?

MsJacquiiC

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

Brogan

XenForo moderator
Staff member
#2
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

Well-known member
#3
Thanks for your response Brogan.
Do you think the ability to use conditionals in EXTRA.css will ever be an option? Perhaps in a new XF version?

J.
 

cclaerhout

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