• 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

giorgino

Well-known member
#1
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
 

giorgino

Well-known member
#3
mmm... I really don't know where to start with my little code knowledge (if is possible to call my code skill "knowledge"...)
 

Russ

Well-known member
#7
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...
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.
 

giorgino

Well-known member
#8
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.
 

Russ

Well-known member
#9
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.
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:

giorgino

Well-known member
#10
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
 

giorgino

Well-known member
#11
The guide I linked to explains how to adjust CSS for different widths using media queries.
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?