[hdarteagaParticipant]

Hello again,

I wanted to see if its possible to add a banner so that it shows on top of the Blog Page and all Blog Posts.
My website is: http://signaturesound.com/blog/

I’ve also attached an image as reference. Also, if possible it would be good to add proper spacing for the banner between the “BLOG” title and the Title of the “Post”

Let me know if you need anymore info! Thanks!

I’m currently up to date with wordpress and the your theme.

[RupokMember]

Hi there,

Thanks for writing in!

1. You can add this under Custom > JavaScript in the Customizer.

(function($) {
   var html = '<img class="blog-banner" src="http://signaturesound.com/wp-content/uploads/2015/05/Learn-Compression.png">';
  $( html ).appendTo('.blog .h-landmark');
})(jQuery);

Let’s change the image URL with your own uploaded image URL.

2. To control styling, postion etc. you can add this under Custom > CSS in the Customizer.

.blog-banner {
  margin: 30px auto 0;
  max-width: 100%;
}

Hope this helps.

Cheers!

[hdarteagaParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please try to update the CSS code to this:

.blog-banner {
  margin: 30px 0 0;
  max-width: 100%;
}

Hope this helps.

[hdarteagaParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

Sorry for the confusion. Please update the javascript above to this:

(function($) {
    var html = '<img class="blog-banner" src="http://signaturesound.com/wp-content/uploads/2015/09/PSLBANNER.png">'; 
  $( html ).appendTo('.blog .x-header-landmark');

})(jQuery);

Hope this helps.

[hdarteagaParticipant]

Great thank you works great! But how about on all blog posts not just the blog homepage?

[ZeshanMember]

Hi there,

In that case, the JS code provided would become:

(function($) {
    var html = '<img class="blog-banner" src="http://signaturesound.com/wp-content/uploads/2015/09/PSLBANNER.png">'; 
  $( html ).appendTo('.single-post .x-header-landmark');

})(jQuery);

Thanks!

[NightFoxParticipant]

Hi, this is not working for us?

[Paul RModerator]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thanks

[Author]

Posts