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

Discussion in 'Styling and Customization Questions' started by MsJacquiiC, Oct 17, 2014.

  1. MsJacquiiC

    MsJacquiiC 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.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    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 likes this.
  3. MsJacquiiC

    MsJacquiiC Well-Known Member

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

    Russ Well-Known Member

    For the first one use the .LoggedOut class :D
     
  5. cclaerhout

    cclaerhout Well-Known Member

    @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: Oct 18, 2014

Share This Page