Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Weirden

Five: Remove banner image on individual pages.

Question

I've seen a lot of answers for this online but can't seem to get any of them to work. On some pages I'd like to remove the banner image, but not for all. When I add code like #collection-53210a78e4b0af19e7e35792 #banner-area-wrapper { display: none; } in the Code Injection Header section or directly into the advanced tab in page settings it just ends up displaying in the upper left corner of the page.

Am I putting in the right code and am I putting it in the right place? Other CSS I've used works fine but this one in particular is not cooperating. Thanks!

Edited by TreyT

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 3

I used to use the following for my events page:


<style>
#banner-area-wrapper {display: none}
</style>

In my case, I went to Events Settings, the Advanced tab, and I placed the above code into the Page Header Code Injection field.

I just tested this solution quickly. It still works.

Edited by JonathanGennick

Share this post


Link to post
  • 1

the simple solution does work (it didn't for me), but you need to add !important
I just pasted this into settings>advanced> code injection directly on the blog:


<style>
#banner-area-wrapper {display: none !important}
</style>

now it works and the banner is gone just on the blog.

Share this post


Link to post
  • 0

I'd like to share a solution that will display the banner image if it has been added to the page and hide it if not (this is for the Five template).

First, add the following line of CSS to your Custom CSS:


#page-header #banner-area-wrapper #banner-area {display:none;}

Then, add the following javascript to your Footer Code-Injection:


<script type="text/javascript"><!--
$(window).load(function()  {
 var banner = $('#page-header #banner-area-wrapper #banner-area #page-thumb img');
 if (banner.length) {
     banner.parents('#banner-area').show();
     banner.each(function(img){ImageLoader.load(this);})
   }
});
//--></script>

This assumes you've already included jQuery, of course.

Share this post


Link to post
  • 0

Same issue with my site too (using the Montauk template). Any help would be appreciated. I need the Banner image on my homepage but not on other pages. Here's the sitewww.firstdaycreative.com

Share this post


Link to post
  • 0

HI everyone,

Can someone please tell me how to hide the banners in the Shift template? I have attempted the above codes and it doesn't seem to work. Am I doing something wrong? The solution seems simple, but for some reason I can't get it to work. I"m a total beginner with CSS, so maybe I am missing a step other than simply copying and pasting above into header settings.

Please help :)

Share this post


Link to post
  • 0

@SVA7SVA

I have the SKYE template and you're only allowed to have a thumbnail image that matches your banner. They don't allow a separate banner image. I was wondering if you could set a thumbnail for a specific blogpost that doesn't display as a banner image without affecting the other blogposts where you DO want the thumbnail to display as the banner image. Thanks

Share this post


Link to post
  • 0

Helllo Everyone,

i was very confused to hide the banner image and try to make the code but not successed then i concern with the very professional web developer that helps me as more as i need. Try to contact with them if you have any issues in your website .

Thanks

Share this post


Link to post
  • 0

The following code worked best for me in Custom CSS on the Five Template:


#cart #banner-area-wrapper {display: none}


Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...