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

XF 1.2 Only show Banner-Ad if fullwidth Style?

Discussion in 'XenForo Questions and Support' started by Andre Daub, Sep 13, 2013.

  1. Andre Daub

    Andre Daub 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.
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    Do you have multiple styles? Or just one?
     
  3. Andre Daub

    Andre Daub Member

    Only one style with responsive enabled.
     
  4. Jeremy

    Jeremy XenForo Moderator Staff Member

    Then no, there isn't a conditional. You could use CSS tho.
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

  6. Andre Daub

    Andre Daub Member

    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:mad: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?!
     
  7. Jeremy

    Jeremy XenForo Moderator Staff Member

    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.
     
    Andre Daub likes this.
  8. Andre Daub

    Andre Daub Member

    Yeah, it works really perfect- Thank you very much. :)
     
  9. Andre Daub

    Andre Daub Member

    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: Sep 26, 2013
  10. Jeremy

    Jeremy XenForo Moderator Staff Member

    Do you have a link to your site?
     
  11. Andre Daub

    Andre Daub Member

  12. Andre Daub

    Andre Daub Member

    Any idea, or is it not possible?
     
  13. Andre Daub

    Andre Daub Member

  14. Brogan

    Brogan XenForo Moderator Staff Member

  15. Andre Daub

    Andre Daub Member

    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?
     
  16. Brogan

    Brogan XenForo Moderator Staff Member

    The resources I posted in post #5 explains how to do that.
     
  17. Andre Daub

    Andre Daub Member

    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>
    :(
     
  18. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  19. Andre Daub

    Andre Daub Member

    The provider pays per view.
    If the small banner is shown, or the big one - it is the same pay per view.
     
  20. Andre Daub

    Andre Daub Member

    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.
     

Share This Page