XF 1.5 Conditional - Mobile version

rosal

Member
Hi i use this to show banners in the header side the logo (ad_header) and works ok, without problems.


Code:
<xen:comment>DEFINE AND RANDOMIZE YOUR BANNERS</xen:comment>

<xen:set var="$banners.1">banner one</xen:set>
<xen:set var="$banners.2">banner two</xen:set>
<xen:set var="$banners.3">banner three</xen:set>

{xen:raw '$banners.{xen:calc '({$serverTime} % 3) + 1'}'}

But in the mobile version break the design so i need to know how to not show to the mobile version the banners, there is any conditional that can be implemented?
 

Brogan

XenForo moderator
Staff member
There are several examples in the resource.

Use display:none in conjunction with the relevant media query, or a specific class to hide content below a certain viewport width.
 

rosal

Member
Code:
.MyContent {
<xen:comment>DEFINE AND RANDOMIZE YOUR BANNERS</xen:comment>

<xen:set var="$banners.1">banner one</xen:set>
<xen:set var="$banners.2">banner two</xen:set>
<xen:set var="$banners.3">banner three</xen:set>

{xen:raw '$banners.{xen:calc '({$serverTime} % 3) + 1'}'}
}


<xen:if is="@enableResponsive">
   .MyContent {
   }
</xen:if>
This is right?
 

EQnoble

Well-known member
Code:
<div class="myBanners">banner one</div>
Code:
@media (max-width:640px){
    .myBanners {
       display: none;
    }
}
 

rosal

Member
Code:
<div class="myBanners">banner one</div>
Code:
@media (max-width:640px){
    .myBanners {
       display: none;
    }
}
Give error, show html in the header like this: @media (max-width:640px){ .myBanners { display: none; } }

I have to put the 2 codes in the ad_header template?
 

rosal

Member
I have done this to test and give error.

Code:
<xen:hook name="ad_header" />

<div class="myBanners">banner one</div>

<xen:if is="@enableResponsive">
   @media (max-width:640px){
    .myBanners {
       display: none;
    }
}
</xen:if>
 

EQnoble

Well-known member
Code:
<div class="myBanners">banner one</div>
Code:
@media (max-width:640px){
    .myBanners {
       display: none;
    }
}
Give error, show html in the header like this: @media (max-width:640px){ .myBanners { display: none; } }

I have to put the 2 codes in the ad_header template?
No, the html I posted shows what you would do with your banner html (assuming in ad_header template since that is what you mention now) so you can target them with CSS, the actual CSS rules would be pasted in the EXTRA.css template.
 

rosal

Member
Extra.css
Code:
@media (max-width:640px){
    .myBanners {
       display: none;
    }
}
ad_header
Code:
<div class="myBanners">banner one</div>
Works ok, but now how to use this code instead your banner one?
I use this code to random show 1 off 3 banners.

Code:
<xen:comment>DEFINE AND RANDOMIZE YOUR BANNERS</xen:comment>

<xen:set var="$banners.1">banner one</xen:set>
<xen:set var="$banners.2">banner two</xen:set>
<xen:set var="$banners.3">banner three</xen:set>

{xen:raw '$banners.{xen:calc '({$serverTime} % 3) + 1'}'}
 

rosal

Member
Ok i get it, i put this way and all works.

Code:
<div class="myBanners">

<xen:comment>DEFINE AND RANDOMIZE YOUR BANNERS</xen:comment>

<xen:set var="$banners.1">banner one</xen:set>
<xen:set var="$banners.2">banner two</xen:set>
<xen:set var="$banners.3">banner three</xen:set>

{xen:raw '$banners.{xen:calc '({$serverTime} % 3) + 1'}'}

</div>

@EQnoble you are the man thanks for your help.
 
Top