Custom CSS is one of the fastest ways to customize your MindTouch site. Now with the inclusion of Less, custom CSS has gotten even easier.
Why use CSS?
To follow best practice 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, MindTouch offers a custom CSS section in the control panel.
How to place site-wide CSS code
- From the MindTouch toolbar, select Site tools > Control panel.
- In the Branding section, click the Custom Site CSS link.
- Place your code in one of the appropriate CSS sections.
- Click Save.
Custom header and footer templates will not load in mobile-sized views. And so custom CSS headers and footers are also not rendered.
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. Click the links below to learn how you can leverage the various sections to display CSS to only certain users.
- ► 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.
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 the rest of the viewing community.
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.
CSS and Less validation on Save
To avoid compilation errors with the Less preprocessor, all CSS/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.
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.
Check out our documentation on branding with Less to learn about all the new ways you can customize your CSS.
For additional information about optimizing the performance of your custom CSS, read our best practice on custom CSS overrides.