0

I recently purchased a theme which includes the option to display a banner in the header. The banner can be displayed using either a static image or javascript. The particular javascript code I'm using is for an Amazon banner ad and is displayed on the frontend via an iframe.

Using a static image the banner displays correctly as you can see here: http://capethemes.com/demo/portal/review/

When using the javascript code, however, the banner is not visible. Upon inspecting the source code, I discovered that the script tags and html containing block are there but the iframe element is missing.

Anyway, I was able to ascertain that it is a styling issue but am not sure how to resolve it. The following default theme styles are being applied to the .headad element:

.headad {
float: right;
position: absolute;
top: 50%;
right: 0;
margin: -65px 0 0 0;
}

...and here's the snippet used to display the banner:

echo '<div class="clearfix"></div><div class="headad">';
echo htmlspecialchars_decode($themnific_redux['tmnf-headad-script']);
echo '</div>';

UPDATE #1

I've found I need to set a value for the width property on the .headad div to get the banner to display. Presumably this is because it's a responsive banner and therefore there has to be a width specified for the containing element so the appropriately sized banner image can be served.

Here's an overview of all the relevant details:

HTML markup of banner ad and containing div (I have only included the outer HTML)

<div class="headad">
<script type="text/javascript"></script>
<script></script>
<div ><iframe></iframe></div>
</div>

CSS for .headad element

.headad {
float: right;
position: absolute;
top: 50%;
right: 0;
margin: -65px 0 0 0;
}

This is the default theme CSS. I have changed float: right; to float: none; because position: absolute; is already being applied to the element. As I have already mentioned, to get the banner to display I have to set a value for the width property.

iframe CSS

iframe {
border: none;
display: inline-block;
width: 728px;
height: 90px;
}

UPDATE #2

I reproduced this on jsfiddle. You can view it here. Because this is a responsive banner, the width of the containing element has to be specified so the appropriately sized image can be returned. Maybe have to define a set of width property values using media queries for the .headad element?

  • The iframe is missing in the source and you believe it to be a styling issue? That sounds like ambitious CSS ;) – janh Nov 3 '17 at 8:08
  • Yes, strange but true. – jrcollins Nov 4 '17 at 8:40
  • What I was trying to say is: you cannot style what isn't there. I believe that TinyMCE filters out iframes generally, see this answer for an example to fix that. Maybe that's all it needs in your case? – janh Nov 4 '17 at 8:53
  • It's in the header, not the post. Actually, I'm using the exact same script in another ad block which appears at the bottom of single posts and that is working ok. If I apply the same CSS styles from that ad block (eg. display block, and 100% width) to the header ad, I can get the ad to display. That's how I know it's a styling issue. – jrcollins Nov 4 '17 at 21:32
  • 1
    Better make a jsfiddle or give an example of url that use the js banner to better assess the situation. – Drupalizeme Nov 8 '17 at 10:55
1

It's there and visible in Incognito mode, it's being blocked by one of the adBlocker extension that you might be using in your browser.

The best workaround would be is to change the class from headad to something more generic like head-banner.

Make sure you update the style in your theme/plugin.

Blocked by adblock

Banner with updated class:

Banner with updated class and style

  • well obvious :D i feel a bit dumb now ;) – GDY Nov 8 '17 at 11:15
  • No, as I explained in my question, the ad shown in the theme demo is a static image and not a script. It's an Amazon banner ad script that I'm having trouble with. – jrcollins Nov 8 '17 at 21:33
  • @jrcollins Is there a URL to check this live? – sven Nov 9 '17 at 5:37
0

Just digged into this problem with dev tools. Somehow it gets computed with display none ... i don't know exactly why this happens. Seems like there is some strange inline style that gets added async …

Try this:

#header.left-header .headad {
    display: block !important;
}
  • A static image is shown on the theme demo. The problem I'm having is with a script which is displayed via an iframe on the front end. – jrcollins Nov 9 '17 at 1:06
  • Well then it would be best for us if you give us some example on wich we can view your problem. – GDY Nov 13 '17 at 10:57
-1

As already stated in my question, to display the banner ad a width has to be specified for the containing .headad element so the correctly sized image can be displayed. This is because the .headad element has position:absolute applied to it and so has no inherent width.

The only way to display the banner ad across the full range of browser/screen sizes is to use multiple CSS media queries. Even then, it is necessary to make a number of other styling adjustments to account for changes in the relative heights of the various elements.

Anyway, I've decided it's just not worth pursuing this any further. I will edit the style sheet so that the banner ad is only displayed when the browser/screen size is large enough to accommodate the full sized banner.

Thank you to everyone who helped out with this question.

  • Why vote this down? Have you got any suggestions on how to answer it? – jrcollins Nov 18 '17 at 4:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.