Skip to main content
MindTouch Success Center

Change the background color of your MindTouch TCS site (TCS)

This page applies to:MindTouch TCS

Overview

Explains how to modify the background color, background image or background gradient for your MindTouch site through the use of CSS.

Basic intro to CSS

CSS stands for Cascading Style Sheets and is used to modify the look & feel of HTML.  CSS is most commonly used to change things like colors and fonts but it can be used to drastically change the layout of a site.  The examples we provide are focused more on simple CSS modifications.

To learn more about CSS please checkout a full tutorial

Adding CSS in the Control Panel

You can add CSS to all articles in MindTouch through the Control Panel.  In order to access the Control Panel you will need to be an administrator for you MindTouch Help Center.  If you are an administrator you will see the Control Panel link under the Tools menu.  Click the Control Panel link and use the following instructions:

  1. In the left navigation of the Control Panel click Custom Site CSS
  2. Past your CSS into the textarea titled All Role CSS
    • You can find CSS examples in the next steps of this tutorial
  3. Click Save Changes
  4. Check to see if the background color has changed
    • You may need to do a Hard Refresh to load your new CSS.  In most browsers this can be accomplished by pushing Ctrl and F5 at the same time. 

CSS to change the background color to black

body {
    background-color: #000;
}
body#topic {
    background:#fff;
}

The second Selector in the CSS changes the background color of the Editor to white (#fff).  You can use ColorPicker.com to easily get hex colors.

CSS to add a background image 

body {
    background-image: url(http://pattern8.com/images/pattern-thumbs/pattern8-pattern-15c.png);
}
body#topic {
    background:#fff;
}

The second Selector in the CSS changes the background color of the Editor to white (#fff).

CSS to add a gradient background

body {
    background: -moz-linear-gradient(top, rgba(228,239,192,1) 0%, rgba(171,189,115,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,239,192,1)), color-stop(100%,rgba(171,189,115,1)));
}
body#topic {
    background:#fff;
}

The second Selector in the CSS changes the background color of the Editor to white (#fff).

CSS gradients are not supported by all browsers and may require different Styles to apply for certain browsers.  You can use Gradient Generator at ColorZilla to easily generate CSS gradients. 

  • Was this article helpful?