How to customize Atum template Joomla 4
Atum is the name of the default administrator template in Joomla 4. It has several settings you may customize to fit the needs of your brand. The logo and color schemes may be easily changed.
As a bonus, if you administer multiple Joomla powered websites, this makes it easier to tell them apart.
For example, on Kevin's Guides (this website) I have customized the admin template to fit in with my purple color scheme and logos.
Template Style Settings
Templates in Joomla 4 are broken into two parts - the template itself and the "style." It's possible to have one template with multiple styles. At this time (as far as I could find), the default Atum template is the only administrator template available for Joomla 4. You can think of the template as the template itself, and the style is the customized version of that template. So to customize Atum, we need to make changes to the style settings.
Open your administration panel and log in. Navigate to "System" and then "Administrator Template Styles," under the "Templates" section.
There should only be one template style available, unless you've already made customizations. Open the default "Atum - Default" style to view its settings. This is where we will make our customizations.
Color Settings
There are three tabs on the style settings page for Atum. The first tab just displays details about the template. The second tab contains the color settings. This is where you can set the template colors to match the scheme of your website or brand.
- Hue Value
- The most important color setting
- This is the main color of the template, which appears in the background and top area of the template.
- Slightly darker and lighter variations of this hue will be used across the template.
- Light Background
- This is the color that most notably shows up in dropdown menu toggle buttons
- I'd recommend selecting a lighter version of your hue value color
- Dark Text
- This color appears in top menu buttons, paragraph text, and labels for groups of fields in various places throughout the template. I'd select something dark, close to black or grey.
- Light Text
- This appears over some buttons and areas with darker backgrounds. Use white or a very light color.
- Link Color
- The color of links throughout the interface
- Special Color
- I haven't found where this color shows up. If you figure it out, leave in comments. As far as I can tell, this does nothing.
- Set Color to Monochrome
- This makes the entire template black and white or greyscale
Image Settings
The image settings tab allows you to customize the logos displayed in areas of the admin template. These are pretty self explanatory, but here's a description if you need it:
- Login Logo
- The logo displayed on the login form when you log into the administration panel.
- Brand Large
- A large format logo. Usually your full logo with text. Use a wider, horizontal image here. This is what appears in the top left of the admin panel when you're logged in, above the menu.
- Use a horizontal SVG with a 15:3 ratio, or a 300x60 image.
- Brand Small
- A smaller version of your logo. Usually in square format. The logo only without text is ideal. This is what is displayed when the admin menu is collapsed.
- Use a square SVG if possible, or 64x64 image.