I'm trying to extend the customization of a theme (site and group) by adding new options.
Found out that the LESS function "-evo-themeconfig-unit" does not return the value specified in the Group Theme Options, but takes the value from the Site Theme Options. Although other functions behave correctly, like "-evo-themeconfig-string", "-evo-themeconfig-color".
The code is simplified for demo purposes. The community manager, using the Site / Group options, can change the color and font size for the widget titles.
Theme Studio => Site => Style Sheets => custom.less
@title-color: -evo-themeconfig-color('titleColor', '#000000'); @title-font-size: -evo-themeconfig-unit('titleFontSize', 14px); // set header div.content-fragment-header { color: @title-color !important; font-size: @title-font-size !important; }
Theme Studio => Site => Configuration
<propertyGroup id="customOptions" labelText='Custom Options'> <property id="titleColor" labelText="Title Color" defaultValue="#000000" dataType="Color" /> <property id="titleFontSize" labelText="Title Font Size" defaultValue="14px" dataType="Unit" /> </propertyGroup>
Theme Studio => Group => Configuration
<propertyGroup id="customOptions" labelText='Custom Options'> <property id="titleColor" labelText="Title Color" defaultValue="#000000" dataType="Color" /> <property id="titleFontSize" labelText="Title Font Size" defaultValue="14px" dataType="Unit" /> </propertyGroup>
Site Theme Options
- Title Color: #FF0000
- Title Font Size: 18px
Group Theme Options (group name: "Test Group")
- Title Color: #00FF00
- Title Font Size: 24px
After setting these values, the headings of the widgets in the "Test Group" have the following styles:
div.content-fragment-header { color: #00FF00 !important; // correct value, inherited from group theme font-size: 18px !important; // invalid value, inherited from site theme }