Customizing and Downsizing AdminLTE to Match Your Businsess

AdminLTE is now used by tens of thousands of users around the world. It is critical that AdminLTE provides an easy method to rebrand and customize the original design to match that of the rest of the business. Luckily, it already is super simple to make AdminLTE look really different from other implementations. In this post, we'll learn how to use these features to change the colors of the entire framework and remove code that we may not need without deleting files. We'll utilize LESS variables and imports to achieve our goal.

LESS

The LESS framework is a great CSS preprocessing tool that allows us to use variables and functions, import other files and more. If you are not familiar with LESS, take a look at their documentation to gain an extensive understanding of its features. If you are familiar with CSS, learning less won't take more than 30 minutes.

Compiling LESS

In order for us to be able to use LESS, we need to learn how to compile our LESS code into pure CSS. One way to do this is to use a graphical tool such as Koala, which works on Windows, Mac and Linux. However, this is not my favorite option. I prefer using Grunt, which is a JS framework that runs JavaScript tasks from the command line. For the purposes of this tutorial, we will be using Grunt since AdminLTE has ready Grunt configuration. If you are a Windows user, take a look at this question to get up an running. All other users should be fine using the normal procedure for installing and using Grunt.

Rebranding AdminLTE

Rebranding means changing the colors of a template to match that of your entire business. Before we begin, download a fresh copy of AdminLTE. In the main folder, you will find the build/less folder, which contains our LESS files. The only files we will need to customize are variables.less and AdminLTE.less.

Getting Grunt Ready

Now that we have both Grunt and AdminLTE, we should run the install command in AdminLTE's main directory.

sudo npm install

The above command will install all the dependencies needed to develop features for AdminLTE. It will also warn you if there is something missing or needs updating. From now on, Grunt will watch for file changes, compile less files into CSS and compress the pure CSS files to minimize their size. All of that with a minimal amount of effort!

Choosing Colors and Customizing AdminLTE

So now we are ready to choose new colors for our dashboard. I found Coolors to be a good source for nice color palettes. We chose this color palette.

Open variables.less in your favorite code editor. In this file, there are all sorts of variables that could dramatically change the look and feel of AdminLTE if customized. So, explore the file to see what is there to be customized. We are gonna concern ourselves with the colors section in this part. Here is what the section looks like.

//COLORS
//--------------------------------------------------------
//Primary
@light-blue: #3c8dbc;
//Danger
@red: #dd4b39;
//Success
@green: #00a65a;
//Info
@aqua: #00c0ef;
//Warning
@yellow: #f39c12;
        
@blue: #0073b7;
@navy: #001F3F;
@teal: #39CCCC;
@olive: #3D9970;
@lime: #01FF70;
@orange: #FF851B;
@fuchsia: #F012BE;
@purple: #605ca8;
@maroon: #D81B60;
@black: #111;
@gray: #d2d6de;

The brand colors are the first five colors in the list. The rest are only a set of colors that you could use for accenting certain elements. So let's replace these values with our new color palette. Here is what mine looks like after the changes.

//COLORS
//--------------------------------------------------------
//Primary
@light-blue: #FA7921;
//Danger
@red: #E55934;
//Success
@green: #9BC53D;
//Info
@aqua: #5BC0EB;
//Warning
@yellow: #FDE74C;

@blue: #0073b7;
@navy: #001F3F;
@teal: #39CCCC;
@olive: #3D9970;
@lime: #01FF70;
@orange: #FF851B;
@fuchsia: #F012BE;
@purple: #605ca8;
@maroon: #D81B60;
@black: #111;
@gray: #d2d6de;

Once the changes have been made, type the following command to compile and compress the less files. The command will create adminlte.css, adminlte.min.css and all the skin files, which will reflect the new changes too.

grunt less

Alternatively, you could run the grunt watch command and grunt will compile the LESS files automatically every time you save. Neat!

Here is how the new colors look using the .skin-blue skin.

Let's do one more thing with the variables just to reinforce the idea. This time, we will change the size of the sidebar to become 300 pixels. In the variables.less file, find the variable @sidebar-width and change its value to 300px. This is how the line should look like.

@sidebar-width: 300px

Then once more, run the grunt less command if you don't have grunt watch running.

grunt less

See how simple it is? I think this is extremely useful and I hope you get to enjoy these features. Since we changed all the primary colors, now the skins are automatically updated to present these changes. Let's take a look at the new skins.

Downsizing

The second part of this tutorial is about removing the parts that may be useless to us in our app. AdminLTE comes with many components and sometimes we don't need all of them. But, since we are using LESS to modulate AdminLTE, we can simply remove the undesired components. To do this, open build/less/AdminLTE.less and take a look at the imports. Each line is importing a specific component. To remove a component, simply comment out (or delete) the line. Use // to comment out a line. Once done, run grunt less. You will immediately notice that the size of the dist/css/adminlte.min.css file was reduced. Thus, very simply and effectively reducing the loading time for your app.

Conclusion

In this tutorial we learned how to use LESS variables to customize AdminLTE and rebrand it to fit our business's style. We also learned how to remove components that we won't need in our app. The methods we learned here can be used in many other frameworks that utilize CSS preprocessors such as Bootstrap and other templates.

I hope you have enjoyed this tutorial and found it useful. Drop us a line below and share your thoughts.