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

[Moddis]

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

 

[AndyB]

You can't use conditionals in CSS templates.

 

[Moddis]

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

 

[Moddis]

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

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

 

[AndyB]

Put this into EXTRA.css

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

Put this into a template

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

 

[Moddis]

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).

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

 

[AndyB]

EXTRA.css

.headerImage1 {
margin: 15px 5px 0 0;
}

.headerImage2 {
margin: 30px 5px 0 0;
}

Template

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

 

[Steve F]

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

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

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

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

You can't use conditionals in CSS templates.

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

.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

 

[Moddis]

EXTRA.css

.headerImage1 {
margin: 15px 5px 0 0;
}

.headerImage2 {
margin: 30px 5px 0 0;
}

Template

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

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)

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

.myStyler
{
        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

.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

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

Thanks!