Skip to main content
MindTouch Success Center

Start branding your site (MT4)

Written by Damien Howley
Former MindTouch Employee at MindTouch
This page applies to:MindTouch 4


This article demonstrates how to get started modifying your content CSS as part of your MindTouch Branding.  We will focus on typical content CSS such as Headers, Hyperlinks, font-styles and more. This article will most commonly be used by Designers and Site Administrators.
 

Objective

After reading this article you should have a thorough understanding of what Content CSS is and how you can modify it in preparation for launch.  The examples below can be copied/pasted into your MindTouch Control Panel > Custom Site CSS to get started.  

What is Content CSS?

content_css

In MindTouch terminology, content is part of the interface that can be edited with the WYSIWYG editor.  The remainder of the application is considered the application.  Even though the content can be completely customized, it's best practice to try to keep you content consistently styled.  This includes things like headers, text, links, bulleted lists and more.

Even though MindTouch ships with a set of professional content CSS to get you started, it is quite common to alter the content CSS to compliment your company brand and colors.  As an administrator, you can add your own custom CSS in Control Panel > Custom Site CSS.  

Please keep in mind that CSS can take some time to learn.  If you're just getting started with CSS you can take a look at the w3schools tutorial.

How do I pick my own colors?

The examples below use CSS to modify the look & feel of your page content.  CSS is very flexible but it can be confusing for new users.  One thing to keep in mind is that CSS uses hexadecimal color codes which look like this:  #EFEFEF.  For instance:

  • #FFFFFF - white
  • #000000 - black
  • #FF0000 - red

To find your own hexadecimal codes for your custom CSS take a quick look at colorpicker.com.  

How do I change the style of the title?

/* PAGE TITLE CSS */
#title {
    color:#C9960A;
    text-transform:uppercase;
    font-size:24px;
}

How do I change the style of the headers (H1, H2, etc) ?

/* CSS FOR ALL THE HEADERS */
#pageText h2 {
   color: yellow
}
#pageText h3 {
   color: orange
}
#pageText h4{
   color: blue
}


/* INDIVIDUAL HEADER CSS */
h2 { font-size:22px; border-bottom:2px solid #ccc;}
h3 { font-size:20px; border-bottom:1px dotted #efefef;}
h4 { font-size:18px; color:#000; }
h5 { font-size:16px; color:#333; }
h6 { font-size:14px; color:#999; }

How do I change the style of the hyperlinks?

/* HYPERLINK CSS */
#pageText a {
    color:#048EC9;
    text-decoration:underline;
}

/* HYPERLINK HOVER CSS */
#pageText a:hover {
    color:#fff;
    background-color:#048EC9;
    border-radius:3px;
    text-decoration:none;
}

How do I change the style of the paragraphs?

/* PARAGRAPH CSS */
#pageText p {
    color:#999;
    line-height:1.8;
    font-size:13px;
}

How do I change the style of the tables?

/* TABLE CSS */
#pageText table {
    border:2px solid #000;
}
/* TABLE HEADER CELL CSS */
#pageText table th {
    background-color:#000;
    color:#fff;
    text-align:center;
}
/* TABLE CELL CSS */
#pageText table td {
    vertical-align:top;
    padding:3px;
}
/* TABLE ODD ROW CELL CSS */
#pageText table tr:nth-child(odd)  {
    background-color:#fff;
}
/* TABLE EVEN ROW CELL CSS */
#pageText table tr:nth-child(even)  {
    background-color:#efefef;
}

How do I change the style of the images?

/* IMAGE CSS */
#pageText img.internal {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding:5px;
    border:solid;
    border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
    border-width: 1px 2px 2px 1px;
    background-color:white;
    border-radius:5px;
    -webkit-box-shadow: 0 8px 6px -6px #999;
    -moz-box-shadow: 0 8px 6px -6px #999;
     box-shadow: 0 8px 6px -6px #999;
     max-width:700px !important;
}
  • Was this article helpful?