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

XF 1.4 Skyscraper at the right side

Discussion in 'Styling and Customization Questions' started by DRaver, Dec 29, 2014.

  1. DRaver

    DRaver Active Member

    How can i display a scyscraper at the right side ?

    upload_2014-12-29_12-6-40.png
     
  2. DRaver

    DRaver Active Member

    I don´t get it. Why is no one here who can help me?
     
  3. Arty

    Arty Well-Known Member

    There is no ad template for that spot, so you'll need to use template modifications to edit page_container template.

    1. Create template with your ad code, lets call it "ad_right". Put your ad code in it.

    2. Create template modification for "page_container" template. In search field put
    Code:
        <div class="pageContent">
           <!-- main content area -->
    
    in replace field put
    Code:
        <div class="pageContent withAd">
           <!-- main content area -->
           <div class="rightAd"><xen:include template="ad_right" /></div>
    
    then add this to extra.css template:
    Code:
    #content .pageContent.withAd { position: relative; padding-right: 200px; }
    .rightAd { position: absolute; right: 0; }
    
    In that code change 200 to width of your banner + 10.

    If you want to hide banner on mobile devices because its more of annoyance than helpful on devices where there is no space for banners, add this to extra.css below your code
    Code:
    @media { max-width: 800px) {
      #content .pageContent.withAd { padding-right: 10px; }
      .rightAd { display: none; }
    }
     
    Bram likes this.
  4. DRaver

    DRaver Active Member

    Thanks, I will test it.
     
  5. DRaver

    DRaver Active Member

    @Arty Thanks for you help.

    Unfortunately, there is still a small problem.
    The Banner is right but insight the forum. But as you can see it on the picture in my post 1, I need it outside.
    Here ist the picture of my test environment.

    upload_2015-2-7_10-52-21.png

    If you can fix this little problem, than you are my hero .
     
  6. tajhay

    tajhay Well-Known Member

    What is your URL? You wont be able to see the scryscraper on lower resolutions. You know that right?
     
  7. Arty

    Arty Well-Known Member

    That would require adjusting header, content and footer, so its not a good idea.
    Code:
    #content, .footer, .footerLegal, #headerMover #header { padding-right: 200px; }
    #headerMover #header { box-sizing: border-box; }
    #content .pageContent.withAd { position: relative; }
    .rightAd { position: absolute; right: -200px; }
    and responsive block:
    Code:
    @media (max-width: 800px) {
    #content, .footer, .footerLegal, #headerMover #header { padding-right: 0; }
    .rightAd { display: none; }
    }
     
  8. DRaver

    DRaver Active Member

    Why is that not a good idea? I have e special code for the banner, to not diplay on mobil displays.
    I need that banner outside the forum to display wallpaper banner.
    Where do I have to add this code??
     
  9. Arty

    Arty Well-Known Member

    Its a replacement for css you've added to extra.css
     
    DRaver likes this.
  10. DRaver

    DRaver Active Member

    @Arty Thank you !!! Thank you !!! Thank you !!! Thank you !!! Thank you !!! Thank you !!!
     
  11. DRaver

    DRaver Active Member

    @Arty I have a little problem. I must load the leaderboard banner before the skyscraper.

    So for the leaderboard I use the ad_header template from XF.

    The skyscraper is loading at line 200 with your code.
    The leaderboard at line 3280

    Do you have any idea how I can change the order without the template to break anything?
     
  12. Arty

    Arty Well-Known Member

    Can you post screenshot?
     
  13. DRaver

    DRaver Active Member

    A screenshot from what? :)
     
  14. Arty

    Arty Well-Known Member

    Oh, you mean loading order. I thought there was overlap of banners.

    For that you need to move header block above content. Open page_container, replace
    Code:
      <div id="headerProxy"></div>
    
    with
    Code:
    <header>
       <link rel="xenforo_template" type="text/html" href="header.html" />
       <link rel="xenforo_template_hint" type="text/html" href="navigation.html" />
       <link rel="xenforo_template_hint" type="text/html" href="search_bar.html" />
    </header>
    
    then find second block closer to bottom of that file and delete it.

    Then add this to extra.css
    Code:
    div#headerMover #header { position: relative; }
     
    ideenwerk likes this.
  15. Sperber

    Sperber Active Member

    DRaver,

    has this fixed your problem? I´m about to switch from vbulletin to xf and only the missing wallpaper solution is the reason that holds me back. I have a contract for the wallpaper with a premium partner and would have to pay a substantial contractual fine, when the wallpaper ad-spot wouldn´t be present anymore.
     
  16. Bram

    Bram Well-Known Member

    Have you found a comfortable solution for this @Sperber ?
     
  17. Sperber

    Sperber Active Member

    Unfortunal not.
     
  18. Bram

    Bram Well-Known Member

    Sorry to hear that @Sperber


    Nobody else that has a 100% fitting solution?
     

Share This Page