XF 1.2 Only show Banner-Ad if fullwidth Style?

Andre Daub

Andre Daub

Active member
Ist it possible ti have a condition like this:

<xen:if is="!{$visitor.user_id}">
YOUR TEXT/AD HERE
</xen:if>

to show an banner only ift the client uses the forum in fullwidth?

I have a 800 x 250 Banner, and want only to show it to Desktop Users who see the site in the maximum width.
 
Sort by date Sort by votes
I am a css noob. :whistle:

This in ad Template:

<div id="banner123">
<.script>Bannercode<./script>
</div>

And this in Extra.css?

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveFull) {
.banner123 {
float: none;
text-align: center;
}
}
</xen:if>

But i bet this would not work because the code is still there for mobile Users also?!
 
Upvote 0 Downvote
If your using an ID it'd be #banner123 but if you use:
Code: 
<div id="banner123" class="hiddenResponsiveWide hiddenResponsiveMedium hiddenResponsiveNarrow">

</div>

You'll achieve the same effect.
 
Upvote 0 Downvote
Is there a better way to combine it like this?

Code: 
<xen:if is="!{$visitor.user_id}">

<div id="banner124" class="hiddenResponsiveMedium hiddenResponsiveNarrow">
Banner large
</div>

<div id="banner125" class="hiddenResponsiveFull hiddenResponsiveWide hiddenResponsiveNarrow">
Banner medium
</div>

<div id="banner126" class="hiddenResponsiveFull hiddenResponsiveWide hiddenResponsiveMedium">
Banner small
</div>

</xen:if>
EDIT: Hm it does not work. It shows all Banner.
 
Last edited:
Upvote 0 Downvote
I don´t get it to work. :-(

When i look at this:

.MyContent {
float: right;
}

<xen:if is="@enableResponsive">
@media (max-width:800px) {
.MyContent {
float: none;
text-align: center;
}
}
</xen:if>

I can define different orders for the displaying but i need to load another Banner if Side is small or wide.

I have 2 Codes: 728 x 90 and 300 x 250

I want to show the large Code if the Side is wide, and show the other code when the side is viewed by a phone for example.

Anyone who can help me?
 
Upvote 0 Downvote
But this is for adsense and i have normal banner ads.

I have this 2 Sizes:

300x250gif
<!-- Affiliate Code Do NOT Modify--><a href="xxxxxx" ><img src="xxxxxx" alt="Jetzt Anmelden" style="border:none; width:300px; height:250px; "/></a><!-- End affiliate Code-->

728x90gif
<!-- Affiliate Code Do NOT Modify--><a href="xxxxxx" ><img src="xxxxxx" alt="Jetzt Anmelden" style="border:none; width:728px; height:90px; "/></a><!-- End affiliate Code-->

I think this would not work:

Code: 
<div style="text-align: center; padding: 8px 0 4px 0; border-bottom: 1px solid @primaryLighterStill">
if (width > 483) {
<!-- Affiliate Code Do NOT Modify--><a href="xxxxxx"  ><img src="xxxxxx" alt="Jetzt Anmelden"  style="border:none; width:300px;  height:250px; "/></a><!-- End affiliate Code-->
}
if (width > 743) {
<!-- Affiliate Code Do NOT Modify--><a href="xxxxxx"  ><img src="xxxxxx" alt="Jetzt Anmelden"  style="border:none; width:728px;  height:90px; "/></a><!-- End affiliate Code-->
}
</div>

:(
 
Upvote 0 Downvote
You can use display:none if it is not against the ToS of the provider.
Otherwise it is up to the provider to implement a responsive solution.
 
Upvote 0 Downvote
Finally i did it like rellek has mentioned to me:

Code: 
<xen:if is="!{$visitor.user_id}">

<script>if($(window).width() > 1050) {
    document.write('Banner Code wide');
}</script>

<script>if($(window).width() < 1050) {
    document.write('Banner Code small');
}</script>

</xen:if>

This is simple and works to me.
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom