How to change Header Background Color only on Blog 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

Does anyone have any ideas for this ^^^ ?

Hey @tuanphan could you please help with this? 

On 2/18/2022 at 9:10 AM, JuniperDewdrop said:

Hey @tuanphan could you please help with this? 

It looks like you solved it?

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! 

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;
}

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? 

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

11 hours ago, tuanphan said:

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

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? 

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

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

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;
}

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

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;
}

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  

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.

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!

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?

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?

 

You can use this CSS code

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