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

XF 1.5 Skyscraper ad to right of thread list

Discussion in 'Styling and Customization Questions' started by Travis-Mc, Apr 8, 2016.

  1. Travis-Mc

    Travis-Mc Member

    I'd like to put a skyscraper ad (160x600px) to the right of the thread list. When the screen is scaled down to less than 1000px, it should bump under the thread list. (it could go the bottom of the page too). I don't really want it in the sidebar unless the sidebar is empty. I can't seem to figure out how to make it work. Any help would be greatly appreciated! Thanks.
     
  2. Mouth

    Mouth Well-Known Member

  3. Travis-Mc

    Travis-Mc Member

    That will definitely help! Thank you.
     
  4. Mouth

    Mouth Well-Known Member

    Please share your end result ;)
     
  5. Travis-Mc

    Travis-Mc Member

    The update in the link you provided helped. Here's what I ended up with..

    I wrapped the discussion list two divs and put the ad below.

    Code:
    <div class="forumViewContainer">
        <div class="threadDiscussionList">
          
          
    <div class="discussionList section sectionMain">
        <xen:include template="thread_list" />
    </div>
      
    <div class="pageNavLinkGroup afterDiscussionListHandle">
        <div class="linkGroup">
            <xen:if is="{$canPostThread}">
                <a href="{xen:link 'forums/create-thread', $forum}" class="callToAction"><span>{xen:phrase post_new_thread}</span></a>
            <xen:elseif is="{$visitor.user_id}" />
                <span class="element">({xen:phrase no_permission_to_post})</span>
            <xen:else />
                <label for="LoginControl"><a href="{xen:link login}" class="<xen:if is="@xb_login_overlay OR @xb_alt_login">OverlayTrigger </xen:if>concealed element">({xen:phrase log_in_or_sign_up_to_post})</a></label>
            </xen:if>
        </div>
        <div class="linkGroup"{xen:if '!{$ignoredNames}', ' style="display: none"'}><a href="javascript:" class="muted JsOnly DisplayIgnoredContent Tooltip" title="{xen:phrase show_hidden_content_by_x, "names={xen:helper implode, $ignoredNames, ', '}"}">{xen:phrase show_ignored_content}</a></div>
      
        <xen:pagenav link="forums" linkdata="{$forum}" linkparams="{$pageNavParams}" page="{$page}" perpage="{$threadsPerPage}" total="{$totalThreads}" />
    </div>
    
    
        </div>      
    </div>
    
        <aside>
           <div class="forumViewSide">
            AD CODE
        </div>
        </aside>
    Then added this CSS to extra.css

    Code:
    /* styling for ad in forum view */
    
    .forumViewContainer
    {
        float : left;
        margin-right: -160px;
        width: 100%;
    }
    
    .forumViewSide {
        width: 160px;
        float: right;
    }
    .threadDiscussionList {
        margin-right: 176px;
    }
    
    .threadDiscussionList .sectionMain {
        margin: 0 auto;
    }
    
    
    <xen:if is="@enableResponsive">
    @media (max-width:1000px)
    {
        .Responsive .forumViewContainer
        {
             float: none;
             margin-right: 0;
             width: auto;
        }
    
        .Responsive .threadDiscussionList
        {
            margin-right: 0;
        }
      
        .Responsive .forumViewSide
        {
            float: none;
            margin: 0 auto;
        }
    
    }
    </xen:if>
    In the code for the ad I made it not load when the viewport is less than 1000px wide. It loads an ad in the thread list instead.
     

Share This Page