XF 1.4 How to put a banner here

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.webp
 
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.
 
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.
 
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:
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.webp
 
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?
 
Back
Top Bottom