---
title: Customizing CSS for the administration interface
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

The Kentico Xperience administration interface is styled using the [Bootstrap framework](http://getbootstrap.com/), based on a series of [LESS](http://lesscss.org/) stylesheets.

If you need to extend or override the styling of the administration interface (for example when [developing a custom module](https://docs.kentico.com/13/custom-development/creating-custom-modules.md)), add your custom styles into the **custom.less** file in the **App\_Themes\Default\Bootstrap** folder of your administration web project.

> **Info:** **Note**: The _custom.less_ file is explicitly intended for customization, and is never modified by upgrades or hotfixes.

## 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](http://gruntjs.com/) task runner to set up automatic LESS compilation:

1. Download the [Gruntfile.js](https://docs.kentico.com/docsassets/13/customizing-css-for-the-administration-interface/Gruntfile.js) and [package.json](https://docs.kentico.com/docsassets/13/customizing-css-for-the-administration-interface/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.