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