Animated background gradients in GeneratePress? Yes you can!

[Roberto Enrique]

I really love animated gradients for background

I mean, like the ones you can see in websites like:

https://verily.com/

I’d like to share an approach to achieve that effect using what’s already available in GeneratePress and just an extra plugin: Simple Custom CSS by John Regan, and Danny Van Kooten

You can see the results here:

http://detech.artomultiplo.net/
I wrote a tutorial with some code snippets over there

and you can also find the source of the main effect here: http://codepen.io/quasimondo/pen/lDdrF

[Tom]

That is AWESOME. I might just use something like that in our footer here 😉

Thanks for the tutorial!

Also, I made my own CSS plugin which may be worth checking out: https://wordpress.org/plugins/simple-css/

[Roberto Enrique]

Thank you for doing and supporting this amazing theme.
Have a great day.

[Tom]

Thanks for using it! 🙂

[Roberto Enrique]

As this will be a production site the new link is this: http://detech.it/tutrorial-bg/

[Tom]

Love it!

One suggestion – add the initial <div id="gradient"> into the “Before Header” hook – wp_head is meant for styles and meta data, so adding HTML will work, but isn’t technically valid.

Let me know if that causes any issues 🙂

[Roberto Enrique]

Thanks for the tip.

[Tom]

Thanks for the tutorial! I’ll be using it on our footer soon 🙂

[Derek Binion]

that’s mesmerising.

[Jonathan]

I am a little unsure, do I need to use the simple PHP to allow the use of Hooks or do I just check the PHP box when making changes IN hooks?

[Tom]

You can just check the “Execute PHP” checkbox in GP Hooks to execute PHP in the hook – no need for anything else 🙂

[Jonathan]

Wow, thanks for the quick response!! Just to be clear though, I’m following Robertos’ tutorial over at detech.it/tutrorial-bg/… Should I check the PHP box for all the changed fields?

[Tom]

I’m not seeing any PHP in the tutorial so you shouldn’t need to check that box at all 🙂

[Jonathan]

Dude, you rock!! Thanks so much, for the theme, the add-ons, and your quick replies. It’s still a work in progress but it is so much better than it was just 2 days ago. General Press is so ridiculously easy to use!! Going to put this in the Showcase thread when it’s done, but here’s whats done now… http://brand420.com/

[Jonathan]

Thanks Roberto for the awesome tutorial, I’ve never even seen this background before your mention of it. I love it!!!!!

[Author]

Posts