Style fields parameters

Develop, Build & Integrate CMS Development
1

Hello everyone!

I’m currently working on a project that requires me to do style fields and I’m struggling to find the parameters to use on the values on the fields i.e. the color of a font inside {{ module.style.font_field.font }} ( a font style field containing more than just a color). Is there a list or any way to know more of those? I haven’t been able to find it in the documentation.

2

Hi @NicolasBrito,

the default font-field supports only one color since this is in 99.9% the way to go.
Since it sounds like you’re about to create something like a gradient or light-/dark-color mode.
My recommendation for creating custom color stylings is this:

  • don’t use the font field at all or disable all options besides the font-family(if this is a thing for you)
  • add number fields to create different font sizes
  • add color fields to provide light-/dark- colors
  • add gradient-field or make your own out of some color&number fields inside a repeater-group
  • write your own CSS

Examples:

A font-field with only the font-family select option

{
				"name": "headlines",
				"label": "Headlines",
				"required": false,
				"locked": false,
				"inline_help_text": "",
				"help_text": "",
				"load_external_fonts": true,
				"type": "font",
				"visibility": {
					"hidden_subfields": {
						"size": true,
						"color": true,
						"underline": true
					},
					"controlling_field": "fonts.font_source",
					"controlling_value_regex": "google",
					"operator": "EQUAL"
				},
				"default": {
					"size": 12,
					"font": "Lato",
					"font_set": "GOOGLE"
				}
			},

The corresponding CSS:

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
 font-family: {{ theme.fonts.headlines }};
}

Custom gradient JSON:

{
		"name": "custom_gradient",
		"label": "Custom gradient",
		"required": false,
		"locked": false,
		"children": [
			{
				"name": "angle",
				"label": "Angle",
				"required": false,
				"locked": false,
				"display": "slider",
				"suffix": "°",
				"step": 1,
				"type": "number",
				"min": 0,
				"max": 360,
				"inline_help_text": "",
				"help_text": "",
				"default": 45
			},
			{
				"name": "color_1",
				"label": "Color 1",
				"required": false,
				"locked": false,
				"inline_help_text": "",
				"help_text": "",
				"type": "color",
				"default": {
					"color": "#ffffff",
					"opacity": 100
				}
			},
			{
				"name": "color_1_position",
				"label": "Color 1 position",
				"required": false,
				"locked": false,
				"display": "slider",
				"suffix": "%",
				"step": 1,
				"type": "number",
				"min": 0,
				"max": 100,
				"inline_help_text": "",
				"help_text": "",
				"default": 0
			},
			{
				"name": "color_2",
				"label": "Color 2",
				"required": false,
				"locked": false,
				"inline_help_text": "",
				"help_text": "",
				"type": "color",
				"default": {
					"color": "#ffffff",
					"opacity": 100
				}
			},
			{
				"name": "color_2_position",
				"label": "Color 2 position",
				"required": false,
				"locked": false,
				"display": "slider",
				"suffix": "%",
				"step": 1,
				"type": "number",
				"min": 0,
				"max": 100,
				"inline_help_text": "",
				"help_text": "",
				"default": 100
			}
		],
		"type": "group",
		"inline_help_text": "",
		"help_text": "",
		"default": {}
	}

Custom gradient macro(seperate file; can be used on every element; not just text):

{# linear gradient #}
{%- macro linear_gradient(angle, color_1, position_1, color_2, position_2) -%}
 background: {{ color_1 }};
 background: -moz-linear-gradient({{angle}}, {{color_1}} {{position_1}}%, {{color_2}} {{position_2}}%);
 background: -webkit-linear-gradient({{angle}}, {{color_1}} {{position_1}}%, {{color_2}} {{position_2}}%);
 background: linear-gradient({{angle}}, {{color_1}} {{position_1}}%, {{color_2}} {{position_2}}%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="{{color_1}}",endColorstr="{{color_2}}",GradientType=1); 
{%- endmacro -%}​

CSS:

{% include "./PATH-TO-THE-MACRO-FILE.css" %}
...

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
 {{ linear_gradient(theme.custom_gradient.angle, theme.custom_gradient.color_1.css, theme.custom_gradient.color_1_position%, theme.custom_gradient.color_1.css, theme.custom_gradient.color_1_position%)}}
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.gradient-bg{ {# just an example how to use the gradient for backgrounds #}
{{ linear_gradient(theme.custom_gradient.angle, theme.custom_gradient.color_1.css, theme.custom_gradient.color_1_position%, theme.custom_gradient.color_1.css, theme.custom_gradient.color_1_position%)}}
}
{# change "theme.custom_gradient" to the path where you're putting the group into #}

For light-/dark- colors:

Simply add two(or the desired amount of colors) into your fields and write the code like this:

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6,
.dark .h1,.dark .h2,.dark .h3,.dark .h4,.dark .h5,.dark .h6{
 font-family: {{ theme.fonts.headlines }};
 color: {{ theme.fonts.dark_color.css }};{# PATH-TO-THE-DARK-COLOR #}
}

.light h1,.light h2,.light h3,.light h4,.light h5,.light h6,
.light .h1,.light .h2,.light .h3,.light .h4,.light .h5,.light .h6{
 font-family: {{ theme.fonts.headlines }};
 color: {{ theme.fonts.light_color.css }}; {# PATH-TO-THE-LIGHT-COLOR #}
}

best,

Anton

3

Actually more than a solution I was asking for a documentation where I can see all the available attributes for style fields

4

HEy @NicolasBrito,

gotcha.
Here’s the style fields doc and the one for the color field

best,

Anton