fields.json: Gradient side_or_corner not working

Developer Support CMS Development
1

Hello,

I defined this in fields.json of a module:

{ "label": "Gradient", "name": "gradient", "type": "gradient", "locked" : false, "default": { "colors": [{ "color": { "r": 182, "g": 6, "b": 0, "a": 1 } }, { "color": { "r": 232, "g": 17, "b": 21, "a": 1 } }], "side_or_corner": { "verticalSide": null, "horizontalSide": "RIGHT" } }

and in my theme-overrides.css is added:

background: theme.header.background.gradient.css

but when i see the preview page, appears this:
background: linear-gradient(<!-- invalid side or corner -->, rgba(99, 99, 99, 1), rgba(232, 17, 21, 1));

}

What is wrong? I tried with the side_or_corner that appears here but the result was the same. I follow the instructions of the post but nothing.
What am i missing? Also, where can i find the documentation/specification about the side_or_corner?

Thank you

2

Hey, @KospeKaspa :waving_hand: I hope you got this resolved. If not, can you try adjusting your `side_or_corner` code a bit? Example:

"side_or_corner": {
 "verticalSide": "BOTTOM",
 "horizontalSide": "RIGHT"
}

Have fun building! — Jaycee

3

Hello, unfortunally it did not work. Still gives:

KospeKaspa_0-1693828144164.png
KospeKaspa_0-1693828144164.png489×178 13.5 KB

Where i can read documentation to solve this problem? Thank you.

4

Just in case, this is how i use the gradient in theme-overrides.css:**

{% set header_bg_gradient = theme.header.background.gradient.css %}

.header { background-color: {{ header_bg_color }}; height: {{theme.header.height}}px; background: {{header_bg_gradient}};}

But i guess this is correct because in the final css code, it appears the correct invocation of the gradient (only the side-or-corner give the error).

5

The side_or_corner did not work in the theme fields.json but it works in the modules fields.json. Also i used the css/theme-overrides.css to implement the gradient.