XF 1.4 How to put a banner here

[giorgino]

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

<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?

 

[Paul B]

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

 

[giorgino]

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

 

[Paul B]

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

 

[giorgino]

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...

 

[Paul B]

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

 

[Russ]

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

<div class="messageAd">adCode</div>

extra.css

.messageAd
{
margin: 0 auto;
text-align: center;
}

Any adjustments you need to do in responsive sizes simply use Brogan's responsive design resource.

 

[giorgino]

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

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]

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

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

        <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:

        <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.

 

[giorgino]

Brilliant Russ!

So this is the 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...

 

[giorgino]

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?

<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?