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.