Blog post: other background color for different category

Hey Theodor,
Thank you for your patience and for the link to your site.
As I understand your site layout for this section the first row will always be green, the second red, and the third is blue, for this please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#av_section_1 .avia-content-slider .slide-content .slide-entry-title,
.avia-button-wrap.avia-builder-el-6 > .avia-button {
	background-color: #c8d094 !important;
}
#av_section_2 .avia-content-slider .slide-content .slide-entry-title,
.avia-button-wrap.avia-builder-el-10 > .avia-button {
	background-color: #d09c94 !important;
}
#av_section_3 .avia-content-slider .slide-content .slide-entry-title,
.avia-button-wrap.avia-builder-el-14 > .avia-button {
	background-color: #a9c3cc !important;
}

Please see the screenshot in the Private Content area that displays this. So this would work as is, but I would recommend adding a custom ID to each of the 3 sections so if you should edit the page in the future the solution will continue to work.
The custom IDs would need to be added to the css to replace the default IDs of #av_section_X.
If you would like a hand with this step please include an admin login in the Private Content area, or if you are able to add the custom IDs we can rewrite the above css without logging in.

Best regards,
Mike

Hi,
Thanks for the feedback, and thanks for the login, perhaps a better solution would be to add a custom class to each of the blog elements on the homepage and duplicate this class on the corresponding blog elements on your other pages, this would replace the section ID of the css.

So every blog element with the custom class “red” would show the blog entries in red no matter what page they are on. Please give this a try, if you like I can demonstrate this with one blog element on your homepage and the corresponding “other” page.

Best regards,
Mike

Hi,
First I disabled the previous css, and then on the homepage I added the custom class “red” to the second blog element:

Then I added this css to your Quick CSS:

.avia-content-slider.red .slide-content .slide-entry-title {
	background-color: #d09c94 !important;
}

so for the homepage this is the result:

now if we go to the /zeeland-heden-en-verleden/ page and add the same custom class “red” to the blog element the posts will also show the same:

So now that the css was added once every blog element with the custom class “red” will show this way anywhere on your site, you can now do this with other colors by using a different custom class and create a different css snippet.

Best regards,
Mike