Skip to main content
MindTouch Success Center

Add CSS

The following encapsulates everything you might need to know about adding CSS (CSS3) and LESS CSS to your MindTouch environment (Professionals Only).

CSS for Entire Site 

Note to user   NOTE:  To access or modify the custom site css, you need to be signed in as an admin on your site. If you do not possess an admin account, contact the appropriate resource that does.

  • CSS that needs to be applied to entire site or for all of one type of page, one type of user, one browser, etc should be done in the "Site Tools" > "Control Panel" > "Branding" > "Custom Site CSS" > "All Roles CSS".
  • The Custom Site CSS supports regular CSS but also LESS should you find yourself more proficient in it and decide you want to write more efficient code.
    • 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. Refer to the following for a list of LESS variables to target sitewide.
  • If you have CSS that you only want to apply to anonymous users, community members, pro-members, or admins, apply CSS directly to the individual block within the "Custom Site CSS" page. Put all other global CSS in the "All Roles CSS" section.

CSS for Individual Page

Note to user   NOTE:  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 placing 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, excess 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 be 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 and best practices

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 in the Custom Site CSS


/* ===== 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 ===== */
...

Note to user   NOTE:  For more information on the Custom Site CSS and the various blocks with which to place code, refer to the following: 'Custom Site CSS'

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 {
        ...
    }
}

Note to user   NOTE:  "&" is a placeholder for the parent selector in nested LESS statements. To learn more about LESS, refer to: 'LESS style sheet language'

  • 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;
}

Note to user   NOTE:  For more information about any branding recommendations, contact your Customer Success Manager.

  • Was this article helpful?