Gradients on the background of sections on V2?

[aap]

Hi
I used to love how easy it was to apply a CSS gradient to the background of a whole section, however that seems to be compltely gone now. How can I give one section the gradient generated by;

background: rgba(3,223,252,1);
background: -moz-linear-gradient(left, rgba(3,223,252,1) 0%, rgba(79,234,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(3,223,252,1)), color-stop(100%, rgba(79,234,255,1)));
background: -webkit-linear-gradient(left, rgba(3,223,252,1) 0%, rgba(79,234,255,1) 100%);
background: -o-linear-gradient(left, rgba(3,223,252,1) 0%, rgba(79,234,255,1) 100%);
background: -ms-linear-gradient(left, rgba(3,223,252,1) 0%, rgba(79,234,255,1) 100%);
background: linear-gradient(to right, rgba(3,223,252,1) 0%, rgba(79,234,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03dffc', endColorstr='#4feaff', GradientType=1 )

Thanks

[nico]

Hi @flashfog,

Thanks for writing in.

You can directly add the CSS in your section style field or you can add a class to the section then add the CSS in your custom CSS.

Please share us your URL so we could check why it is not working.

Thanks.

[aap]

Hi
I thought V2 sections do not have a style field?

For reference: i found I could elicit the gradient but pasting it directly as you would an RGB value directly on the color picker.

Going the custom CSS route discourages experimentation. X lost flexibility here. I hope it comes back.

[JvP]

How about a gradient generator built right into Huebert?

[aap]

@JvP

gradient generator built right into Huebert?

I am not familiar and could not find anything on Huebert. What is it? thanks!

[JvP]

The color picker tool in Cornerstone, header and footer builders is called Heubert.

[aap]

@JvP

Heubert

i just don’t see here anything that invites to create a gradient. Where is it? https://www.screencast.com/t/SENJdFnT

[JvP]

It doesn’t have a gradient option at the moment.

[aap]

@flashfog

pasting it directly as you would an RGB value

ok I will continue with the method of pasting it directly as I would an RGB value

thanks

[ruenel]

Sounds that the issue has been resolved.
If you need anything else we can help you with, don’t hesitate to open another thread.

[JvP]

Hey @RueNel, would a gradient generator be something you guys would consider adding to your colour picker in a future update?

[kory]

@flashfog, just to ensure that your question is fully and properly answered, not all v2 elements have an inline style field as many of them are more complex and multi-dimensional (e.g. the collapsed navigation which features a toggle, off canvas are, navigation, nested links, et cetera), but some of them do, including v2 sections. If you go to the Customize section of your v2 sections, you will find the following:

In the Inline CSS input, you could place your background gradient declarations:

You can likely greatly decrease the number of browser-specific prefixes you’re using as well. Many such as -moz and -o are no longer needed as they are supported using the standardized version, and the filter fallback is really only for very old versions of Internet Explorer, so if you don’t require support for some of these, you can reduce this styling significantly.

All that being said, I would probably abstract your gradient out into a class and place that onto sections as needed. That way, if you ever wish to change this later, you can update it from one place rather than having to go into each section and edit it as needed.

@JvP, we certainly do have a gradient generator included in our notes for Huebert improvements as it’s something we want to get in to be used in conjunction with advanced backgrounds as well, allowing users to overlay more involved gradients over images and video. We don’t have a specific timeline on this at this time, but it’s absolutely something we have plans for when we are able to devote some resources to it (likely down the road after the template manager is in, the remaining v2 elements are mapped, et cetera).

Cheers!

[aap]

This is such a great and complete response. THANKYOU!

[JvP]

Thanks @kory for the detailed response. It’s very cool to hear that a gradient generator will be included in the future.

[kory]

@flashfog, glad to hear that you found it helpful.

@JvP, no problem! Yes, it’s something I’m looking forward to seeing in the builders as it will open up a lot more creative possibilities.

Cheers!