Customizing CSS for the administration interface

The Kentico administration interface is styled using the Bootstrap framework, based on a series of LESS stylesheets.

If you need to extend or override the styling of the administration interface (for example when developing a custom module), add your custom styles into the custom.less file in the App_Themes\Default\Bootstrap folder of your Kentico web project.

Compiling the LESS code

Modifying LESS files does not have an immediate effect on the styles in the administration interface. You also need to compile the LESS code into CSS files, which are then linked into the administration interface pages.

For example, you can use Visual Studio and the Grunt task runner to set up automatic LESS compilation:

1. Download the Gruntfile.js and package.json files.
2. Copy both files into the CMS folder of your Kentico web project.
3. Open your Kentico solution in Visual Studio.

On web site projects, Visual Studio automatically installs the required packages.

For web application projects, you need to perform the following additional steps:

1. Include the new files in the CMSApp project:
   1. Click Show all files at the top of the Solution Explorer.
   2. Select the Gruntfile.js and package.json files.
   3. Right-click one of the files and select Include in Project.
2. Right-click package.json and select Restore Packages.
3. Wait until the required packages are installed.
4. Save the CMSApp project.
5. Close and then reopen the solution.

You can now see a watch task in the Visual Studio Task Runner Explorer. When you modify the custom.less file, the styles are automatically compiled into the CSS that is applied to the administration interface.