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

Moddis

Active member
#1
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
 

Moddis

Active member
#4
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?
 

AndyB

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

Active member
#6
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...
 

AndyB

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

Steve F

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

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

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:

Moddis

Active member
#9
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>
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

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

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
Didn't know there was something so simple as ".LoggedIn". Definitely used this shortcut for the one tiny edit I needed to make.

Thanks!