Over the last year, we've talked a lot about the upcoming Joomla 4. If you missed any of those updates, you can check out the ultimate guide to Joomla 4.
We're now at version Beta 4 of Joomla 4. As we get close to release, we'll keep explaining and documenting the new features in Joomla 4.
This week, we'll show you how to re-brand the Joomla 4 admin screens with your colors and logo.
The default Joomla 4 admin area
Joomla 4 uses a standard blue and white design that is very familiar for Joomla 3 users. This image shows the standard design for a Joomla 4 site:
This next screenshot shows the Joomla 4 login screen:
How to add your own colors and brand
Here's how to customize the Joomla 4 admin area with your own colors. We can modify the settings for the new administrator template which is called "Atum".
- Go to System > Administrator Template Styles.
- You can click on "atum - Default".
On the "Colour Settings" screen, you can choose the colors for your admin area. In the image below, I've chosen the main colors from the Joomlashack brand for my admin screens.
If you choose "Set Colour to Monochrome", the whole admin area will show in black and white.
Most of these color boxes use the 6 character Hex codes that normally used in CSS. However, the main template color uses the Hue system. My guess this is done in order to make the chosen color is dark.
On the "Image Settings" tab, you can upload your logo. You can choose three different images:
- Login Logo: This will show on the main login screen for the admin area.
- Brand Large: This will appear on all general screens in the admin area. A horizontal image about 100px high works best here.
- Brand Small: This image will show on specific settings screens in the admin. A square image about 100px high is suitable here.
This next screenshot shows my custom colors, plus the "Brand Large" image in the top-left corner and the "Login Logo" in the center of the screen.
This next image is from inside the admin area. You can see the "Brand Large" image in the top-left corner again.
This final image shows the "Brand Small" image in the top-left corner of a settings screen:
More on Joomla 4's new features
- The search extension in Joomla 4.
- Joomla 3.10
- Joomla 4's new web assets feature.
- The new Joomla 4 admin template.
- The future of Joomla 4 is CSS Grid, not Bootstrap.
- Joomla 4 has a new workflows feature.
- The Joomla 4 Media Manager.
- Introducing the new Joomla 4 installer.
About the author
