Skip to main content
MindTouch Success Center

Custom site CSS

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 toolsControl panelBranding > Custom Site CSS.

cp-custom-site-css.png

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 exampleAn 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

    @highlight-color: #faa319;

  • Before

    Image of the MindTouch default base colors

  • After

    Image of a MindTouch custom base color

How to place page-level CSS code

CSS on individual pages only supports CSS3, not LESS CSS. If you try to use page variables from the control panel or nested blocked on the individual page level, they will not work.

Beyond functionality advantages, there are other benefits to placeing most of your code in the control panel:

  1. Only admins can access the code so it's more secure.
  2. Code entered in the Custom Site CSS gets minified, so any code entered there will get compressed, punctuation removed, spacing, tabs, and new lines removed.

Having your code minified allows it to be efficiently packed to as small of a source file as possible so every page load on your site is as fast as possible. If you load the same amount of code on each page, not only will it troublesome to manage, but the site load will be significantly higher for the browser to start drawing the elements you created.

If you want to manipulate the user interface on just one page, edit the page, insert a CSS block and enter it directly on the page. If you only need to load that CSS on that one page then you shouldn't add that extra load time on every other page on the site.

Individual Special pages may not be editable to add CSS directly, but on every special page is a class injected in the body that lists the special page you are on. If you need to style something uniquely on a special page such as "/Special:Search", insert the class ".columbia-special-search" before your desired selector and when placing it in the control panel it will only target that selector on the Search special page. Refer to Body classes for a full list.

Ordering and rendering

Styles are injected in your code in a certain order based on where you place them to override the previous styles accordingly and avoid as many !importants as possible.

Order of CSS compiled (remembering that things placed later will replace styles mentioned on layers below):

  1. Base styles of internet browser (ex. Chrome, Firefox, Edge, etc)
  2. Default MindTouch styling
  3. CSS applied on individual pages
  4. CSS applied to Control Panel

CSS recommendations

Do not apply CSS to templates such as header, footer, or content header. Add the proper Body Class to make it only target pages that are rendered and include a comment in your All Roles CSS field to describe where the code applies.

Example CSS hierarchy


/* ===== FONTS ===== */
@default-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@primary-font-color: #000;
@heading-color: @primary-font-color;
...

/* ===== COLORS ===== */
@highlight-color: #30b3f6;
...

/* ===== BASE STYLES ===== */
body {
    
}
...

/* ===== HOME PAGE ===== */
-Should you decide you want to store it in here and not on the individual page

/* ===== HEADER ===== */
...

/* ===== CONTENT HEADER ===== */
-Should you decide you even want one of these


/* ===== CONTENT SIDETRAY ===== */
-Should you decide you even want one of these

/* ===== BODY ===== */
...

/* ===== CONTENT FOOTER ===== */
-Should you decide you even want one of these

/* ===== FOOTER ===== */
...

Preferred hex code format

  • Lowercase (#fff, #b54c92, not #FFF).
  • Reduce to three characters wherever possible (#fff, not #ffffff).
  • Colors written as hex codes (#fff not "white").

Preferred spacing format

  • Use spaces instead of tabs (tabbing does not work when inputting new data directly into the Control Panel).
    • 4 spaces = tab
  • All newly written code should be measured in em, rem, and %s not px or pt.
  • Font-sizes should be done in percents.
  • All value of 0, should just be written as 0, not as 0px, 0em, etc (ex. padding: 1.2em 0 0 .5em)
  • All backgrounds, fonts, paddings, and margins should be combined and reduced wherever possible (ex. padding-left: 1em;, padding-right 1em;, andpadding-top 1.2em; should be combined to padding: 1.2em 1em 0;).

Preferred CSS setup

  • Write and edit your code in a code editing tool and then moving it into the control panel. There is no way to back up or undo stuff changes in the control panel so use another tool to regularly back up your code for change control and to help troubleshoot issues.
  • All CSS written on an individual page should not be included in multiple CSS blocks spread out on the page, but should all be included together in one CSS block at either the top or bottom of the page.

Nesting technique

  • When nesting articles (using LESS) in the Control panel, try not to nest past two levels. More than two levels may make more compressed code but it is much harder to find code by selector (with Control/Command + F) or just navigating through.
  • Don't nest together items just because they use the same selector. If a snibbet applies to just the content header, do not combine with code that should belong on the homepage or regular header section just because they both could be applied from the same base selector.
  • All selectors including the pseudo element ":hover" should also include the body class ".no-touch" to include functionality for the no-touch hover effect for mobile users (for example,.elm-header div:hover should be .no-touch .elm-header div:hover). It is needed to be combined with other body classes (for example,.elm-user-pro-member div:hover should be .no-touch.elm-user-pro-member div:hover).
  • Nested hovers should be written as:

    .elm-header {
    .no-touch & div:hover {
    ...
    }
    }


    & is a placeholder for the parent selector in nested LESS statements

  • When nesting both subselectors and media queries under one parent selector, clearly separate them. First enter all of the attributes for the parent selector, then enter all subselectors and attributes next, then follow with media queries.

.header-holder {
    /* Parent selector attributes first */
    margin: 0 auto 1.5em;
    text-align: center;
    width: 100%;
    /* All subselectors next */
    h4 {
        margin-top: .5em;
    }
    span {
        background-color: #fff;
        display: inline-block;
        font-size: 85%;
        font-weight: 600;
        margin: 5px 0;
        padding: 0 30px;
        text-transform: uppercase;
    }
    .line-spacer {
        background-color: #9a9a9a;
        height: 1px;
        margin-top: -1.5em;
        width: 100%;
    }
    /* All media queries afterwards (all grouped together) */
    @media (min-width: 50em) {
        width: 83.3%;
    }
    @media (min-width: 65.25em) {
        width: 66%;
    }
    @media (min-width: 80em) {
        width: 58%;
    }
}

Alphabetize the start of every attribute per class

  • Wrong

    dd.mt-listing-detailed-subpages {
    font-size: 90%;
    margin-top: .7em;
    color: #666;
    background: none;
    border: none;
    }

  • Correct

    dd.mt-listing-detailed-subpages {
    background: none;
    border: none;
    color: #666;
    font-size: 90%;
    margin-top: .7em;
    }

For more information about any branding recommendations, contact your Customer Success Manager.

  • Was this article helpful?