Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
licnyguy

Five: Changing banner height on different pages

Question

Hello,I am trying to find the correct CSS code to add to a given page to adjust the banner height on my site which uses the template, Five. In the default template, the banner height is universal across all pages, so my goal is to have the banner taller on the homepage and shorter on all other pages. Any help with this adjustment would be greatly appreciated. Thanks very much!Regards,LICNYGUY

Edited by danieljs

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 1

I was able to do this.

  1. Find the collection number of the page where you want the banner image to be different. You can do this by using the Developer Tools (right click > Inspect Element) in Chrome or Safari or using Firebug.
  2. Then in the Custom CSS Editor paste this:

#collection-5514f7b4e4b00e32840e1ed4 #banner-area-wrapper { height: 100px }

You can change the height to whatever height you need.

Edited by TreyT

Share this post


Link to post
  • 1

Hey Tony! Thanks a lot for the assist. Just to double check, could you take a look at the screen shot below to see if I have the collection# and CSS correct? Thanks again! J-alt text

Share this post


Link to post
  • 1

I am trying to adjust the banners on different pages of my site to be different heights as well, but I’m using the Adirondack template. Is it possible that this same code should work on another template? I ask, because I’m trying and it’s not working.

Or, is it likely that #banner-area-wrapper is called something totally different on Adirondack?

Also, that code gets injected in the CSS box for the whole site, not on an individual page’s “page header code injection” box, correct?

I’ve been trying so solve this problem on my site for looong time, and I feel like I’m so close, thank you.

Edited by seangabriel

Share this post


Link to post
  • 3

You can also change this on a per page basis by adding the code (You can change the height in pixels as is needed) in the page settings > Header Code Injection area like so:


<style>
#banner-area-wrapper { height: 100px }
</style> 






Edited by EmBee
changed structure

Share this post


Link to post
  • 0

Hi Guys,

Am I the only one experiencing an issue with the text overlay in the banner on the Five template if I resize the banner (screenshot attached) - The text is completely off center then

Any ideas?

dbscreen.png.707ae904bbcaead553a8ee5e5f93e08a.png

Share this post


Link to post
  • 0

Hi Guys,

Am I the only one experiencing an issue with the text overlay in the banner on the Five template if I resize the banner (screenshot attached) - The text is completely off center then

Any ideas?

dbscreen.png.458152c2bf8e5e99e850bf22ed562433.png

Share this post


Link to post
  • 1

After using the above code (Embee) it keeps my text in the same area but the size was adjusted perfectly. Any idea how to fix?!

Share this post


Link to post
  • 0

Doesn't work for me neither in CSS sheet with the page ID, neither in ADVANCED for an individual page.

It's beyond me why wouldn't Squarespace implement such a basic thing in settings (as well as many other basic design tuning possibilities).. Unfortunately I am tied to this rigid platform.

Share this post


Link to post
  • 0

OK, actually it did work with this code:

collection-58c2f5709de4bbceb9263de1

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper {max-height: 1px;}

However, it only ADDS to the banner, not takes it away. It's still huge and I cannot get it any more narrow than it already was. Besides, it stopped working again on a reload.

Edited by Zetty
Initial Revision

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...