---
title: "Admin Customizer plugin"
---

# Admin Customizer plugin

## Install the plugin

Before installation please check that the below system requirements are met. You can ask your webhoster if the server you are working on supports them. You can also find the information in the Joomla! backend under System > System information.

 
## General requirements

 
- Joomla! 5.x of 6.x

 ## Preparations

 
- Create a full backup of the website. You can use [Akeeba Backup](http://www.akeeba.com) to create a quick one
- Upgrade to the latest version of Joomla!

 
## Installation (upload & install)

 The installation of our extensions is done with the Joomla! installer. Anyone that is already using Joomla! shouldn't have any problem, for those that are somewhat new in Joomla! we'll explain the steps required to make the installation of the extensions in your website.

 1) After downloading the installation file from our website, go to your Joomla! administration and go to **System > Install > Extensions**

 ![install 01](https://www.joomill-extensions.com/images/documentation/general/install-01.jpg)

 2) Then select the file in the tab **Upload Package File**, after a few moments you'll get a message saying the extension is installed.

 ![install 02](https://www.joomill-extensions.com/images/documentation/general/install-02.jpg)

 3) The plugin will be published automaticly. Go to **Extensions** » **Extension Manager,**find the Admin Customizer plugin (System - ) and see if the plugin to **Published**to check this.

 Now you're ready to start using our extension!

  


[Lees meer...](https://www.joomill-extensions.com/admin-customizer-plugin/install-the-plugin.md)

## Getting started

Admin Customizer is a system plugin, so all of its settings live on a single plugin screen with a row of tabs. This page shows you how to open it, what the tabs do, and how to brand your backend in a couple of minutes.

 
## Open the plugin

 
1. Go to **System > Manage > Plugins**.
2. Search for **Admin Customizer** and open **System - Joomill Admin Customizer**.

 ![the System → Plugins list filtered on "Admin Customizer", with the plugin row visible.](https://www.joomill-extensions.com/images/documentation/admincustomizer/admincustomizer_gettingstarted-01.png)

 All customization happens on this screen. When you're done, use the **Save** button in the toolbar and reload the page to see your changes.

 
## The tabs

 The plugin's settings are grouped into tabs. You don't have to use them all, most sites only need the Branding tab.

 ![the plugin edit screen showing the full row of tabs](https://www.joomill-extensions.com/images/documentation/admincustomizer/admincustomizer_gettingstarted-02.png)

 
- **Branding** – your brand color, text and link colors, corner radius, shadow style, favicon and logos. This is the foundation; the rest of the admin is derived from it.
- **Login Page** – style the login screen independently: background, login box, header and sidebar.
- **Backend** – fine-tune the backend main area, header and sidebar menu.
- **Dark Mode** – by default dark mode is derived automatically; here you can override specific dark colors.
- **Fonts** – load a Google Font for headings and body text, hosted locally for GDPR.
- **Custom Code** – add your own CSS or JavaScript for the last few percent.
- **Import / Export** – save your styling to a file and reuse it on another site.

 
## Brand your backend in three steps 

 
1. Open the **Branding** tab and set a **Brand Color**.
2. Click **Save**.
3. Reload the page. Your header, sidebar, buttons, links, tabs and form controls now follow your brand color, and the login page picks it up too.

 ![Choose Branding Color](https://www.joomill-extensions.com/images/documentation/admincustomizer/admincustomizer_gettingstarted-03.png)

 ![Same admin after setting a single brand color](https://www.joomill-extensions.com/images/documentation/admincustomizer/admincustomizer_gettingstarted-04.png)

 
## How the settings relate to each other

 Understanding these three rules will save you a lot of clicking:

 
- **One color drives everything.** The **Brand Color** from the Branding tab is propagated across the whole admin. Text contrast is calculated automatically, so a light surface gets dark text and a dark surface gets light text, you never end up with unreadable labels.
- **Sections can override the brand.** The Login Page and Backend tabs follow your Branding settings by default. Each header and sidebar has a **Custom Styling** toggle so you can give one section its own colors without affecting the rest.
- **Dark mode is automatic.** Out of the box, Admin Customizer leaves Joomla's dark mode exactly as it is and derives your brand colors for it automatically. You only touch the Dark Mode tab if you want specific dark colors.

 
## Reverting

 Nothing is written into your template. Admin Customizer layers on top of Atum using CSS variables, so if you disable the plugin under **System > Manage > Plugins**, your backend and login page revert to the standard Joomla look instantly.


[Lees meer...](https://www.joomill-extensions.com/admin-customizer-plugin/getting-started.md)

## Branding tab

The Branding tab is the foundation of the plugin. The settings here are propagated across the whole administration area and are used as the default for the Login Page and Backend tabs. In most cases, setting a single brand color here is all you need.

 ![the full Branding tab with a brand color set](https://www.joomill-extensions.com/images/documentation/admincustomizer/admincustomizer_branding-01.png)

 
## Colors

 
- ``**Brand Color** – Your primary brand color. It's used for the header and other accents throughout the administration area, and it drives Joomla's entire derived color palette. Individual sections can override it, and dark mode colors are derived from it automatically.
- **Text on Brand Color** – The text and icon color used on top of the brand color, for example the header title and header buttons. Leave it empty and Admin Customizer picks a readable light or dark value automatically based on your brand color.
- **Link Color** – The color for links throughout the administration area. Leave it empty to derive it from the brand color. If no brand color is set either, the original Joomla link color is used.

 
## Border radius & shadow

 These two settings control the overall "shape" of the interface and apply everywhere: buttons, form fields, dropdowns, alerts, the header, sidebar, cards and content panels.

 
- ``**Border Radius** – The rounding applied throughout the admin.

 
|  |  |
| --- | --- |
| Default | Keeps Joomla's own rounding |
| None | Perfectly square corners |
| Small / Medium / Round | Increasing amounts of rounding |
| Custom | Enter your own value in the **Custom Border Radius** field, e.g. `10px` |

 
- **Shadow Style** – The depth applied to surfaces throughout the admin.

 
|  |  |
| --- | --- |
| Default | Keeps Joomla's own shadows |
| None | Flat, no shadows |
| Subtle / Medium / Strong | Increasing shadow depth |
| Custom | Enter your own value in the **Custom Shadow** field, e.g. `0 0 10px rgba(0,0,0,0.5)` |

 
## Favicon & logos

 
- ``**Favicon** – Select an image from the Media Manager to use as the admin favicon (`.ico`, `.png` or `.svg`).
- **Logo** – The main logo, shown in the header of the administration area on every page. It replaces the default Joomla logo.
- **Logo (Collapsed)** – A compact logo variant, shown when the sidebar is collapsed. Use a small square mark or icon here.
- **Logo (Dark Mode)** – An optional logo variant for dark mode. If left empty, the regular logo is used.
- **Logo (Collapsed, Dark Mode)** – An optional compact logo variant for dark mode. If left empty, the regular collapsed logo is used.

 **Tip:** Upload a light logo for light mode and a light-on-transparent version as the dark-mode logo, so it stays readable on the darker header.


[Lees meer...](https://www.joomill-extensions.com/admin-customizer-plugin/branding-tab.md)

## Login page tab

The login screen is the first thing your clients see. On this tab you can style it independently from the rest of the backend: its background, the login box, an optional header and an optional sidebar. Anything you leave untouched simply follows your Branding settings.

 The tab is split into four sections: **Main Options**, **Login Box options**, **Header Options** and **Sidebar Options**.

 
## Main Options

 Controls the background of the login page itself.

 
- ``**Body Background** – Choose whether the page background is a **Color** or an **Image**.
- **Body Background Color** – The background color, shown when Body Background is set to Color.
- **Body Background Image** – The background image, shown when Body Background is set to Image.
- **Image Display** – How the background image is placed:

 
|  |  |
| --- | --- |
| Fill | Covers the whole area |
| Tile | Repeats the image |
| Original | Shows the image at its actual size |
| Custom | Reveals **Background Position**, **Background Repeat** and **Background Size** so you can set them manually |

 
## Login Box options

 The login box is the white panel that holds the username and password fields.

 
- ``**Login Box Background Color** – The background color of the login box.
- **Login Box Logo Image** – The logo shown inside the login box. If left empty, the logo from the Branding tab is used.
- **Introtext** – Free text shown in the login box, useful for a welcome message or instructions for the user.
- **Introtext Color** – The text color for that intro text.
- **Language Selection** – Show or hide the language selection dropdown in the login box.
- **Button Background Color** – The background color of the login button.
- **Forgot Login Details Link** – Show or hide the "Forgot your login details?" link. When it's shown, the extra **Link Color** field lets you set its color.

 
## Header Options

 An optional header bar across the top of the login page.

 
- ``**Header** – Show or hide the header on the login page. All other header options appear only when this is on.
- **Header Logo** – Show or hide the logo in the header.
- **Header Logo Background Width** – The width of the header logo background. You may use `px`, `%` or `vw`.
- **Button in Header** – Show or hide the button in the header. It can be used to link to a page or perform an action.
- **Custom Header Styling** – By default the header follows your Branding settings. Enable this to set specific colors for the login header. It reveals:
- **Header Background Color** – the color of the header bar.
- **Header Logo Background Color** – the background behind the logo (when the header logo is shown).
- **Button Background Color** – the background of the header button (when the header button is shown).

 
## Sidebar Options

 An optional vertical panel beside the login box, ideal for a background image, your site name or a support message.

 
- ``**Sidebar** – Show or hide the sidebar on the login page. All other sidebar options appear only when this is on.
- **Sidebar Position** – Place the sidebar on the **Left** or the **Right**.
- **Sidebar Width** – The width of the sidebar. You may use `px`, `%` or `vw`.
- **Sidebar Background** – Choose whether the sidebar background is a **Color** or an **Image**. When you pick Image, the same **Image Display** options as the Main Options apply (Fill, Tile, Original, or Custom with position, repeat and size).
- **Sitename** – Show or hide the site name in the sidebar.
- **Joomla Administrator Login** – Show or hide the "Joomla Administrator Login" link in the sidebar.
- **Login Support Module** – Show or hide a support text block in the sidebar. When it's on, the **Login Support Module Text** editor lets you enter that content.


[Lees meer...](https://www.joomill-extensions.com/admin-customizer-plugin/login-page-tab.md)

## Backend tab

The Backend tab fine-tunes the administration area itself: the main content area, the top header and the sidebar menu. Like the Login Page tab, everything here follows your Branding settings by default, so you only need to change what you want to differ.

 The tab is split into three sections: **Main Options**, **Header Options** and **Sidebar Options**.

 ![admincustomizer backend 01](https://www.joomill-extensions.com/images/documentation/admincustomizer/admincustomizer_backend-01.png)

 
## Main Options 

 Controls the background behind the backend content.

 
- ``**Body Background** – Choose whether the backend background is a **Color** or an **Image**.
- **Body Background Color** – The background color, shown when Body Background is set to Color.
- **Body Background Image** – The background image, shown when Body Background is set to Image. When you choose an image, the **Image Display** options apply (Fill, Tile, Original, or Custom with position, repeat and size).

 
## Header Options

 The top bar of the backend.

 
- ``**Header** – Show or hide the backend header. All other header options appear only when this is on.
- **Shadow Style** – The shadow under the header. Default follows the shadow style from the Branding tab; choose Custom to enter your own value.
- **Header Logo** – Show or hide the logo in the header.
- **Button in Header** – Show or hide the button area in the header.
- **Custom Header Styling** – By default the header follows your Branding settings. Enable this to set specific colors for the backend header. It reveals:
- **Header Background Color** – the color of the header bar.
- **Header Title Font Color** – the color of the title text in the header.
- **Header Logo Background Color** – the background behind the logo (when the header logo is shown).
- **Button Background Color** – the background of the header buttons (when the header button is shown).
- **Button Font Color** – the text/icon color on the header buttons.
- **Button Icon Background Color** – the background color of the button icon. 
## Sidebar Options

 The main navigation menu on the side of the backend.

 
- ``**Sidebar Position** – Place the menu on the **Left** or the **Right**.
- **Sidebar Background** – Choose whether the sidebar background is a **Color** or an **Image**. When you pick Image, the **Image Display** options apply (Fill, Tile, Original, or Custom with position, repeat and size).
- **Sidebar Background Color** – The background color of the sidebar menu.
- **Menu Accent** – The color used for menu hover and active states:

 
|  |  |
| --- | --- |
| Automatic | Derives neutral shades from the sidebar color |
| Brand Color | Tints hover and active states with your brand color |

 
- **Shadow Style** – The shadow on the sidebar. Default follows the shadow style from the Branding tab; choose Custom to enter your own value.

 **Note:** Whatever sidebar color you choose, Admin Customizer automatically sets a readable text color for the menu items and calculates matching hover and active shades, so the menu stays legible without any extra settings.


[Lees meer...](https://www.joomill-extensions.com/admin-customizer-plugin/backend-tab.md)

## Dark Mode tab

Joomla's backend has its own light and dark mode. Admin Customizer respects that: **by default it does nothing special to dark mode**. It leaves Joomla's dark theme in place and derives your brand colors for it automatically, so you get a consistent dark mode for free.

 You only need this tab if you want to override specific dark colors, for example to match an exact brand shade.

 ![admin screen darkmode](https://www.joomill-extensions.com/images/extensions/admincustomizer/admin-screen-darkmode.png)

 
## Custom Dark Mode Colors

 **Custom Dark Mode Colors** – The master switch for this tab.

 
- **No** (default) – all dark mode colors are derived automatically from your light mode settings.
- **Yes** – reveals the color fields below so you can set specific dark colors. Any field you leave empty keeps its automatic color, so you can override just one or two values.

 ``

 When the switch is on, you can override the following. Every field overrides the automatically derived dark color; leave it empty to keep the automatic value.

 **General**

 
- **Brand Color** – the brand color used in dark mode.
- **Text on Brand Color** – text and icons on top of the dark brand color.
- **Link Color** – link color in dark mode.

 **Backend**

 
- **Body Background Color** – the backend background in dark mode.
- **Header Background Color** – the backend header in dark mode.
- **Sidebar Background Color** – the backend sidebar in dark mode.

 **Login Page**

 
- **Body Background Color** – the login page background in dark mode.
- **Header Background Color** – the login header in dark mode.
- **Login Box Background Color** – the login box in dark mode.
- **Sidebar Background Color** – the login sidebar in dark mode.

 **Tip:** Start with the switch off and check how the automatic dark mode looks first. In most cases it's already right, and you'll only need to nudge one color.


[Lees meer...](https://www.joomill-extensions.com/admin-customizer-plugin/dark-mode-tab.md)

## Fonts tab

The Fonts tab lets you set a Google Font for headings and body text in the administration area. The fonts are **downloaded to your own server once and served locally**, so your visitors' browsers never contact Google. That keeps the feature GDPR-friendly out of the box.

 ![admincustomizer fonts 01](https://www.joomill-extensions.com/images/documentation/admincustomizer/admincustomizer_fonts-01.png)

 
## Google Fonts API Key

 **Google Fonts API Key** – Before you can pick a font, enter a Google Fonts API Key. This is what lets the plugin look up the list of available fonts so you can choose one. The key is only used to browse fonts, not to download them, so nothing about it affects your visitors. If you don't have one yet, follow the steps below.

  The font pickers below stay hidden until a key is entered.

 
## How to get your Google Fonts API Key

  The key you need is specifically for the **Web Fonts Developer API** (sometimes shown as "Google Fonts Developer API"). Any other Google API key will not work.

 
1. Go to the [Google Cloud Console](https://console.cloud.google.com) and sign in.
2. In the top bar, open the project picker and create a new project, or select an existing one. Any name will do, for example "Joomla Fonts".
3. Go to **APIs & Services > Library**, search for **Web Fonts Developer API**, open it and click **Enable**. Enabling the correct API is what makes the key work.
4. Go to **APIs & Services > Credentials**, click **Create credentials > API key**. Your key appears immediately, copy it.
5. Paste it into the **Google Fonts API Key** field on the Fonts tab and click **Save**.

 
### Securing the key (recommended)

 Open the key with **Edit** and set:

 
- **API restrictions** – Restrict the key to only the **Web Fonts Developer API**, so a leaked key can't be used for anything else.
- **Application restrictions** – Leave this on **None**, or restrict by your server's IP address. Do not use an HTTP referrer restriction: the plugin calls Google from your server, not from the visitor's browser, so a referrer restriction would block it.

 
### Good to know

 
- The Web Fonts Developer API is free. You normally don't need to attach a billing account or credit card. If a project asks for billing, a standard free project is fine.
- A brand new key can take a minute or two before it starts working.
- **To confirm it works:** open the **Heading Font** or **Body Font** dropdown. If it fills with hundreds of font families, the key is correct. If it stays on "Default" only, or you get an error on save, the key is wrong or the Web Fonts Developer API isn't enabled on that project.

 
## Choosing fonts

 
- ``**Google Fonts Heading Font** – The font used for headings in the admin area.
- **Heading Font Weight** – The weight for headings, from 100 to 900 (400 is the default). Use a heavier weight such as 700 for stronger, bolder titles.
- **Google Fonts Body Font** – The font used for the body text in the admin area.

 When you save, Admin Customizer downloads the selected font files to your server and serves them from there.

 **Note:** Because the font files are hosted on your own server, no data is sent to Google when someone opens the backend. There's nothing else to configure for GDPR compliance.


[Lees meer...](https://www.joomill-extensions.com/admin-customizer-plugin/fonts-tab.md)

## Custom Code tab

Almost everything can be done with the options on the other tabs, but for the last few percent you can add your own CSS or JavaScript here, without editing any template files. Each option has its own **Yes/No** switch and a code editor that appears when you turn it on.

 ![the Custom Code tab with Custom CSS enabled and the code editor open](https://www.joomill-extensions.com/images/documentation/admincustomizer/admincustomizer_custom-01.png)

 
## Custom CSS

 **Custom CSS** – Turn this on to add CSS that applies in **both** light and dark mode. Write normal CSS selectors and rules.

 
```css
/ Make primary buttons a little bolder /
.btn-primary {
    font-weight: 600;
    letter-spacing: .3px;
}
/ Give cards a touch more padding /
.card-body {
    padding: 1.25rem;
}```

 > **📷 SCREENSHOT — Custom CSS example**  
> *Capture:* a small custom CSS snippet in the editor alongside its visible effect in the admin.  
> *Suggested file:*`images/documentation/admin-customizer-plugin/customcode-example.png`

 
## Custom CSS (Light Mode) and Custom CSS (Dark Mode)

 **Custom CSS (Light Mode)** – CSS that should only apply when the admin is in light mode.  
**Custom CSS (Dark Mode)** – CSS that should only apply when the admin is in dark mode.

 For both of these you just write regular selectors, the plugin automatically scopes them to the right color mode for you. You don't need to add `[data-bs-theme="light"]` or `[data-bs-theme="dark"]` yourself.

 Use these two fields when you want a rule to behave differently between the two modes, for example a different accent color or a background image that only suits the dark theme.

 
## Custom Javascript

 **Custom Javascript** – Turn this on to add your own JavaScript, which runs in the administration area.

 
```js
window.onload = function () {
    console.log('Admin Customizer custom JS loaded');
};```

 **Note:** Custom code is powerful but it's your responsibility to keep it valid. If something looks broken after adding a snippet, switch the relevant option back to **No**, save, and the admin returns to normal.


[Lees meer...](https://www.joomill-extensions.com/admin-customizer-plugin/custom-code-tab.md)

## Import / Export tab

Style one site, then reuse that exact look on every other site you build. The Import / Export tab lets you save all of the plugin's settings to a file and restore them elsewhere in a few clicks. Over time you can build your own library of ready-made looks.

 ![Import Export](https://www.joomill-extensions.com/images/extensions/admincustomizer/admin-screen-importexport.png)

 
## Export (Backup)

 **Backup / Export Settings** – Click **Start Backup** and the plugin generates a JSON file that you'll be prompted to save.

 This backup file contains all stored settings for the Admin Customizer plugin. Note that it does **not** contain any image files, only their locations. After exporting, you can use the file to restore your settings on this site or on a different site.

 
## Import (Restore)

 **Restore / Import Settings** – Follow these steps:

 
1. Click **Browse** and choose a JSON file that you previously backed up. Only `.json` files are accepted.
2. Press **Start Restore** to process it.
3. When it's done, press **Refresh Page** to load your newly imported settings.

 
## Good to know

 
- **Images aren't included.** Because the backup only stores image *locations*, any logos or background images need to exist at the same path on the target site (or be re-selected there).
- **Same extension only.** A backup made with a different Joomill extension can't be imported here, and a file created with a newer version of the plugin can't be restored on an older version, update the plugin first.

  


[Lees meer...](https://www.joomill-extensions.com/admin-customizer-plugin/import-export-tab.md)

## Troubleshooting & FAQ

## Troubleshooting

 
### Nothing changes after I save

 Check these in order:

 
1. **Is the plugin enabled?** Go to **System > Manage > Plugins**, search for **Admin Customizer** and make sure **System - Joomill Admin Customizer** is Enabled.
2. **Are you using the Atum template?** Admin Customizer only styles Joomla's default **Atum** administrator template (or an Atum-based child template). On a completely different admin template it has nothing to hook into.
3. **Did you reload the page?** Styling is applied on save; reload the backend (and the login page in a private window) to see the result.
4. **Did you set a brand color?** With no colors set anywhere, there's nothing to change. Start with a **Brand Color** on the Branding tab.

 
### My Google Font isn't showing

  The font pickers only work once you've entered a valid **Google Fonts API Key** on the Fonts tab. After selecting a font and saving, the plugin downloads the font to your server, so the change appears after the save completes. If it still doesn't show, double-check the API key is valid.

 
### Dark mode still looks like default Joomla

  That's intended. By default Admin Customizer leaves Joomla's dark mode in place and only derives your brand colors automatically. If you want full control over the dark colors, open the **Dark Mode** tab and switch on **Custom Dark Mode Colors**.

 
### My logo is missing or the wrong size on another site

 Logos and background images are referenced by their **location**, not embedded. If you imported settings from another site, make sure the image exists at the same path on this site, or re-select it in the Media Manager.

 
### I want to undo everything

 Disable the plugin under **System > Manage > Plugins**. Because Admin Customizer only layers on top of Atum with CSS variables, your backend and login page revert to the standard Joomla look instantly. Nothing is written into your template.

 
## Frequently Asked Questions

 
### Do I need to know CSS?

 No. Everything is done with color pickers and options. Custom CSS is available if you want it, but never required.

 
### On how many sites can I use it?

 As many as you like. One purchase covers unlimited installations.

 
### Will it break my admin or template?

 No. Admin Customizer layers on top of Joomla's Atum template using CSS variables. Disable the plugin and everything reverts instantly. Dark mode is left untouched unless you explicitly enable custom dark colors.

 
### Are the Google Fonts GDPR-compliant?

 Yes. Fonts are downloaded to your own server once and served locally, so no visitor data goes to Google.

 
### Can I move my styling to another site?

 Yes. Export your settings to a file and import them on any other site in one click, so you can reuse the same look across all your projects.

 
### What exactly can I style?

 Header, sidebar menu, main area, login page, logos, backgrounds, buttons, links, tables, tabs, dropdowns, form controls, fonts, border radius and shadows, in both light and dark mode.


[Lees meer...](https://www.joomill-extensions.com/admin-customizer-plugin/troubleshooting-faq.md)

## Changelog

{changelog element="admincustomizer"}


[Lees meer...](https://www.joomill-extensions.com/admin-customizer-plugin/changelog.md)