[rogeriosnarliParticipant]

Hi

I am trying to figure out how to place an ad 10px outside the wrapping of the page, and to stick to top on scroll.

Theme Renew; example 1 (http://theme.co/x/demo/renew/1/)
load example: https://www.dropbox.com/s/rw0joqm3pb11ddo/Skjermbilde%202016-02-04%2019.48.17.png?dl=0
scroll example: https://www.dropbox.com/s/zx6s4r7fmtp7dfy/Skjermbilde%202016-02-04%2019.47.19.png?dl=0

Please help –
Regards, Rogerio

[RadModerator]

Hi there,

Thanks for writing in.

That’s possible with this simple CSS,

.ads_placeholder {

position: fixed;
left: 10px;
top: 10%;

}

Then simply add your ads within the ads_placeholder and add it to your site’s content.

<div class="ads_placeholder"></div>

Depending on placement and ads size, you will have to enhance this basic CSS. And since we don’t have the idea of what ads size and positioning, I can’t provide a more accurate recommendation.

Would you mind providing your site’s URL that has this?

Thanks.

[rogeriosnarliParticipant]

Thanks for quick answer.

Yes, I guess that was the easy part.
But what Im really trying to figure out – is where to put the code. What file..?

http://www.snarli.no/

[JadeModerator]

Hi Rogerio,

You can simply place the code in Appearance > Customize > Custom > CSS.

Hope this helps.

[rogeriosnarliParticipant]

Hey there,

Not quite. I want to have the banner stick to the 5px outside the page wrapper on the right. and to follow on window resize.
Auto hide on pad/mobile would also be a nice feature. responsive

Custom CSS field is nice. but whede do I put the div with banners?

[FriechModerator]

Hi Rogerio,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

Then copy the code below and paste on your child theme’s functions.php file.

function ad_skyscraper() { ?>

  <div class="ads_placeholder">PLACE YOUR ADS HERE</div>

<?php }

add_action( 'x_after_site_begin', 'ad_skyscraper' );

Replace the PLACE YOUR ADS HERE with the actual ads code.

After that you can add this under Custom > CSS in the Customizer.

.ads_placeholder {
	position: fixed;
	background-color: rgba(255,255,255,.75);
    top: 35%;
    right: 20px;
    width: 130px;
    min-height: 400px;
}

/*hide ads on mobile*/
@media (max-width:  979px) {
	.ads_placeholder {display: none;}
}

Hope it helps, Cheers!

[Author]

Posts