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

XF 1.4 How to put a banner here

Discussion in 'Styling and Customization Questions' started by giorgino, Dec 8, 2014.

  1. giorgino

    giorgino Well-Known Member

    I need to put a banner below the last message in every thread, so I created a template mod that do it.

    Code:
    <xen:if is="!in_array({$thread.node_id}, array(13,34,39,52,41,42,30,31,50,37))"> 
              <xen:if is="!{xen:helper ismemberof, $visitor, 35}
                  AND !{xen:helper ismemberof, $visitor, 36}
                  AND !{xen:helper ismemberof, $visitor, 41}
                  AND !{xen:helper ismemberof, $visitor, 42}
                 AND !{xen:helper ismemberof, $visitor, 37}
                 AND !{$visitor.is_moderator}"> 
    
                <!-- immobilio_336x280_ultimo_post -->
                    <div id='div-gpt-ad-1416927068052-0' style='width:336px; height:280px;'>
                        <script type='text/javascript'>
                            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1416927068052-0'); });
                        </script>
                </div>
            </xen:if>
    </xen:if>
    
    The banner is perfect on mobile view (with the horizontal postbit) but not aligned with text in desktop view. How to handle this to obtain the right alignment in both mobile and desktop view?
    banner.png
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Wrap the ad code in a class and use a media query.
     
  3. giorgino

    giorgino Well-Known Member

    mmm... I really don't know where to start with my little code knowledge (if is possible to call my code skill "knowledge"...)
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Wrap the ad code in something like <div class="myClass">...</div>

    Then use a media query to change the class based on the browser width: Responsive Design
     
  5. giorgino

    giorgino Well-Known Member

    Wrap the ad code in a css class is clear (more or less)... it's the media query part that isn't clear at all...
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    The guide I linked to explains how to adjust CSS for different widths using media queries.
     
  7. Russ

    Russ Well-Known Member

    If your goal is to simply center it:

    ad_message_below template could work
    Code:
    <div class="messageAd">adCode</div>
    extra.css
    Code:
    .messageAd
    {
    margin: 0 auto;
    text-align: center;
    }
    
    Any adjustments you need to do in responsive sizes simply use Brogan's responsive design resource.
     
  8. giorgino

    giorgino Well-Known Member

    Thank you Russ, but mu needs are to locate the banner in line with the block of message text (see the picture I posted above).
    If I use something like
    Code:
    padding-left: 140px;
    it's perfect in desktop view but not in mobile view, where the text is a 0 pixel from the left.
     
  9. Russ

    Russ Well-Known Member

    Take out the padding left, open the message template:

    Find
    Code:
            <blockquote class="messageText SelectQuoteContainer ugc baseHtml{xen:if $message.isIgnored, ' ignored'}">
               <xen:include template="ad_message_body" />
               {xen:raw $message.messageHtml}
               <div class="messageTextEndMarker">&nbsp;</div>
             </blockquote>
    
    Move this ad include around like so:

    Code:
            <blockquote class="messageText SelectQuoteContainer ugc baseHtml{xen:if $message.isIgnored, ' ignored'}">
               {xen:raw $message.messageHtml}
               <div class="messageTextEndMarker">&nbsp;</div>
    <xen:include template="ad_message_body" />
             </blockquote>
    
    Then use the ad_message_body template instead of the one I referenced below. I think that would work without any additional use of padding.
     
    Last edited: Dec 8, 2014
  10. giorgino

    giorgino Well-Known Member

    Brilliant Russ!

    So this is the code
    Code:
    <xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 9">
    <xen:if is="!in_array({$thread.node_id}, array(13,34,39,52,41,42,30,31,50,37))">
              <xen:if is="!{xen:helper ismemberof, $visitor, 35}
                  AND !{xen:helper ismemberof, $visitor, 36}
                  AND !{xen:helper ismemberof, $visitor, 41}
                  AND !{xen:helper ismemberof, $visitor, 42}
                 AND !{xen:helper ismemberof, $visitor, 37}
                 AND !{$visitor.is_moderator}">
    
                <!-- immobilio_336x280_ultimo_post -->
                    <div id='div-gpt-ad-1416927068052-0' style='width:336px; height:280px;'>
                        <script type='text/javascript'>
                            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1416927068052-0'); });
                        </script>
                </div>
            </xen:if>
    </xen:if>
    </xen:if>
    And this is the result. As you can see, my first intention was to locate the banner above the pagination...

    Schermata 2014-12-08 alle 21.49.48.png
     
  11. giorgino

    giorgino Well-Known Member

    So in my case, this should be the solution, right?

    Code:
    <xen:if is="@enableResponsive">
        @media (max-width:@maxResponsiveWideWidth) {
            .MyAd {
            padding-left: 140px;
            }
        }
    
        @media (max-width:@maxResponsiveMediumWidth) {
            .MyAd {
            padding-left: 140px;
            }
        }
    </xen:if>
    After that, <div class="MyAd">... </div>

    That's right?
     

Share This Page