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

Change header background color, specifically on blog posts


GrahamGraphite

Question

Hello. On my site, I have my header navigation background set to transparent on all of my pages, I have a blue background behind my headers so the navigation logo and nav items just overlay the blue background. For example, see here https://www.graphitefinancial.com/blog  or https://www.graphitefinancial.com/

However, for my blog posts I cannot add a blue background behind the header with the theme I'm using. See here: https://www.graphitefinancial.com/blog/title-growth-at-all-cost-strategies-arent-working-for-startups-heres-what-is-and-always-has.

 

So my logo doesn't show since it is white.

Is there a way for me to set just the blog posts to have a specific background. I DO NOT WANT TO CHANGE THE HEADER NAV BACKGROUND COLOR ON ANY OTHER PAGE BUT A BLOG POST.

Thanks :) 

Link to comment

24 answers to this question

Recommended Posts

  • 0

Add to Home > Design > Custom CSS

.collection-type-blog.view-item header.Header.Header--bottom {
    background: blue;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
20 minutes ago, LuckyDave said:

Im having the exact same issue - and and the above solution from @tuanphan didn't work for me. 

Im also using version 7.1  if that helps. 

SS 7.1 blog use different class, not 

.collection-type-blog

Can you share link to blog post on your site?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 12/19/2019 at 6:58 PM, LuckyDave said:

Im having the exact same issue - and and the above solution from @tuanphan didn't work for me. 

Im also using version 7.1  if that helps. 

Use

.collection-type-blog-basic.view-item

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
15 hours ago, LuckyDave said:

.collection-type-blog-basic.view-item header.Header.Header--bottom {
    background: blue;
}

Is that correct? it doesn't seem to work for me. Sorry to bother you with this and thank you for your help

.collection-type-blog-basic.view-item header#header {
    background: blue;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
13 minutes ago, LuckyDave said:

Thanks @tuanphan but Its not working for me. Is there any settings i need to adjust perhaps?

Try this

.collection-type-blog-basic-grid.view-item .header-announcement-bar-wrapper {
    background: red !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
18 hours ago, sun_ said:

I'm trying to do the same thing on my main page for the header text over the banner. The above code didn't work. 

Create a question with link to your site.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

I have this same desire as @GrahamGraphite
We are on 7.1 and all of the above suggested codes don't work.

I added a section on the blog main page 
https://teal-aqua-rfm9.squarespace.com/blog 
which allows me to set the preferred color palate for the transparent header.

Unfortunately, on an individual blog post page, we are not able to affect the header background color to match the main blog page without changing the entire blogpost color palate.
https://teal-aqua-rfm9.squarespace.com/blog/daniela-beltran-mexico-film-producer
Our nav "disappears" as does part of our logo.

I'd like to be able to make the individual blogpost headers match the Dark 2 color palate which we are using on the blog landing page.

Screen Shot 2021-10-14 at 6.52.44 PM.png

Screen Shot 2021-10-14 at 6.54.15 PM.png

Edited by stephan
Link to comment
  • 0
On 10/15/2021 at 6:48 AM, stephan said:

I have this same desire as @GrahamGraphite
We are on 7.1 and all of the above suggested codes don't work.

I added a section on the blog main page 
https://teal-aqua-rfm9.squarespace.com/blog 
which allows me to set the preferred color palate for the transparent header.

Unfortunately, on an individual blog post page, we are not able to affect the header background color to match the main blog page without changing the entire blogpost color palate.
https://teal-aqua-rfm9.squarespace.com/blog/daniela-beltran-mexico-film-producer
Our nav "disappears" as does part of our logo.

I'd like to be able to make the individual blogpost headers match the Dark 2 color palate which we are using on the blog landing page.

Screen Shot 2021-10-14 at 6.52.44 PM.png

Screen Shot 2021-10-14 at 6.54.15 PM.png

Same color for all individual posts or different?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 2/3/2022 at 12:16 AM, JonnyIlsley said:

Does anyone have an update on how to do this? Got the exact same question.

 

I am looking to change the colour of the header, site title and navigation on all blog posts.

 

Thanks,
Jon

Can you share link to a blog post? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 2/15/2022 at 2:10 AM, Gabius said:

I'm having this same question. 

I want the header of the individual blog posts to be a non-white color. Here's a blog post: https://www.toplawcoach.com/advice/top-law-coach-school-profile-georgetown-law-school

I'm using 7.1

Add to Design > Custom CSS

body[class*="collection-type-blog"].view-item header#header {
    background-color: #f1f !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hello, thanks for posting this information below. It's not working for me on Version 7.0– Brine family (The Maple Inn template). Do you know if there's anything else I can try, please?

Issue: I have a white logo which is not appearing on a white background. I'd like to change the logo to another one or use a plain black background.

Many thanks in advance.🙏

Link to comment
  • 0
3 hours ago, DotcomMarket said:

Hello, thanks for posting this information below. It's not working for me on Version 7.0– Brine family (The Maple Inn template). Do you know if there's anything else I can try, please?

Issue: I have a white logo which is not appearing on a white background. I'd like to change the logo to another one or use a plain black background.

Many thanks in advance.🙏

Can you share link to page where you have problem?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 2/19/2022 at 2:46 AM, tuanphan said:

Add to Design > Custom CSS

body[class*="collection-type-blog"].view-item header#header {
    background-color: #f1f !important;
}

 

Omg THANK YOU! I've been trying to figure out how to fix this issue for months.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...