Joomla 4 comes with a couple of pretty neat new features, and at the Joomla Community Magazine we love to hear what you do with them. In this issue, Joe Sonne tells us how he customizes the administrator dashboard for his backend users. This is relatively easy; all you need is curiosity, creativity and a good idea of what your users need. And if you know a bit of CSS and HTML, you can knock yourself out creating the best user experience ever for your users.
Thanks for participating in this article, Joe! Could you tell us a little about yourself?
I'm Joe Sonne and I currently live in Guelph, Ontario, Canada, just an hour west of where I grew up in Toronto.
I've been involved with Joomla since 2005 and served on different Teams for the project including the OSM board in the past. Many people in the Joomla Community know me as JoeJoomla. That is also the name of my website brand for The Joe Sonne Group.
What is your favourite Joomla 4 feature and why?
My favourite feature of Joomla 4 is the new Joomla administrator template which is called 'Atum'. The volunteers who designed and created Atum did an incredible job of putting all the power of Joomla 4 at your fingertips and giving you the ability to easily customize the Joomla Administrator area.
When you first install Joomla and login as a super user you'll see the Atum template intelligently organized with WCAG 2.1 level AA accessible compliance interface. Experienced Joomla administrators will find everything they expect and more in the Joomla 4 admin, but this is not what excites me the most. For me, the best feature is how easy it is to customize the Atum dashboard area.
Editing or completely removing modules on the Atum dashboard is as straightforward as clicking the little cog icon that appears on the top right corner of the modules:
When you click the icon, you are presented with a dropdown to edit or unpublish the module.
At the bottom of the template page, there is also an 'Add module to the dashboard' button to add new modules on the dashboard. This is how you create a clean and simple backend experience for website publishers. You set things up, so they only see the things that they need to do their job.
Is this possible in Joomla 3 as well or is it a new feature? What makes it an improvement?
It is possible to create a customized backend experience for users in Joomla 3, but not as effortless as in Joomla 4. In Joomla 4, it's as if the creators of Atum are begging you to customize the Joomla administrator area, which is exactly what you should do. People have complained in the past that Joomla is too complicated. It really isn't; you just need to simplify what your users viewin the backend and make it relevant. Take out what they don't need and give them exactly what they need to do their job. By removing everything else, it makes it very intuitive and enjoyable to work with Joomla 4.
Do you have examples that show what you’re done with it?
The Joomla administrator template usually is something you only see when you work in the backend of Joomla. Although there are ways to edit and publish content from the front end of Joomla, having a customized backend experience is much better, in my opinion.
Here are some examples of what I am talking about:
A Customized Admin Login Screen:
When you customize the Atum template, you can change the appearance of the login screen as well. Here you see a simple branded login page containing the brand colours and logos. This is also part of customizing the Atum template, which is described below.
The Home Dashboard For A Specific User Group
The image above is the Home Dashboard for users in a group called 'Joe1'. Here you see the brand colours. In this case, they are my brand colours. At the very top of the template there is a module position available that spans the full width of the template where you see 'Joe1 Stuff". This is a position in the Atum template called 'customtop'. You can put something useful for your back-end user in here. For this example, I'm using this module content to distinguish it from a different user group dashboard called 'Joe2'.
In this Joe1 user group, I have removed most of the default Atum dashboard modules and put in my own custom modules for Joe1 users. Making custom modules with functionality suited to the user creates a better user experience for those who publish content on the website.
In the first module on the main dashboard area you see:
- A button to my ticketing system in case they need help.
- A button so they can initiate a backup of the site before they start editing.
- A button for creating a new article.
- A button for that will open up a new article editor in the category they most often work in.
To the right of that module is another custom module with instructions for Joe1 users to follow. Although the messages in my example are silly, you can put helpful messages in there for your users.
A very useful standard Joomla module published below called 'Articles - Latest' that can be set up to show only the articles that this specific logged-in Joe1 user authored.
Below, simple Bootstrap buttons link to functions that Joe1 users need for their work.
I've also put a custom module with Bootstrap HTML tabs in it with Daily Reminders for Joe1 Users to follow.
In the left column, where you see the dark blue area, I've added a custom module with links for Joe1 users.
This simplified dashboard is easily understood by my Joe1 users. Now let’s see an even simpler dashboard for Joe2 users:
The Home Dashboard User Group 2
When a Joe2 user logs in, they see a big button to create a new blog article, some instructions on the side and their authored articles below. This is how you create a unique and uncomplicated Joomla publishing experience for users.
What knowledge do we need to use this feature?
The main thing you need to take advantage of Atum's customization is a fearless curiosity to poke around in everything and become familiar with it. Once you discover what each module does and its settings you can put together your own mix of functionality.
Knowledge of HTML and CSS will help you to make nice-looking custom modules. In the examples above, I copied the code of existing Atum administrator modules and tweaked them to suit my needs. Joomla 4 also uses Bootstrap 5, so you can use Bootstrap HTML for buttons. For the custom module with the Bootstrap tabs, I created an alternate module layout that references the helper functions for the specific javascript needed for Bootstrap tabs. Here is a GitHub page with information on how to use Bootstrap in Joomla 4:
https://gist.github.com/dgrammatiko/efb3de4aa7cab4813a244f93f73cc0fd (With thanks to Dimitris Grammatikogiannis).
For the colour customizations that I did for my Atum template, I did some CSS and put it in the Atum administrator template 'user.css' file.
The other thing that will help you take customizing Atum to the next level is knowing how to work with the Joomla ACL (Access Control List) capabilities to assign modules to specific groups you create for your users.
But the Atum template is also painless to customize, even for non-coders. Let's take a look at some of the things that are easily customized in the backend template. Log in to the administrator area and go to:
Home Dashboard > System > Administrator Template Styles > Atum - Default
When you get there click on the 'Colour Settings' tab and this is what you will see:
By changing the settings here you can dramatically change the appearance of the Atum colours. Let's change that hue value from 214 to 179, save it and go to he dashboard and you will see this appearance in the default Atum dashboard:
So right away, you can see the intelligence built into the template enabling you to change the dashboard colours without having to code. Experiment and change the other settings to see what you get. Adjust them until you are satisfied with the new colours.
Then go back to the Template Styles and open the tab for the Image Settings. Upload images in sizes suitable for the different logos that will appear in the backend. In the image below, I am showing my branded backend Atum template with logos for The Joe Sonne Group inserted in the 'Image Settings' tab. These images now appear in the Atum template on the top left corner of the Dashboard as well as the admin login screen.
This is just the tip of the iceberg of what you can do with the Atum template. What you want to accomplish is to customize the template for your specific users, so that only what they need to do their job is presented to them when they log in.
Do you have tips for users who want to make the most of this feature?
The best thing that you can do is get together with other Joomla 4 users, either online or in person, and share knowledge and experience with each other. When I started out with Joomla, I didn't know anything about how to work with it. Many Joomla Community members were happy to help me and show how they do things. This fast-tracked my learning curve so that in a short time I was very comfortable working with Joomla.
There is going to be an explosion of Joomla 4 knowledge sharers. One of the best places tofind them is at a local Joomla User Group (JUG). Here's a directory of JUGs: https://community.joomla.org/user-groups.html
