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

XF 1.2 Conditionals don't work in a CSS template?

Discussion in 'XenForo Questions and Support' started by Moddis, Feb 10, 2014.

  1. Moddis

    Moddis Active Member

    This always shows the latter of the two whether i log in as a user or just a guest:

    <xen:if is="{$visitor.user_id}">
    .myStyle {
    margin: 23px 17px 0 0;
    }
    <xen:else />
    .myStyle {
    margin: 14px 17px 0 0;
    }
    </xen:if>

    Also, if I use something like the following, it also shows for logged in and not logged in users:

    <xen:if is="{$visitor.user_id}">
    .myStyle {
    margin: 23px 17px 0 0;
    }
    </xen:if>


    BTW, doing this is EXTRA.css
     
  2. AndyB

    AndyB Well-Known Member

    You can't use conditionals in CSS templates.
     
    Moddis likes this.
  3. Moddis

    Moddis Active Member

    Thanks.. I'll just templates and then including them in the css.
     
  4. Moddis

    Moddis Active Member

    Any idea why this would not work?

    I created a template witht he conditional and included it into my css like so:

    <xen:include template="conditionalcss" />

    That conditional template hold the..

    Code:
    <xen:if is="{$visitor.user_id}">
    .myStyle {
    margin: 23px 17px 0 0;
    }
    </xen:if>
    but the .mystyle properties show up to visitors and regular users.

    Is this because the css is being pulled in first before any of the templates can even try to calculate any of the if statements and there is no way to do this or am I obviously doing something wrong?
     
  5. AndyB

    AndyB Well-Known Member

    Put this into EXTRA.css

    Code:
    .myStyle {
    margin: 23px 17px 0 0;
    }
    

    Put this into a template

    Code:
    <xen:if is="{$visitor.user_id}">
    <div classs="myStyle">Hello world</div>
    </xen:if>
    
     
    Moddis likes this.
  6. Moddis

    Moddis Active Member

    Thanks but that would not work for me. I'm not trying to add a new class but trying to change the style of an existing one.

    Basically what im trying to do is move an image i have in the header a bit lower then there is a hanging "Login or Sign Up" button and then move the image back up when the button is gone (user is no longer a visiting user).
    Code:
     .headerImage {
        margin: 30px 5px 0 0;
    }
    <xen:if is="!{$visitor.user_id}">
         .headerImage {
        margin: 15px 5px 0 0;
        }
    </xen:if>
    I guess ill try playing around with the css to maybe get it to work without conditionals...
     
  7. AndyB

    AndyB Well-Known Member

    EXTRA.css

    Code:
    .headerImage1 {
    margin: 15px 5px 0 0;
    }
    
    .headerImage2 {
    margin: 30px 5px 0 0;
    }
    

    Template

    Code:
    <xen:if is="!{$visitor.user_id}">
    <div class=".headerImage1">your logo image</div>
    </xen:if>
    
    <xen:if is="{$visitor.user_id}">
    <div class=".headerImage2">your logo image</div>
    </xen:if>
    
     
    Moddis likes this.
  8. Steve F

    Steve F Well-Known Member

    If your just wanting to change some css for a guest or logged in users you can use the 'LoggedIn' class, like so

    Code:
    .myStyle
    {
            margin: 23px 17px 0 0;
    }
    
    .LoggedIn .myStyle
    {
            margin: 23px 17px 0 0;
    }
    Not entirely true, depending on the conditional used. In this case {$visitor.user_id} isn't available to the EXTRA.css template.

    You can use conditionals such as

    Code:
    .peLoginBar
    {
        @property "peLoginBarContainer";
        background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 10px;
        border: 1px solid @primaryLighter;
        border-radius: 5px;
        overflow: hidden;
        clear: both;
        @property "/peLoginBarContainer";
     
        <xen:if is="{$xenOptions.peShowHideEffect}">
        display: none;
        </xen:if>
    }
    Best practice would be to add a new class in html using a conditional to customize the CSS output
     
    Last edited: Feb 10, 2014
    AndyB and Moddis like this.
  9. Moddis

    Moddis Active Member

    Thanks Andy, your solution did work after a few different templates changes (Has to copy a few different styles for .headerImage to .headerImage2 that I used in quite a few @media queries)

    Didn't know there was something so simple as ".LoggedIn". Definitely used this shortcut for the one tiny edit I needed to make.

    Thanks!
     
    Steve F likes this.

Share This Page