Five: remove/hide banner on one page only

I would like to remove the banner image across the top of my Gallery page without removing or distorting the banner images on other pages. I understand you can do this, as there are numerous articles in the support community with custom CSS code to make it work. But, I've looked into the options given and I am unable to make it work. The terms 'modulePage' and others to find the page ID do not turn up results when viewing source.Are there alternatives? Or is there something I'm missing.

I’d also like to know.

Hide Banner

#collection-1234567890abcde #banner-area-wrapper { display: none }

You get the collection number from the Developer Tools (right click > Inspect Element in Google Chrome or Safari, or Firefox). Or you can find the number if you go to the page you want the number for, and click on the 'Manage Site' gear icon, then look in the URL – the last string of numbers after the = is the collection number. It will look something like:

your-domain.squarespace.com/config/#collectionId=513d922be4b00efcff59acdf

How do i get rid of the banner in a template such as Shift? I have been trying and trying and trying without success! I need help. I do not have the technical know-how to code it in.

Please, in layman’s terms, where do I inject the code? Plain and simple, as simple as you can provide. Please let mw know what code and where to copy and paste it, exactly where.

@masters I am trying to achieve this (hiding the header from blog posts) on my site (www.unbroken.com.au) I would like to keep the thumbnail and remove the header from the page. Can you offer any insight? P.S. I am currently not displaying a banner or a thumbnail as they look awful

Add this to the Page Header Code Injection:

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

I tried this on the shift template in designer and the banner remains. So frustrated that what should work is not. Any ideas?

What's your site, and what are you looking to do exactly?

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.

Hi, is there a code that can achieve this in the Shift template? I can't seem to find this anywhere.

I have the same issue with Shift...hopefully someone out there knows