CSS specific to a stack is contained in the /stack/<stack-type>/less
directory:
<extension-name> : the root folder of your extension ext.json stack/ <stack-type>/ stack.json less/ stack.less stack-variables.less
A style file for a stack is always named stack.less
and any variables referenced in this style file are contained in a companion file called stack-variables.less
. An example of a stack.less
file is shown below:
.tabbedContainer { .nav-tabs { span { text-align: @tabTitleAlignment; } } .nav-tabs > li > a { background-color: @tabBackgroundColor; color: @tabTextColor; } .nav-tabs > li.active > a { background-color: @activeTabBackgroundColor; color: @activeTabTextColor; } }
A supporting stack-variables.less
file for this example would look similar to the following:
@activeTabBackgroundColor:#195D8E; @activeTabTextColor:#FFFFFF; @tabBackgroundColor:#d1d1d1; @tabTextColor:#3d3d3d; @tabTitleAlignment:center;
The stack.less
file, like a widget.less
file, can define a stack’s styles using the Less language or native CSS. Less files across the entire storefront are compiled to make one CSS file.
Similar to widgets, it is important that any style overridden within a stack Less file only applies to that stack, and does not change the style across the storefront. One way to achieve this is to format the stack’s styles using the Less nested format. For more details on this approach, see Configure a widget’s style.
Note: If you design a custom style as part of an extension, the Less style may not be compiled immediately after uploading the extension package. If this happens, open the stack’s style in the code editor (on the Design page) and make a superficial edit, then resave. This process forces compilation of the style.