Jump to content

How to change Header Background Color only on Blog Posts?

Recommended Posts

Site URL: http://juniperdewdrop.com

Hey Squarespace Friends!

I've got  bit of an issue I'm running into and cant't think of a solution without coding. I have my header set to transparent, that way I can add beautiful pictures as my first section to occupy the header background area. Unfortunately, blog posts don't let you add sections for some reason, and since my logo and main navigation is white you can't see those elements on blog posts. Please see:

www.juniperdewdrop.com/blog

and

https://www.juniperdewdrop.com/blog/what-is-remote-energy-healing

password: penguin  

Is there a way to change the header background color, but only on blog posts, and not the main blog page? Or would there be a way to add a picture as the header background, but only on blog posts? 

Thanks so much guys!
Mike

Link to comment
7 hours ago, tuanphan said:

It looks like you solved it?

Hey @tuanphan unfortunately, no. I changed the global header settings to have a semi transparent blue background, which sort of fixes the issue on blog posts, but interferes with the rest of the website.

Is there a way to have a solid header background color only on blog posts, and keep the header transparent on the other pages of the website?

Thanks so much! 

Link to comment
On 2/21/2022 at 11:59 PM, JuniperDewdrop said:

Hey @tuanphan unfortunately, no. I changed the global header settings to have a semi transparent blue background, which sort of fixes the issue on blog posts, but interferes with the rest of the website.

Is there a way to have a solid header background color only on blog posts, and keep the header transparent on the other pages of the website?

Thanks so much! 

To set headaer solid color on blog posts only, add this to Design > Custom CSS

body[class*="collection-type-blog"].view-item header#header {
    background-image: linear-gradient(#0e68ed,rgba(14,104,237,0)) !important;
}

 

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
5 hours ago, tuanphan said:

To set headaer solid color on blog posts only, add this to Design > Custom CSS

body[class*="collection-type-blog"].view-item header#header {
    background-image: linear-gradient(#0e68ed,rgba(14,104,237,0)) !important;
}

 

@tuanphan You did it again, you're a css genius!! That looks really beautiful and solves the problem. 

To take it one step further, would it be possible to assign different colors to blog categories? 

Link to comment
On 2/23/2022 at 11:24 PM, JuniperDewdrop said:

@tuanphan You did it again, you're a css genius!! That looks really beautiful and solves the problem. 

To take it one step further, would it be possible to assign different colors to blog categories? 

You mean category page, like this? https://www.juniperdewdrop.com/blog?category=Energy+Healing

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
On 2/28/2022 at 12:21 AM, JuniperDewdrop said:

Yes! So right now I only have the <Energy Healing> category, but I plan to add <Meditation> <Health & Wellness> <Energy Exercises> <Nutrition> categories here shortly. 

Is there a way to make blog post header colors for each category different? 

This will require JavaScript + CSS code. If you use a Business Plan or higher, let me know, we will give the code

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
  • 2 months later...
On 5/30/2022 at 8:24 AM, Ferocity said:

Hey @tuanphan I am also having the issue with my navigation not displaying since it is set to transparent and in white (over a white blog post background). Is there a code fix to show the navigation on this page to have a color behind it on this page: https://ferocity.co/blog/defining-your-brands-target-audience

Add to Design > Custom CSS

body[class*="type-blog"].view-item .Header-inner.Header-inner--bottom {
    background-color: #f1f !Important;
    padding-bottom: 20px;
    padding-top: 20px;
}

 

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
15 hours ago, tuanphan said:

Add to Design > Custom CSS

body[class*="type-blog"].view-item .Header-inner.Header-inner--bottom {
    background-color: #f1f !Important;
    padding-bottom: 20px;
    padding-top: 20px;
}

 

@tuanphan Thank you for your help! It is close to being perfect : )!

It looks good on the mobile version but the desktop version is having some issues with how the navigation buttons and their dropdown menus are displaying (the menu words/buttons look like they have something on top of them and the button dropdowns are only showing as white boxes).

Let me know if you have ideas on how to fix the desktop display issues.

https://ferocity.co/blog/defining-your-brands-target-audience

Link to comment
13 hours ago, Ferocity said:

@tuanphan Thank you for your help! It is close to being perfect : )!

It looks good on the mobile version but the desktop version is having some issues with how the navigation buttons and their dropdown menus are displaying (the menu words/buttons look like they have something on top of them and the button dropdowns are only showing as white boxes).

Let me know if you have ideas on how to fix the desktop display issues.

https://ferocity.co/blog/defining-your-brands-target-audience

Add this CSS under

body[class*="type-blog"].view-item a.Header-nav-folder-item {
    color: #c31214;
}

 

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
  • 3 months later...

Hello, hoping someone can help me with the same issue. I use 7.0 for one nonprofit and 7.1 for another nonprofit. I am not a coder, just a volunteer helping out. 

They like how the blog articles in 7.1 have a photo in the header on this site:

https://www.anglicandoma.org/messenger-articles/always-forward

But I am reading over and over again that it is impossible to do that in articles in posts in 7.1.

Their website uses an additional section to add the photo to their headers on the other pages, for example:

https://www.somausa.org/history

Is there absolutely no way possible to do this in 7.1 blog articles?

Thank you!

Heidi  

Edited by HMR
Link to comment
17 hours ago, HMR said:

Hello, hoping someone can help me with the same issue. I use 7.0 for one nonprofit and 7.1 for another nonprofit. I am not a coder, just a volunteer helping out. 

They like how the blog articles in 7.1 have a photo in the header on this site:

https://www.anglicandoma.org/messenger-articles/always-forward

But I am reading over and over again that it is impossible to do that in articles in posts in 7.1.

Their website uses an additional section to add the photo to their headers on the other pages, for example:

https://www.somausa.org/history

Is there absolutely no way possible to do this in 7.1 blog articles?

Thank you!

Heidi  

Do you still need help? I see a similar thread on Facebook & someone answered this.

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
  • 1 year later...
On 2/23/2022 at 6:11 AM, tuanphan said:

To set headaer solid color on blog posts only, add this to Design > Custom CSS

body[class*="collection-type-blog"].view-item header#header {
    background-image: linear-gradient(#0e68ed,rgba(14,104,237,0)) !important;
}

 

Gorgeous! Problem solved!

Link to comment
  • 1 month later...
On 5/3/2024 at 12:51 AM, Eimear said:

I'm looking to change the background colour to #705548 of the header on all video collection detail pages for this site:
https://www.seaforestfilms.ie/films/v/deirdre-jamie

@tuanphan is that something you can help with?

 

Screenshot 2024-05-02 at 18.51.06.png

You can use this CSS code

body.collection-63bc2e759fd5ff76d56adbfb header#header {
    background-color: #705548 !important;
}

 

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

Create an account or sign in to comment

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

×
×
  • 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.