Jump to content

Five: remove/hide banner on one page only

Recommended Posts

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.

Link to comment
  • 2 months later...
  • Replies 10
  • Created
  • Last Reply
  • 3 weeks later...

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

Source: Remove banner on all pages except homepage?
Link to comment
  • 1 year later...

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.

Link to comment
  • 3 months later...
  • 4 months later...
  • 1 month later...
  • 3 weeks later...

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.

Link to comment
  • 11 months later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.