Jump to content

Changing banner txt Colour on one page only - York template

Recommended Posts

I am trying to change the banner copy to black on one page only but I can't seem to get it to work. It will affect everything site wide. I've tried a lot of things that seem to work for others but aren't working for me so I don't know what the solution is. I can't seem to find a block ID for the banner copy and collection ID's don't seem to be working.

 

This works but is changing all pages: 

.collection-type-page.show-page-banner.banner-text-alignment-center .page-text-wrapper .page-title {
  color: #000000 !important;
}

If I put it in the header code injection of the page (pages > click gear icon > advanced) it will work perfectly within the builder but as soon as I preview the site in the browser it stops working completely. Sooo frustrating!!!

 

This does not work:

#collection-5f1ffbd0d7d2395c497533c7 {

.collection-type-page.show-page-banner.banner-text-alignment-center .page-text-wrapper .page-title {
  color: #000000 !important;
}

}

 

Link to comment
  • Replies 8
  • Views 371
  • Created
  • Last Reply

I've tried to do this and its not working ... maybe I'm just inputting the wrong code. What code would you write for banner height, incorporating the #collection id? Ive been using ...

 

.collection-type-album.show-album-banner.full-bleed-banner .page-banner-wrapper, .collection-type-blog.view-list.show-blog-banner.full-bleed-banner .page-banner-wrapper, .collection-type-events.view-list.show-events-banner.full-bleed-banner .page-banner-wrapper, .collection-type-gallery.show-gallery-banner.full-bleed-banner .page-banner-wrapper, .collection-type-page.show-page-banner.full-bleed-banner .page-banner-wrapper, .collection-type-products.view-list.show-products-banner.full-bleed-banner .page-banner-wrapper, .homepage.show-homepage-banner:not(.collection-type-index):not(.collection-type-project).full-bleed-banner .page-banner-wrapper {
  height: 60vh !important;
}
 

which works perfectly ... but as soon as I add the collection into it (below) then it stops working. Any ideas?

 

#collection-5f1ffbd0d7d2395c497533c7 { .collection-type-album.show-album-banner.full-bleed-banner .page-banner-wrapper, .collection-type-blog.view-list.show-blog-banner.full-bleed-banner .page-banner-wrapper, .collection-type-events.view-list.show-events-banner.full-bleed-banner .page-banner-wrapper, .collection-type-gallery.show-gallery-banner.full-bleed-banner .page-banner-wrapper, .collection-type-page.show-page-banner.full-bleed-banner .page-banner-wrapper, .collection-type-products.view-list.show-products-banner.full-bleed-banner .page-banner-wrapper, .homepage.show-homepage-banner:not(.collection-type-index):not(.collection-type-project).full-bleed-banner .page-banner-wrapper {
  height: 60vh !important;
}
}

 

Btw I just copied this code out of the inspect element so some of it may be unnecessary 🙂

Link to comment

You can edit page > Add Code Block > Add this code

<style>
  .collection-type-album.show-album-banner.full-bleed-banner .page-banner-wrapper, .collection-type-blog.view-list.show-blog-banner.full-bleed-banner .page-banner-wrapper, .collection-type-events.view-list.show-events-banner.full-bleed-banner .page-banner-wrapper, .collection-type-gallery.show-gallery-banner.full-bleed-banner .page-banner-wrapper, .collection-type-page.show-page-banner.full-bleed-banner .page-banner-wrapper, .collection-type-products.view-list.show-products-banner.full-bleed-banner .page-banner-wrapper, .homepage.show-homepage-banner:not(.collection-type-index):not(.collection-type-project).full-bleed-banner .page-banner-wrapper {
  height: 60vh !important;
}
</style>

 

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

Archived

This topic is now archived and is 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.