Theme Fields.json and Module Field
SOLVEHello Guys,
Can someone help me regarding the Theme fields.json and Module fields.
I tried to create a new fields on module e.g image below: I tried to create a new field for Icon to set a color. If I added color on the module fields the code works and color is showing while when tried to edit on the theme settings the result is nothing. I follow the json structure on the fields.json to connect to the module field I created still now working.
Please share me your opinion,
Thanks guys
1 Accepted solution
Theme Fields.json and Module Field
SOLVEHi @Jun22,
The theme fields.json is for "global" styles which will define theme-wide settings. In most cases you'll find those in the theme-overwrite.css BUT sometimes also in some modules.
The fields.json in modules is always module specific and unless it's a global module it will only affect this single instance of a module. So if you want to have the color changed globally it could make sense to put the color option into the theme fields (or simply hard code it into a CSS file).
About your code: Replacing
{{ module.styles.drop_downs.background_profile.color.color }}with
{{ module.styles.drop_downs.background_profile.color.css }}will do it's job.
Or you can write it like this(which provides the exact same result as the code above):
rgba({{ module.styles.drop_downs.background_profile.color.color|convert_rgb }}, {{ module.styles.drop_downs.background_profile.color.opacity/100 }});
And since the icon is in an link element(a-tag) I would check if the link element has an "!important" suffix. (hopefully not)
best,
Anton
Theme Fields.json and Module Field
SOLVEHi @Jun22,
The theme fields.json is for "global" styles which will define theme-wide settings. In most cases you'll find those in the theme-overwrite.css BUT sometimes also in some modules.
The fields.json in modules is always module specific and unless it's a global module it will only affect this single instance of a module. So if you want to have the color changed globally it could make sense to put the color option into the theme fields (or simply hard code it into a CSS file).
About your code: Replacing
{{ module.styles.drop_downs.background_profile.color.color }}with
{{ module.styles.drop_downs.background_profile.color.css }}will do it's job.
Or you can write it like this(which provides the exact same result as the code above):
rgba({{ module.styles.drop_downs.background_profile.color.color|convert_rgb }}, {{ module.styles.drop_downs.background_profile.color.opacity/100 }});
And since the icon is in an link element(a-tag) I would check if the link element has an "!important" suffix. (hopefully not)
best,
Anton
