Configure a stack’s style
CSS specific to a stack is contained in the /stack/<stack-type>/less
directory. The following is an example:
<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.