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
}