Gradient on blog posts and categories

[wolfproductions]

Hi there, how do I add a gradient to blog posts and categories please? I which to add the following:

.gradient-bg {
background-color:hsla(274,46%,28%,0.7);
background-image:
radial-gradient(at 41% 36%, hsla(184,52%,53%,1) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(184,51%,53%,1) 0px, transparent 50%);

On a page I would add this via the custom class: gradient-bg

But I cannot see this option in the settings for the background of the blog, thanks for your help!

[prakash_s]

Hello @wolfproductions,

Thanks for writing to us.

It is not possible to guide without an exact page URL, I would suggest you please share the exact page URL and screenshot where you want to add the gradient so that we can check it and guide you properly.

Thanks

[wolfproductions]

Hi Prakash, I wish to add the gradient backgrounds to all blog posts and categories BUT NOT the whole site, so for example this is a category page: https://domainf10b55.stackstaging.com/category/latest-blogs/

[prakash_s]

Hello @wolfproductions,

Please add this selector to render the gradient backgrounds on the category archive page.

body.archive.category {
background-color: hsla(274, 46%, 28%, 0.7);
background-image: radial-gradient(at 41% 36%, hsla(184, 52%, 53%, 1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(184, 51%, 53%, 1) 0px, transparent 50%);
}

For the blog page, please add this custom CSS code to the global CSS.

body.blog {
background-color: hsla(274, 46%, 28%, 0.7);
background-image: radial-gradient(at 41% 36%, hsla(184, 52%, 53%, 1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(184, 51%, 53%, 1) 0px, transparent 50%);

}

You need to go to the Cornerstone—>Theme options —>Custom code —>Global CSS.

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[wolfproductions]

@prakash_s

body.blog {
background-color: hsla(274, 46%, 28%, 0.7);
background-image: radial-gradient(at 41% 36%, hsla(184, 52%, 53%, 1) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(184, 51%, 53%, 1) 0px, transparent 50%);

}

Thanks, I have added the code to the global CSS and it has made no difference. What do you mean by: Please add this selector to render the gradient backgrounds on the category archive page.

Thanks

[prakash_s]

Hello @wolfproductions,

I was suggesting the correct CSS selector and with your code for the category page. Please add the given above code to global CSS. I have tested it on your site and it working fine on my end. The output will be like this.

Please share your correct blog page URL so we can check it on our end.

Thanks