Skip to main content

LESS Styling for SmartCMS sites

Updated

You need to sign into the website as a Super User via the Integration Settings Page rather then the editor link in order for the Design Editor to show.

 

Here is a video covering this.

Link

 

  1. Appearance tab colors should be turned on for all the color fields: Primary, Secondary, Optional third, Text, Background, Header, Footer. Do this by adding those styles to the Design Editor>.Less tab and applying the .Less variable. See "Common .less style rules" below.
  2. View styles style sheet - and copy the styles that are controlling main elements on the site. Search for the 3 main hex colors used for the primary, secondary and Optional Third colors.
  3. Add them with specificity to the .less override in the design editor, and add the variable color. 
  4. Test out changes on the customer's site. 
  5. Final step: Add the following in the Site Settings>Header/Footer Header section just before the </style> tag.

 

/* Hide Appearance Tab Warning */
  cms #cm-cms-theme-tab[currenttheme="Import"] #mk-appearance-warning {
    display:none;
  }

 

Notes: 

--layout_styles.css is the liveedit file that resides in the file manager. It has some colors that need to be added to .less.

--Inline styles should be removed.

--Things that were imported are generic colors.

Common .less style rules:

 

.cmsbackground {
    background-color: @CMSBackground;
}
.header {
   background-color: @CMSColor7
  }
.footer {
   background-color: @CMSColor8
}
.panel-primary .panel-heading {
    background-color:  @CMSColor1;
    border-color:  @CMSColor1;
}
.panel-secondary .panel-heading {
    background-color:  @CMSColor2;
    border-color:  @CMSColor2;
}
.panel-optional .panel-heading {
    background-color:  @CMSColor3;
    border-color:  @CMSColor3;
}
.panel-title {
  color: @CMSColor5;
}