Archived topic
How to add gradient background to a section in GeneratePress?
5 replies · Started by Marco on November 7, 2017
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.
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 :)
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!
Sections will getting a make over soon.
I'll make sure to mention it :)
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
Glad you found it helpful :)
