The
JoeJoomla
Blog

Everyone has an opinion.
Here's mine. What's yours?

The JoeJoomla Blog

Everyone has an opinion. Here's mine. What's yours?

Joomla 4 Is Launched and This Is My Favourite Feature

Joomla 4 Stable Launched on Joomla's 16th Birthday August 17, 2021



 

Tuesday August 17, 2021 was Joomla's 16th birthday and Joomlers around the world celebrated with big events. Birthdays usually come with a gift and after the long wait for Joomla 4 what could be better than a gift of the official launch of Joomla 4.o stable release?

 

There Are Lots Of Great New and Improved Features In Joomla 4

 

Here's a list of the new things that Joomla 4 brings:

  • Bootstrap 5 Integration
  • MVC layer improvements
  • New front-end template
  • New back-end template
  • New Media manager
  • Simplified installation process
  • Faster page loading times
  • SEO optimized
  • Built in update process to go from v 3.10 to 4.0
  • AA level WCAG 2.1 accessibility compliance on core templates
  • Customizable HTML email templates
  • Web Services out of the box
  • Enhanced Command Line Interface
  • MooTools and jQuery removed from the core
  • Workflow for publishing content

I may have missed some new features but what I really want to talk about is my favourite new Joomla 4 thing, the easily customized Joomla administrator dashboard!

 

An Easily Customized Admin Dashboard is My Favourite Feature of Joomla 4

 

The volunteers that contributed to make Joomla 4 stable a reality are brilliant and all of the improvements are going to help a lot of people in many different ways. None of the improvements are trivial but the one thing that jumped right out at me that I am really liking is the new administrator template called Atum.

Atum is easily customized and this is going to help make the user experience for content publishers and administrators a wonderful experience.

Yes you can customize the Joomla 3 administrator templates but no where as easy as you can with Atum. So lets take a look at this.

This is what the Atum administrator dashboard looks like out of the box:

 

Atum Joomla 4administrator template

 

The developers did an amazing job of putting all the power of Joomla together in an nice and organized dashboard. However, for the novice Joomla user all of this could be really overwhelming. This is not unlike sitting down in the cockpit of a large jet and being faced with all the dials, nobs, switches and other things important to flying an airplane. It can be very intimidating and therefore a person might say that it is too complicated and they need something simpler to use.

 

This Will Make For a Much Better User Experience For Website Content Publishers

 

With the Atum template not only can you make the dashboard simpler, you can also easily create a customized user experience suitable for everyone involved in publishing content on the website regardless of what their role is.

Removing, adding and customizing the dashboard in Atum is so easy. Just click on the little cog icon on the top right corner of the dashboard modules and you can edit the module contents or unpublish them:

 

Atum Joomla 4administrator module

 

With this very simple but powerful functionality you can now clean up that backed admin area and customize the view for individual users. Go ahead and remove everything that is not needed for a particular user and give them just the things they need to do their work:

 

Joe1 administrator dashboard

 

The Joe1 dashboard example shown here is simplified by making available only the things that Joe1 users will need to do their work. Unnecessary functionality has been hidden from the user and other helpful things are added to the dashboard.

The colours of the Joe1 dashboard have been changed to reflect the brand colours of the website to give it a familiar and customized look for the user. This part was done by adding a little CSS in the Atum template folder at:

https:// your-domain dot com/administrator/templates/atum/css/user.css.

Customizing the colours of the administrator template requires knowledge of CSS. The file with the styling in it that use to be named 'custom.css' in the admin template folder is now called 'user.css' instead. By adding a 'user.css' file to the Atum template's CSS directory your custom CSS is recognized by the template. But let's get back to the easier stuff.

 

A Combination of Easily Modified Admin Modules and Assigning Them to Specific User Groups With Access Levels is Where The Magic Comes In

 

To give a custom user experience you need to create user groups that provide access to specific content that will be assigned to the dashboard modules for those users. The customized modules will only show to the appropriate users when they login to the Atum dashboard.

At the top of the dashboard where you see 'Joe1 Stuff' is an Atum template position called 'customtop'. In this position I published a custom module and inserted the message you see across the top. You can put all kinds of useful things in there for the Joe1 user. The module is assigned to user group 'Joe1' so when Joe1 users login to the back end they are the only ones seeing this module.

On the left side of the template I added another custom module in the 'menu' position. In that module I put handy links for Joe1 user. For this particular module I left the user group as 'Public' so all the different users can view this information since it is intended to be global and useful to everyone who works in the back end dashboard area. There are links to my client support website ticketing system, an email link and phone number. Again, there's all kinds of things you can do here, just think of what will be helpful to the user.

The main area has a module I titled 'Shortcust cPanel Joe1' with just the items that Joe1 users need. Assuming that all Joe1 users write articles for the website I gave the them a button to create a new article, and also one that will automatically open a new article with the blog category already selected.

To the right of that I published another custom module with a high contrast green background with instructions specifically for Joe1 users. Only Joe1 Group assigned users will see this module.

Finally below these two modules is a module that shows only the articles created by the specific user logged into the dashboard. There's no need to assign this module to a group as the Joomla system takes care of things here selecting only the appropriate articles to display for each user.

This makes for a nice uncluttered user experience for the Joe1 user. Now let's look at another dashboard for Joe2 users:

 

Joe2 administrator dashboard

 

The 'Shortcuts cPanel Joe2' has two different buttons than Joe1 has. There's different messages on the customtop and green module to the right. The 'My Articles' is now only showing Joe2 articles.

These are really simple customizations but imagine what you can do to customize the user experience for yourself or your clients. For me this will be the most used and immediately noticeable improvement for my Joomla 4 clients.

 

Don't Forget to Customize the Login Screen Too!

 

Below are two different backend login screens for Joomla 4. One is the Joomla.com login and the other is customized with The Joe Sonne Group brand colours. There's different messages, colours and logos on these two login screens. The logo image and brand name can be done in the Atum Administrator template Colour and Image Settings. This is found in the System Dashboard of your Joomla 4 admin area. Additional enhancements can be made via CSS in the user.css file of the Atum template. On the left column of the login screen a language override was used for the administrator template. Additional text was added to the bottom left area that says 'Need Support?' I added 'The Joe Sonne Client Support Site' link along with the other links already there using a module override. Even if you don't change the login screen, be sure to customize the admin dashboard to give yourself and your clients a truly customized user experience. This will make publishing content with your Joomla 4 website a joy.

 

Click on the image to pop up a larger view.

Two different Joomla 4 Admin Login screens

 

 
Go To Top