Custom CSS is one of the fastest ways to customize your MindTouch site. Now with the inclusion of LESS, custom CSS is even easier.
To follow coding standards, separate the styling from your structural content as much as possible. To enable content managers to apply site-side styles without having to place code onto every page, the MindTouch control panel has a Custom CSS field.
How to place site-wide CSS code
To change your Custom Site CSS, you need to be signed in as an admin on your site.
From the MindTouch toolbar, select Site tools > Control panel > Branding > Custom Site CSS.
To apply CSS to the entire site or for all of one type of page, one type of user, one browser, make sure to enter the CSS in the All Roles CSS field.
Add custom CSS by user role
There are six different CSS sections that conditionally load CSS based on the user who is viewing the page. If you have CSS that you only want to apply to anonymous users, community members, pro-members, or admins, enter CSS directly in the appropriate field. Put all other global CSS in the All Roles CSS field.
Place code in the Admin CSS section to verify the effects of your code and test style changes before placing them into the All Roles CSS section. This allows pro members to test the code without affecting the rest of the viewing community.
- All Roles CSS - Overrides the CSS for all user types. CSS or LESS entered into the All Roles CSS section display to every user no matter the type.
- Anonymous CSS - Overrides the CSS for users that aren't logged in to MindTouch and are anonymously navigating the site.
- Community Member CSS - Overrides the CSS for users that are logged in as community members.
- Pro Member CSS - Overrides the CSS for users that are logged in as pro members. CSS entered into the Pro Member CSS section will display to all pro members except admins.
- Admin CSS - Overrides the CSS for users that are logged in as admins. Only admins can see this CSS entered in this section (does not include Pro Member CSS!)
- Legacy Browser CSS - Enables your site to be branded for legacy browsers.
CSS and LESS
LESS is a CSS preprocessing language that extends the default functionality found in CSS. The LESS syntax is identical to CSS, which means that regular CSS will work as before. Because LESS files are processed before being served to a web browser as valid CSS, additional functionality can be used in the CSS code such as variables, mixins, ruleset nesting, and functions.
LESS allows you to use variables and do things such as change all of the colors on your site by just changing one variable. LESS CSS also allows you to nest statements together, reuse code, and more such as nesting all media queries within one selector instead of repeating it for every adjustment that needs to be made per screensize. Select the following for a list of LESS variables to target sitewide.
CSS and LESS validation on Save - To avoid compilation errors with the LESS preprocessor, all CSS or LESS code submitted in the control panel is validated before being saved. This means that you will never have to worry about invalid CSS or LESS disabling the styles applied to your site.
LESS example - An example of how easy it is to update the look of your site with LESS is by changing the
@higlight-color variable. By adding the following LESS variable to the custom CSS section of your choice, you can change the base color of your site from blue to orange.
- Highlight variable