Gradient in a Module Style Field

[LSeth]

I was wondering if you can use a gradient picker in a module’s style field? I was able to add this to the module’s field.json to add it to the module:

{
“name”: “bg_gradient”,
“label”: “Background gradient”,
“helptext”: “Sets a gradient behind the content”,
“required”: false,
“type”: “gradient”,
“default”: {
“colors”: [{
“color”: {
“r”: 29,
“g”: 114,
“b”: 170,
“a”: 1
}
}, {
“color”: {
“r”: 57,
“g”: 67,
“b”: 151,
“a”: 1
}
}],
“side_or_corner”: {
“verticalSide”: “BOTTOM”,
“horizontalSide”: null
}
}
}

The issue is that the output from Hubl is:

{colors=[{color={r=153, g=1, b=0, a=1}}, {color={r=120, g=63, b=4, a=1}}], side_or_corner={verticalSide=BOTTOM, horizontalSide=null}, css=linear-gradient(to bottom, rgba(153, 1, 0, 1), rgba(120, 63, 4, 1))}

I was wondering how this can be used in the css to give a background the gradient styles? Thanks.

[natsumimori]

Hi @LSeth , thank you for your post.

I wanted to tag in our top contributors here- @Indra and @Oezcan , would you be able to share your advice for Seth?

[Indra]

Hi @LSeth,

This is possible.

So your json file is:

{
 "name": "bg_gradient",
 "label": "Background gradient",
 "helptext": "Sets a gradient behind the content",
 "required": false,
 "type": "gradient",
 "default": {
 "colors": [
 {
 "color": {
 "r": 29,
 "g": 114,
 "b": 170,
 "a": 1
 }
 },
 {
 "color": {
 "r": 57,
 "g": 67,
 "b": 151,
 "a": 1
 }
 }
 ],
 "side_or_corner": {
 "verticalSide": "BOTTOM",
 "horizontalSide": null
 }
 }
}

To use the element from the fields.json inside your custom theme, you can get the values with this hubl:

{{ theme.[your_fields] }}

For all field options, I recommend checking out the documentation about Module and Theme Field Types. There is a code example for gradient at Generated CSS.

It’s good to look at the HubSpot CMS Boilerplate how a theme is setup.

In your case, it you have a CSS file, you can output your code something like this:

.gradient{
 {% if theme.gradient_bg.css %}
 background: {{ theme.gradient_bg.css }};
 {% endif %}
}

[system]

Hi @LSeth ,
I not sure about this way but I have alternative way to add gradient color option in module
You can create two color fields in module and use it in inline css where you want to give gradient color.
like this -
style=“background: linear-gradient(to bottom, {{color.color1}} 0%, {{color.color2}} 100%)”

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

[system]

@LSeth , Or You can try this also:
please use this code to create engagment with PHP : public function createActivityhubspot()
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => ‘https://api.hubapi.com/engagements/v1/engagements’,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => ‘’,
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => ‘POST’,
CURLOPT_POSTFIELDS =>‘{
“engagement”: {
“active”: true,
“ownerId”: 1,
“type”: “CALL”,
“timestamp”:’.$time.’
},
“associations”: {
“contactIds”: [
“‘.$contacteID.’”
]
},
“attachments”: [
{
“id”: 0
}
],
“metadata”:{
“toNumber”:‘.$tophone.’,
“fromNumber”:‘.$fromphone.’,
“durationMilliseconds”: ‘.$CallDurationa.’,
“title” : “Call Test”,
“body” : “Testing twillo”,
“disposition” : “‘.$despoID.’”,
“recordingUrl”:“‘.$RecordingUrl.’”
}
}',
CURLOPT_HTTPHEADER => array(
‘Content-Type: application/json’,
'authorization: Bearer '.$token
),
));
$response = curl_exec($curl);
} Make sure need to use your variables and choose type what ever you want as i was creating call engament so i choose type call. Screenshot by Lightshot screenshot attached , API Doc : https://legacydocs.hubspot.com/docs/methods/engagements/create_engagement

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

[Oezcan]

Hey @natsumimori, thanks for linking
And Hello @LSeth,
I hope you could solve your last matter, I would be happy if you would give feedback on it.
Back to the current matter.
As @Indra said, this is possible.

Perhaps, you have already noticed these two points on this [point](http://Perhaps,%20you have already noticed these two points on this point: Gradient fields are supported in modules. Gradient fields can only be used as style fields.):

and perhaps this point in [this documentation](http://Just%20like this point in this documentation):

To use it in the style field, use the code suggested here in the top lines of your module.

{% require_css %}
<style>
{% scope_css %}
 .your-class {
 {% if module.styles.gradient.css %}
 background: {{ module.styles.gradient.css }};
 {% endif %}
 }
{% end_scope_css %}
</style>
{% end_require_css %}

In addition to the boilerplate, I would also recommend looking into the new growth theme. There are many of these functions in the Modules at the Design Tools.

Perhaps you can save yourself some work if you first create the style in the modules in design tools and copy the json so that you can use it locally.

Last but not least, here are a few more inspirations. Feel free and maybe use more than two colors in your json/module

Best regards and have some fun with gradients
Özcan