Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
john_mtthws

Five: Does anyone have CSS to override the homepage header size?

Question

I am using a FIVE template but I would like to be able to have variable header sizes by the page. I am currently using the page thumbnail as the header, I would like the home page to be a large header but take the other pages down to like 50% of the home page banner size. PLEASE HELP!

Edited by danieljs

Share this post


Link to post

21 answers to this question

Recommended Posts

  • 3

@john_mtthws adding this snippet of code to the custom CSS Editor found within Style Editor will let you select the default banner area size for all pages with the Style Editor, but override it only for the homepage. Just adjust the padding top and bottom to the value you like best.


.homepage #banner-area {
 padding-top: 192px;
 padding-bottom: 192px;
}


Template Developer at Squarespace, @esquareda on Twitter.

Share this post


Link to post
  • 4

Sure, you can do it a couple ways. You can specify on a page-per-page basis by adding this to your(s) 'Page Settings' > 'Advanced' > 'Page Header Code Injection'


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

But if you want the same sized banner for all pages except the homepage, I would probably do it this way instead -- go to the 'Style Editor' and set the 'Banner Area Height' to the height you want for the rest of your pages, and then go to the homepage and go 'Page Settings' > 'Advanced' > 'Page Header Code Injection' and add this custom CSS:


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

Using this technique, you will have consistent banners for all pages (and newly created pages) and a custom one for just the homepage.

Share this post


Link to post
  • 1

@Toe Try adding this CSS to your custom CSS section:


#collection-52017e88e4b0e6816c1cd75a #hero .page-image { min-height: 200px; }

That will change the height of your banner image on the 'Contact Us' page (not sure if that's the one you're wanting to alter but I used it to figure it out).

If its for a different page, and you don't know how to get the collection ID, just post back, or alternatively, you can apply this to a single page by going to the 'Page Settings' > 'Advanced' > 'Page Header Code Injection' and pasting this (including style tags)


<style>
    #hero .page-image { min-height: 200px; }
</style>



Share this post


Link to post
  • 0

@Toe if you can post a link to your site, I can probably give you the CSS -- first, though, check in the 'Style Editor' -- sometimes those options are there. If not, and you can post a link, I should be able to give you the CSS.

Share this post


Link to post
  • 0

@Kale CleoThreads.com. I can edit the universal banner size via the Style Editor, however I'm trying to make an exception with one particular 'collection' or page so its banner height is significantly smaller.

Share this post


Link to post
  • 0

@Kale Thank you! This worked perfectly.

I'm not sure what the '#hero' is? I'm not too familiar with CSS but I've made minor edits to pages with collection ID's.

Also, why wouldn't { height: } work? What's the 'min-height' offer?

Share this post


Link to post
  • 0

The #hero is just the name of the element that whoever designed the template chose. A hero image is a common print / design term for the top main image on a page (I believe). This could have been named #banner or #banner-wrapper or something but they chose hero (which is why the original code didn't work).

I believe the min-height offers the ability to grow beyond the value set. In other words, something with min-height says "I must be 'this' high, but I can be taller if space allows" -- vs -- height, which is a more definite value (not positive on this, though).

Share this post


Link to post
  • 0

@Kale, do you know if this is the same for the Adirondack template? I tried some of the code above in css and in the settings -> advanced with no luck on setting a different banner image height for different pages.

Edited by physicswoman

Share this post


Link to post
  • 0

@kale thank you for your help! I had to add a bit of code to make it work..

.main-image-wrapper { height: 200px; } .main-image-wrapper .main-image { height: 200px; }

However this does not work for mobile. Setting the height of these images appears to resize the images beyond the device width. Any suggestions for how to deal with mobile?

Share this post


Link to post
  • 0

kale,you seem to have all the answers for this!!! could you help me with the same thing on a store page in Horizon? I want to make the header (or banner image as it is called in this template) padding only 150 pixels for this one page and leave it as 300px for all the others. I have tried pretty much all the ccs from this feed to no result. help plz!

Share this post


Link to post
  • 0

Could someone advise on how to adjust the positioning of the text overlayed on the banner for a specific page only - in combo with the shorter banner height?

banner height adjustment is working using above code

Share this post


Link to post
  • 0

Hi @heirloom, did you ever find an answer to this? I've just looked at your site (nice by the way;) and it looks like you did. Are you able to let me know how you did it? Many thanks!

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...