Customizing CSS for the administration interface

The Kentico Xperience 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 administration 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 administration web project.
3. Open your solution in Visual Studio.
4. Include the new files into 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.
5. Right-click package.json and select Restore Packages.
6. Wait until the required packages are installed.
7. Save the CMSApp project.
8. 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.