Changing header background colour in Blog

Site URL: https://www.likemindedproductions.co.uk/podcast/archive

Hi,

Having some issues adding a colour to the background header of my blog post pages. The blog page is fine (https://www.likemindedproductions.co.uk/podcast/archive) but when you go to a post: (https://www.likemindedproductions.co.uk/podcast/archive/season2/grief-holiblobs-clown-episode-10) there is no background.

Any help greatly appreciated.

All the best,

Andrew

On 4/6/2021 at 10:45 PM, smithandrew1993 said:

Site URL: https://www.likemindedproductions.co.uk/podcast/archive

Hi,

Having some issues adding a colour to the background header of my blog post pages. The blog page is fine (https://www.likemindedproductions.co.uk/podcast/archive) but when you go to a post: (https://www.likemindedproductions.co.uk/podcast/archive/season2/grief-holiblobs-clown-episode-10) there is no background.

Any help greatly appreciated.

All the best,

Andrew

try

.view-item.collection-type-blog .Header {
  background: #5a306c;
  padding-bottom: 40px
}
.view-item.collection-type-blog  .Header-nav .Header-nav-item {
    color: #fff;
}

3 minutes ago, bangank36 said:

try

.view-item.collection-type-blog .Header {
  background: #5a306c;
  padding-bottom: 40px
}
.view-item.collection-type-blog  .Header-nav .Header-nav-item {
    color: #fff;
}

Hi @bangank36

This worked great but I have several blog pages (one for 'news' and one for 'podcast'). Is there a way to just change the 'podcast' blog posts?

@smithandrew1993 add this to Podcast Page Header (Hover on Podcast in Not Lined or Main Navigation > Click Gear icon to open Page Header)

<style>
  .view-item.collection-type-blog .Header {
  background: #5a306c;
  padding-bottom: 40px
}
.view-item.collection-type-blog  .Header-nav .Header-nav-item {
    color: #fff;
}
</style>

12 hours ago, tuanphan said:

@smithandrew1993 add this to Podcast Page Header (Hover on Podcast in Not Lined or Main Navigation > Click Gear icon to open Page Header)

<style>
  .view-item.collection-type-blog .Header {
  background: #5a306c;
  padding-bottom: 40px
}
.view-item.collection-type-blog  .Header-nav .Header-nav-item {
    color: #fff;
}
</style>

 

@tuanphan This is brilliant, thank you! Is there anyway to change the nav so that its like the rest of the website (spotlight)? I've tried using this but it only works when custom css window is open:

.tweak-header-primary-nav-hover-style-spotlight .Header-nav .Header-nav-item {
  color: #ffffffb8 !important;
}
.tweak-header-primary-nav-hover-style-spotlight .Header-nav:hover .Header-nav-item:hover {
  color: #ffffffb8 !important;
}

.tweak-header-primary-nav-hover-style-spotlight .Header-nav:hover .Header-nav-item {    
  color: #ffffff5c !important;
}

On 4/16/2021 at 2:23 AM, smithandrew1993 said:

@tuanphan This is brilliant, thank you! Is there anyway to change the nav so that its like the rest of the website (spotlight)? I've tried using this but it only works when custom css window is open:

.tweak-header-primary-nav-hover-style-spotlight .Header-nav .Header-nav-item {
  color: #ffffffb8 !important;
}
.tweak-header-primary-nav-hover-style-spotlight .Header-nav:hover .Header-nav-item:hover {
  color: #ffffffb8 !important;
}

.tweak-header-primary-nav-hover-style-spotlight .Header-nav:hover .Header-nav-item {    
  color: #ffffff5c !important;
}

 

change this to rgb or rgba color: rgba(255,255,255,0.72)

#ffffffb8

(color code with 8 letters won't work)

6 hours ago, tuanphan said:

change this to rgb or rgba color: rgba(255,255,255,0.72)

#ffffffb8

(color code with 8 letters won't work)

I've added the hex to rgba but it still doesn't work. It looks as if it would on a light background like the screenshot.

<style>
  .view-item.collection-type-blog .Header {
  background-image: url(https://images.squarespace-cdn.com/content/v1/598723e8a5790a7d30d4eda3/1617999400704-OR0C6NVG78Y0MHHYM9QE/ke17ZwdGBToddI8pDm48kPTrHXgsMrSIMwe6YW3w1AZ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0p52bY8kZn6Mpkp9xtPUVLhvLurswpbKwwoDWqBh58NLxQZMhB36LmtxTXHHtLwR3w/BG.png);
background-repeat: no-repeat;
      background-size: 100% 100%;
    padding-bottom: 40px;
}
.tweak-header-primary-nav-hover-style-spotlight .Header-nav .Header-nav-item {
  color: 255,255,255,0.72 !important;
}
.tweak-header-primary-nav-hover-style-spotlight .Header-nav:hover .Header-nav-item:hover {
  color: 255,255,255,0.72 !important;
}

.tweak-header-primary-nav-hover-style-spotlight .Header-nav:hover .Header-nav-item {    
  color: 255,255,255,0.72 !important;
}
</style>

3 hours ago, smithandrew1993 said:

I've added the hex to rgba but it still doesn't work. It looks as if it would on a light background like the screenshot.

<style>
  .view-item.collection-type-blog .Header {
  background-image: url(https://images.squarespace-cdn.com/content/v1/598723e8a5790a7d30d4eda3/1617999400704-OR0C6NVG78Y0MHHYM9QE/ke17ZwdGBToddI8pDm48kPTrHXgsMrSIMwe6YW3w1AZ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0p52bY8kZn6Mpkp9xtPUVLhvLurswpbKwwoDWqBh58NLxQZMhB36LmtxTXHHtLwR3w/BG.png);
background-repeat: no-repeat;
      background-size: 100% 100%;
    padding-bottom: 40px;
}
.tweak-header-primary-nav-hover-style-spotlight .Header-nav .Header-nav-item {
  color: 255,255,255,0.72 !important;
}
.tweak-header-primary-nav-hover-style-spotlight .Header-nav:hover .Header-nav-item:hover {
  color: 255,255,255,0.72 !important;
}

.tweak-header-primary-nav-hover-style-spotlight .Header-nav:hover .Header-nav-item {    
  color: 255,255,255,0.72 !important;
}
</style>

 

it should be

color: rgba(255,255,255,0.72) !important;

NOT

color: 255,255,255,0.72 !important;