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.
- 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.
- 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.
- Add them with specificity to the .less override in the design editor, and add the variable color.
- Test out changes on the customer's site.
- 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;
}