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

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


john_mtthws

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
Link to comment
  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

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.

Link to comment
  • 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.

Link to comment
  • 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>



Link to comment
  • 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?

Link to comment
  • 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).

Link to comment
  • 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?

Link to comment
  • 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!

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

×
×
  • Create New...