Changing the color scheme

Changing the theme colors

Changing the pre-defined accent colors

The DnnContra theme comes with 23 pre-defined color themes. and can be easily changed in the theme as well as customized.

Out of the box, the DnnContra theme uses a default color scheme which is orange. When you mouse over the menu items, login button or headers etc., the color is ornage.

To change this to a pre-defined color you have to edit 1 file in the theme called '_includes-top.ascx' which is found in the 'layouts' folder in the root of the theme file structure.

All pre-defined color schemes are found in the 'assets/colors' folder on the root of the theme.

First open the '_includes-top.ascx' file and look to the bottom of the file till you see the following lines:

 
<!-- Theme pre-defined color scheme -->
<dnn:DnnCssInclude ID="DnnCssColorScheme" runat="server" FilePath="assets/css/colors/_base.css" PathNameAlias="SkinPath" Name="colorscheme" Version="1.0.0" />
<!-- Theme pre-defined color scheme -->

You only this you need to do is to change the _base.css to your chosen color scheme file like purple.min.css to you end up with code like below, then save the file and the color scheme should change.

 
<!-- Theme pre-defined color scheme -->
<dnn:DnnCssInclude ID="DnnCssColorScheme" runat="server" FilePath="assets/css/colors/purple.min.css" PathNameAlias="SkinPath" Name="colorscheme" Version="1.0.0" />
<!-- Theme pre-defined color scheme -->

Pre-defined color schemes

Color File name
 
_base.css
 
amber.min.css
 
blue-grey.min.css
 
blue.min.css
 
brown.min.css
 
cyan.min.css
 
deep-blue.min.css
 
deep-green.min.css
 
deep-ornage.min.css
 
deep-pink.min.css
 
deep-purple.min.css
 
green.min.css
 
grey.min.css
 
indigo.min.css
 
light-blue.min.css
 
light-green.min.css
 
lime.min.css
 
orange.min.css
 
pink.min.css
 
purple.min.css
 
red.min.css
 
teal.min.css
 
yellow.min.css