Changing section colors

changing individual section colors

There are 2 ways for you to change the color scheme in the DNnContra theme, one is to change the pre-defined colors the other is to use the DnnContra Color Palette to change individual sections of the theme.

Here we will explain how to change individual sections using the DnnContra Color Palette. This process is the same as adding the shadow or border classes which will give you more control over the look and feel of the DnnContra theme.

For an example we will be changing the color of the 'Top Bar' of the theme.

The first thing you'll need to do is to open the following files in the theme root (to find out more about the theme file structure, click here) :

You only need to add a color class next to the top-bar class line.

First, choose the color you would like to use from the DnnContra Color Palette, for this example we have chosen the color class purple. Now add this color class next to the top-bar class as below:

As you can see after adding your color code the top bar has now changed color but it is a bit to dark. If you look at the color palette you will notice that there are different variations of purple, lighten-* and darken-*. by adding a shade variation you will be able to lighten the color purple. To do this see the below example:

Which will result in a topbar looking lie this:

These color codes can be added to any div or spans to change the color.