[Resolved] How to add gradient background to a section in GeneratePress?

[Marco]

Hello all!

I am building a page with many sections (using the Sections plugin) and I’m trying to change the background for some of them to a gradient background, but I want to do it with CSS, not with an image.

For this, I am using the gradient CSS code provided by uiGradients.com:

background: #FF512F;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F09819, #FF512F);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F09819, #FF512F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

I would like to know how do I put this code with Simple CSS to make it work.
Also, I imagine I have to set a Custom ID or Class for the specific sections I want to see changed, right?

Thanks in advance for any help. GeneratePress has the most helpful community I have ever seen.

[Leo]

Hi there,

Try adding a custom ID to that section, like gradient-background, then this CSS should work:

Then this should target the element: #gradient-background.generate-sections-container

Let me know 🙂

[Marco]

That worked perfectly Leo! Thank you very much!

But I noticed that I had to “Update post” to see the new gradient background. If I pressed “Preview Changes” nothing would happened.

So, I would like to leave my suggestion for Tom to include in the Simple CSS plugin the possibility of making code changes reflect when I simply press the Preview Changes Button.

Thank you again and have a nice day!

[Leo]

Sections will getting a make over soon.

I’ll make sure to mention it 🙂

[Leon]

I was searching the same thing and found this post. Thank you Marco and Leo. I achieved what I wanted with your instruction.

Thank GP.
Leon

[Leo]

Glad you found it helpful 🙂

[Author]

Posts