Jump to content

Five: Remove banner image on individual pages.

Go to solution Solved by jgennick,

Recommended Posts

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
Link to comment
  • Replies 30
  • Views 68k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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
Link to comment
  • 1 year 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
  • 7 months later...

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.

Link to comment
  • 2 months later...
  • 3 weeks later...

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

Link to comment
  • 3 months later...
  • 2 weeks later...

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 :)

Link to comment
  • 5 months later...
  • 1 month later...

@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

Link to comment

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

Link to comment
  • 10 months later...
  • 4 months later...
  • 1 year later...
  • 1 month later...
  • 3 months later...
2 hours ago, divar said:

Hi ! I am looking to hide banner image on one specific page on mobile only. Can anyone suggest how to achieve that? This is the page whose banner image i need to hide on mobile.

If you share link to your site, we can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.