Skip to main content

Review sample CSS overrides (TCS)

This page applies to:MindTouch TCS

Overview

This article will review sample CSS overrides that you can use on the base skin within MindTouch.

Details

Before getting started with these examples, review how you can apply the CSS in the control panel

Examples

Change the color of the background

You can change the background color of your MindTouch site by adding the following to your Custom CSS override page in the Control Panel:

body {
background-color: #FFFFFF;
}

The #FFFFFF is where you'd enter the color that you want the background to be.  You can add a Hex code which is the #FFFFFF or you can add a supported name like  red.  

Hiding the My Page link

You can hide links within MindTouch, too by targetting the class that is wrapped around the link.  If I wanted to hide the My Page link that is shown at the top left of the site, you can do so with the following CSS override:

.mypage{
display:none;
}

Hiding the New Page option

While Pro Members can create pages, some administrators may want to remove the "New Page" option so that only Administrators have can create new content. The following CSS override will allow you to hide the "New Page" option based on your needs:

.pagecreate{
display:none;
}

Change color of Page titles

If you want to change the color of the page title to match your own color, you'd add the following to your custom CSS override:

 

.title {
color: #7CFC00;
}

Change the #7CFC00 to match the color that you want the Page titles to be

Change H1 header colors

If you want to change the H1 header colors within the site, you'd add the following to your custom CSS override:

 
h2{
color: #7CFC00;
}

Change the #7CFC00 to match the color that you want the H1s to be.  

Note: That with the headers within a MindTouch page, the CSS callout will be one less then what it shows in the WYSIWYG.  Ex: if you have an h1 in the WYSIWYG, then you will target h2 with your CSS.  This is this way as the Page title is an H1 and the site name is the Title of the page.  

 

Change link colors

If you want to change the color of the links to match your own color, you'd add the following to your custom CSS override:

a{
color: #7CFC00;
}

a:hover {
color: #7CFC00;
}

a:visited {
color: #7CFC00;
}

Change the #7CFC00 to match the color that you want the links to be in.  Note that there are 3 colors for links that you have control over.  

  • a - This is the default color for the link when you view it on a page
  • a:hover - This is the color of the link when you mouse over it
  • a:visited - This is the color the link changes to after you have clicked on it

 

Add An Image Above the Hierarchy

Some users may want to add a small image above the MindTouch hierarchy:

 

To do so, make sure your image is no larger than 156px by 41px. Then, add the following CSS override to your site:

#body div.nav-dummy {
 margin-top: 0;
}
#body div.nav {
 margin-top: 0;
 padding-top: 41px;
 background: url('http://IMAGE_URL') no-repeat 0 0;
}
#siteNavTree {
 background: #fff;
}

 

From there, simply input the URL of the image you're wanting to surface in that area and save the CSS override. Note the full URL must be surrounded in 'single quotes', and include the http:// prefix.

Considerations

You can drill into the CSS more by following the Custom CSS documentation.  Note that the samples above mainly target how to change color, but since you are targetting the correct element, you can change other items like font, size, alignment etc to match your styling.  W3Schools is a great reference to learn more about CSS.

  • Was this article helpful?