How to create new theme for AdmineLTE Template

How to add new theme to AdmineLTE Template



AdmineLTE is a popular web theme which is freely available online. There are lot of admin theme available, but AdminLTE’s simplicity and resusability make it famous. But most of the developers find a difficult in adding new theme or style in AdmineLTE. Moreover there is no Administer Theme generator available in web.

In this article I am going to explain how to change AdminLTE theme. In other words, how to create your own theme for AdminLTE. In reality building theme for AdminLTE is not much difficult. Please follow these steps.

Letus assume that we are going to add a new theme named ThemeExample. Also assume AdminLTE theme is extracted and stored in a folder named AT.

Step 1: Open AdminLTE.css or AdminLTE.min.css from AT\dist\css folder

Step 2: Add .bg-ThemeExample {background-color: #00000 !important;} at bottom of AdminLTE.css or AdminLTE.min.css. You can replace #00000 with your theme base color.

Step 3: Open demo.js from AT \dist\js folder

Step 4: In demo.js, search for

                var my_skins = ["skin-blue", "skin-black", "skin-red", "skin-yellow", "skin-purple", "skin-green", "skin-blue-light", "skin-black-light", "skin-red-light", "skin-yellow-light", "skin-purple-light", "skin-green-light" ];

Step 5: Add your theme name here as below

var my_skins = ["skin-blue", "skin-black", "skin-red", "skin-yellow", "skin-purple", "skin-green", "skin-blue-light", "skin-black-light", "skin-red-light", "skin-yellow-light", "skin-purple-light", "skin-green-light", “skin- ThemeExample” ];

Step 6: In the same file, search for skins_list.append(skin_blue);

Step 7: Now add following code below skins_list.append(skin_blue);

How to add new theme to AdmineLTE Template

Step 8: Now download the theme skin and edit as requires colors. You need to but the new theme inside dist\css\skins folder. [Let the it be AT\dist\css\skins\skin- ThemeExample.css]


Step 9 : Finally link your html page with new theme skin as
                <link rel="alternate" hreflang="en"  href="dist\css\skins\skin-ThemeExample.css" />

So it is very simple to change admineLTE theme colors. Replace colors of adminLTE can be completed by replacing colors in skin-ThemeExample.css. In case of any doubts, please write in comment section.