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

Changing banner txt Colour on one page only - York template


101_kimmy

Question

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 post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 0

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 post
  • 0

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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...