Header color on blog posts

Site URL: https://cosmolot.foundation/

Hi all,

Please tell me how to change header color for all blog posts (not on the blog navigation page)

example of blog post: https://cosmolot.foundation/research-and-regulation/our-demands

Thanks for your help!
Nikita

Add to Home > design > Custom CSS
.collection-type-blog-basic-grid header#header {
    background: red;
}

1 hour ago, tuanphan said:

Add to Home > design > Custom CSS
.collection-type-blog-basic-grid header#header {
    background: red;
}

    It works, thnx. But it also put background on the blog navigation page. How fix this?

https://cosmolot.foundation/awareness-and-help

Try this

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

It works, thnx. Last question how to manage separate header elements like a navigation, logo etc.
 

.collection-type-blog-basic-grid.view-item header#?

9 hours ago, SJFeNiX said:

It works, thnx. Last question how to manage separate header elements like a navigation, logo etc.
 

.collection-type-blog-basic-grid.view-item header#?

You mean nav color or..?

4 hours ago, tuanphan said:

You mean nav color or..?

Yeap

5 hours ago, SJFeNiX said:

Yeap

.collection-type-blog-basic-grid.view-item nav.header-nav-list * {
    color: red !important;
}

Sorry, realy last one question - object for managment logo: 

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

18 hours ago, SJFeNiX said:

Sorry, realy last one question - object for managment logo: 

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

.collection-type-blog-basic-grid.view-item .header-title-logo img {
    filter: invert(1);
}

Thank you @tuanphan. This solved it for me too.

 @arnomps , @Mountainmint -- saw your posts on this topic and wanted to alert you to this solution.

Hi there @tuanphan I am using the 7.0 version and I wanted to know if I could use the code you suggested below using a specific Hex/RBG color? I saw you wrote "background: red" and i wanted to know if I could be more specific, how to edit the code? Also I'm only interested in fixing the header color 🙂

background: red;

Here is the reference: https://www.streaminggraduate.com/all-article/loading-spotify-podcast-takeover

On 5/27/2020 at 10:53 AM, sarahmikal said:

Hi there @tuanphan I am using the 7.0 version and I wanted to know if I could use the code you suggested below using a specific Hex/RBG color? I saw you wrote "background: red" and i wanted to know if I could be more specific, how to edit the code? Also I'm only interested in fixing the header color 🙂

background: red;

Here is the reference: https://www.streaminggraduate.com/all-article/loading-spotify-podcast-takeover

 

you can use

background: red;

background: #ff0000;

background: rgb(0,0,0)

background: rgba(0,0,0,0.7)

@tuanphan for 7.1, this totally worked to change the color of a transparent fixed nav when scrolling but not when the nav is at the top of the page. Would you know how to over-ride the nav background transparency and replace with a color when at the top of ONLY blog posts and not also the blog display page? I have actually used your answers from other questions as well, thank you so much for being such a great source of info! 

@tuanphan I actually just fixed this because of your replies! Thanks again for being so helpful!

On 10/19/2020 at 4:22 PM, hdrinks said:

@tuanphan for 7.1, this totally worked to change the color of a transparent fixed nav when scrolling but not when the nav is at the top of the page. Would you know how to over-ride the nav background transparency and replace with a color when at the top of ONLY blog posts and not also the blog display page? I have actually used your answers from other questions as well, thank you so much for being such a great source of info! 

Hey @hdrinks @tuanphan

How did you manage to solve this for 7.1? I'm looking to do the same thing. Nav at just the top of screen and only on blog posts. Thanks so much! 

On 2/20/2022 at 12:58 AM, JuniperDewdrop said:

Hey @hdrinks @tuanphan

How did you manage to solve this for 7.1? I'm looking to do the same thing. Nav at just the top of screen and only on blog posts. Thanks so much! 

To change header color on blog posts only, add this to Design > custom CSS

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