logo wide 2000x350

I have been using and teaching courses in Joomla CMS ever since 2008. I am certain that Joomla is by far the best and most well organized CMS in existence. My sincere gratitude goes out to the Joomla Development Team for all that you have done during the past 12 years. I have spent the past month testing Joomla 4 Beta 5 and it has been a wonderful experience. I really like nearly all of the improvements over Joomla 3. In particular, I am very excited about using CSS Grid and the new Joomla Workflow – both of which will make adding and displaying web content easier than ever.

As part of learning about potential problems with Joomla 4, I spent hours reviewing thousands of posts and comments about Joomla 4 on the Joomla 4 Forum. You can read these posts at this link: https://forum.joomla.org/viewforum.php?f=803&sid=a2e51f0bb439aa62b9b8140ee89629c7

Each post has a few comments and about 1000 views. However, there is one post with 418 comments and almost 400,000 views! The 418 comments are basically a series of complaints about the new Joomla 4 Admin template called Atum. Here is the Atum Dashboard:

01

There are 9 modules displayed in the main area plus a Main Menu in the sidebar (with 30 links) and 5 more links in the top bar. The System menu item has 31 more links. Many you will never use.

In this article, we will review solutions for 5 of the most common complaints about the Joomla 4 Atum Admin template. But before we begin I want to stress that I am not proposing that any changes be made to the Atum template. I think the new Atum template is much better and more flexible that the Joomla 3 Admin template. In fact, it is more flexible than any Dashboard template I have ever worked with – and I have been building websites for more than 20 years.

Instead, the purpose of this article is to summarize a series of steps that can be made to address complaints about the Atum template – easy steps that you can take if you are not happy with the appearance or structure of the Atum template. Even if you are happy with the Atum template, following along with this tutorial can be a good introduction to the Atum template and a great way to learn more about how it works.

Here are five of the most common complaints about the Joomla 4 Admin template and how we will solve them:

#1 The Atum template dashboard is too complex and confusing for beginners.
Simplicity is an important issue. As a teacher, the simpler I can make Joomla, the more successful my students will be. We will review how to hide a bunch of stuff to make the Atum Dashboard less complex.

#2 The Atum template menu structure is too different from the Joomla 3 Admin template menu structure.
The Joomla 3 menu structure was easier to understand than the new Joomla 4 menu structure. We will therefore review how to make the Atum menu structure more like the Joomla 3 Admin menu structure.

#3 The Atum template dashboard is not very colorful.
As a teacher, I use colors to help students learn about various parts of a program. Some people just like looking at their favorite colors when staring at a computer monitor all day. We will show you several ways to add as many colors as you want to the Atum dashboard.

#4 The Atum template side menu and quick launch icons take up too much space.
Space is an important issue. Every pixel counts. As a teacher, I encourage my students to build their websites using side by side editing. This means first building your website with a text and images editing program like Libre Writer and then transferring it to Joomla using a browser screen which is open next to your Libre Writer screen. Assuming you are working on a 15 inch laptop with a width of 1980 pixels, and that your Writer screen takes up 900 pixels, this only leaves 1080 pixels for your web browser displaying the Atum dashboard. We will show you how to make Atum more compact.

#5 Many people want to replace the Joomla 4 Atum Side Menu with a return to the Joomla 3 Top Menu
We will show you how to do this in less than one minute. In fact, all of these tasks can be accomplished in less time than it takes to read this article! Now that we understand the plan, let’s go through the actual steps.

#1 Making the Atum template dashboard less complex
Having less stuff on the dashboard allows you to focus your attention on what really matters. It also gives beginners more confidence that they can actually learn how to use Joomla. This is why one of my first steps in helping students build a Joomla website is to help them hide a bunch of stuff on the Admin Dashboard. In Joomla 3, this process required going to the Module Manager and clicking on Administrator and then unpublishing several Admin modules. In Joomla 4, this process is even easier – because there is now a setting wheel icon in the upper right corner of each Admin module allowing you to either Edit the Module or unpublish it completely.

02

I recommend unpublishing all of the Admin Modules on the Control Panel (main work area) with the exception of the Site module.

For the Site module, click on Edit and change the name to Site Quick Icons. Then scroll down the screen and add 3 more Quick Icons to the 6 already shown - resulting in the following 9 icons: User, Articles, Modules, Categories, Media, Menu Items, Plugins, Template Styles and Template Code. Then click Save and Close. Here is the end result:

03

Now click on Add module to dashboard and select the Custom Module. For the title, type in Tips and Reminders. Type in advice for your clients or students. Then click Save and Close:

04

Simplify the Top Bar
In the top bar, we really do not need 3 of the 5 icon links. To unpublish these, click Modules, then change from Site to Administrator. Change the location from Cpanel to Status. Then check Joomla version, Post Install Messages and Messages. Then click Actions, Unpublish. Then click Home Dashboard to go back to your Dashboard.

05

This is a much easier interface for helping students and clients learn how to use Joomla.

#2 Make the Atum template menu structure similar to the Joomla 3 Admin template menu structure.

By default, the new Atum Side Bar Main Menu has these 6 top level links:

06

The biggest problem with this new menu is the 31 links hidden behind the System menu item. Thankfully, there is a very easy way to change the Joomla 4 main menu to look similar to the Joomla 3 main menu. Go to Modules, Administrator and change the location to Menu. Then click on the Admin Menu to open it.

07

Use the drop down arrow to change the Preset from Joomla Main Menu to Alternative Main Menu. Then click Save and Close and go back to your Home Dashboard. Here is the Alternative Menu in the Side Bar.

08

It is nearly identical to the Joomla 3 menu. There are 8 top level menu items. And no top level menu item has more than 11 second level menu items. That was easy!

#3 Make the Atum template dashboard more colorful.
The Joomla 4 Atum template comes with a very easy way to change colors. Just click Template Styles. Change from Site to Administrator template. Then click on Atum to open it. Then click on the Color Settings tab:

09

You like Green? Change the dark background color to 102 (it is not hexadecimal) and the light background to #eeffee (which is hexadecimal). Then change the Special Color to #339933. Then click Save and view the dashboard.

10

We can also change the logo to our own logo. We need to create and load 3 images to our Media Manager. These should be 300 x 60 logo with icon and text, 100x100 brand-small and 180x100 login icon. Then go to Template Styles, Administrator, Atum Edit, Image Setting tab:

11

Add the images and the alt text. Then click Save and Close. Sadly, the Atum color picker will not allow me to change the top panel background color to a light blue color match by new logo:

12

Use CSS to change the color of anything you want
We will therefore create a user.css file in our Atum template CSS folder. Go to Template Code. Change from Site to Administrator. Then click on Atum to open it. Then click on New File.

13

Type in user. Select .css for Type and click on CSS for location. Then click Create. Then add the following to your user.css file:

.header {background-color: #3388cc;}

Then click Save and Close. Then clear the Joomla cache and browser cache. Here is our new custom top bar:

14

Want even more colors? Add these to your custom.css file to change the Control Panel background and the left sidebar background.

#wrapper {

background-color: #eeffee;}

.sidebar-wrapper {

background-color: #ddeeff;}

Add Color to the Site Quick Icons

Add these lines to your custom.css file to improve the appearance of your Site Quick Icons:

.card-body {

background-color: #eeeeff;}

.com_cpanel .card-header {

background-color: #ddeeff;

border-bottom: 1px solid #555599; }

.quick-icons {

background-color: #eeeeff;}

.quick-icons .quickicon a {

background-color: #ddeeff;

border: 1px solid #555599;}

Then clear the Joomla and browser cache. Here is the result:

15

#4 CSS to make the Atum template side menu and quick launch icons more compact

Here is some CSS to make the display more compact. The two boxes in the Joomla 4 control panel are both grid elements set for a width of 45% of the available space. With CSS Grid, we need to change the CSS on the Parent Element. Here is the default CSS:

.card-columns {

display: grid;

grid-template-columns: 1fr 1fr;

grid-gap: 0 15px;

column-count: 3;}

We will change this by adding the following to our user.css file:

.card-columns {

display: grid;

grid-template-columns: 2fr 1fr;

grid-gap: 0 15px;

column-count: 3;}

This will make the first column (the Site Quick Icons) twice as wide as the second column (Tips and Reminders). Then clear the cache. This gives our Quick Icons more room:

16

Make the Side Menu more compact
As you can see above, the side menu is way too wide. This is pretty easy to fix. Add the following 7 lines to our user.css.

.main-nav-container {max-width: 12rem;}

#sidebarmenu {max-width: 12rem;}

.sidebar-wrapper, .item-level-1 { max-width: 12rem; }

.sidebar-wrapper .sidebar-menu {

flex: 1 0 12rem;

flex-basis: 12rem;

max-width: 12rem;}

Then clear the cache. Here is the result.

17

CSS to allow for Side by Side Editing
One of the most important web building skills I teach my students is using Side by Side Editing. This process involves using a text and image editor like Libre Writer to create the content for your website. Then having a web browser open to your Joomla Dashboard next to the Libre Writer workspace to copy and paste content from your Writer document to your Joomla website dashboard. Here is what side by side editing looks like on a 15 inch laptop screen.

18

The problem is that with a laptop screen width of 1980 pixels, and subtracting 900 pixels for our Writer document, only 1080 pixels are left for our Joomla Dashboard. The problem is that Atum collapses the rows of Site Quick Icons too soon.

By default, at a browser screen width of 1360 pixels and above, the Atum Dashboard shows what it calls the XL layout with 3 Site Quick Icons per row.

At a browser screen from 940 pixels to 1350 pixels, the Atum Dashboard uses a Large Layout and shows 2 Quick Icons per row.

19

At a browser screen width from 765 pixels to 930 pixels, the Atum Dashboard uses a Medium Layout which only shows 1 Site Quick Icon per row.

20

At browser screen widths from 575 to 760 pixels, the Atum Dashboard uses a Small Layout which (ironically) displays 3 Quick Icons per row again (but with the side menu now collapsed)!

21

At browser screen widths under 575 pixels, the Dashboard displays an XS layout with 2 quick icons per row and the Main Menu hidden in a circle in the lower right corner that pops up the menu when clicked.

22

In order to make it easier to do side by side editing, we want to display the Large 2 icon layout on Medium screen widths and the XL 3 icon layout on Large screen widths. Moving the Main Side Menu left and the Custom Tips menu right will give us more room to display the Site Quick Icons as the browser screen width is made narrower.

Switching from Display CSS Grid to Display Flex
Quick Icons are all in a Display: Flex; group. This means the number of icons per row is controlled by the CSS for the Child item (rather than being controlled by the parent element as it the case with CSS Grid). There are two different kinds of Quick Icons (with or without the plus sign). The class for each child icon with a plus sign is .quick-icons .quickicon-group. The class for each child icon without a plus sign is .quick-icons .quickicon-single. As we may want to later display these two types of icons differently, we will have CSS Flex sections for each class. Here is the CSS we add to user.css for two icons per row above 700px and 3 icons per row when the browser screen is greater than 900px:

@media (min-width: 700px) {

.quick-icons .quickicon-group {

flex: 1 1 calc(50% - 1rem);

width: calc(50% - 1rem);

max-width: calc(50% - 1rem);}

.quick-icons .quickicon-single {

flex: 1 1 calc(50% - 1rem);

width: calc(50% - 1rem);

max-width: calc(50% - 1rem);}}

@media (min-width:900px) {

.quick-icons .quickicon-group {

flex: 1 1 calc(33.333% - 1rem);

width: calc(33.333% - 1rem);

max-width: calc(33.333% - 1rem);}

.quick-icons .quickicon-single {

flex: 1 1 calc(33.333% - 1rem);

width: calc(33.333% - 1rem);

max-width: calc(33.333% - 1rem);}}

@media (max-width:1350px) {

.quick-icons .quickicon-group {

flex: 1 1 calc(33.333% - 1rem);

width: calc(33.333% - 1rem);

max-width: calc(33.333% - 1rem);}

.quick-icons .quickicon-single {

flex: 1 1 calc(33.333% - 1rem);

width: calc(33.333% - 1rem);

max-width: calc(33.333% - 1rem);}}

The above CSS does not work as well as expected. A review of the Atum template.css file (which is nearly 10,000 lines long) reveals several potential conflicts. We add the following CSS to our user.css file in an attempt to resolve these conflicts:

:root { --breakpoint-md: 576px;

--breakpoint-lg: 768px;

--breakpoint-xl: 992px;}

body { min-width: 768px !important; }

.container { min-width: 768px !important; }

@media (min-width: 576px) {.container, .container-sm .container-md {max-width: 540px; } }

@media (min-width: 768px) { .container, .container-sm, .container-md .container-lg { max-width: 720px; } }

@media (min-width: 992px) {.container, .container-sm, .container-md, .container-lg .container-xl {max-width: 960px; } }

@media (min-width: 1200px) {

.container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; } }

Then clear the browser cache. Here is the end result on a screen width 1000px:

23

How to display screen widths with the Firefox Browser
For Firefox to show the screen width in pixels, display the Firefox Menu Bar. Then in this top menu, click on Tools, Web Developer, Inspector. Then go to the Customize, Settings page and check "Toggle rulers for the page" under Available Toolbox Buttons.

24

Then this icon appears in the upper right corner of the Inspector:

25

Click on the right angle icon to display the screen width in pixels (you can then adjust the screen width while still having the inspector open and watch when the display changes).

#5 How to replace the Joomla 4 Side Menu with the Joomla 3 Horizontal Top Menu
Several people on the Joomla 4 forum preferred the Joomla 3 horizontal Main top menu over the Joomla 4 vertical side Main menu. If you are one of them, there is good news. There is now an extension on the Joomla Extensions Directory that turns the main menu back into a horizontal top menu. Here is a link to this extension: https://extensions.joomla.org/extension/phoca-top-menu/

Install the extension. Then go to the Module Manager and change the display from Site to Administrator. Then publish the Phoca Top Menu Module in the Custom Top position using the Alternative Main Menu.

Then unpublish the Admin Main Menu that is in the Sidebar and change the following in user.css (about line 70):

#sidebarmenu {max-width: 0rem;}

and add these lines:

.navbar-toggler { line-height: 0;}

.navbar-toggler-icon {width: 0em;}

.sidebar-wrapper .item > a {height: 0px;}

.sidebar-wrapper .item-level-1 > a {font-size: 0rem;}

Then clear the cache. Here is what this Top Menu extension looks like in the Joomla 4 Dashboard:

26

Getting rid of the Side Menu and replacing it with a top menu really makes it easier to narrow the screen to do Side by Side Editing.

Bonus: Customize the Joomla 4 Administrator Login Page
The Joomla 4 Administrator login page comes with a module with links in the lower left corner. You now have the option to replace this Login Information module with your own custom module. Just go to Modules, Administrator. Find the Login Support module and unpublish it. Then click New and choose a Custom Module. Change the module name to Log In Advice. Then add whatever text you want. If you have installed the JCE Editor, you can even add images to your Log In Advice module. Here is what the Joomla 4 Administrator Log in screen looks like after all of these changes.

27

An Offer You Can’t Refuse… Get my user.css file for FREE!
OK. So if you know a little CSS, you can convert your dull complex Atum Dashboard into a simple colorful Joomla 3 Dashboard in less time than it takes to read this article. But what if you do not know CSS and you do not want to learn CSS? Well… have I got a deal for you. Once Joomla 4 Stable is finally released (sometime in 2021), I will post a user.css file with all of these changes in a link on the Joomla 4 forum. You can then use this CSS file to copy paste into your own user.css file. In less than one minute, you will have the Joomla Dashboard you have always wanted – for absolutely free!

So let’s stop complaining and start promoting the benefits of Joomla 4. The new Joomla 4 front end template, Cassiopeia, is fantastic – and way better than the Joomla 3 Protostar template. Just look at all of these module positions:

28

And with Joomla 4 support for CSS Grid, you no longer even need most of these module positions.

How to try Joomla 4 Beta yourself
It is much easier to install Joomla 4 in a test environment than it was with Joomla 3 because Joomla 4 will automatically install the database for you. Just install XAMPP on your laptop and then download the Joomla 4 zipped folder, transfer it to the XAMPP htdocs folder, unzip it, change the permissions to 777 and start up the XAMPP server. Then open a browser and go to localhost/whatever-the-name-of-your-Joomla-folder is.

Here is a link to the latest nightly builds of Joomla 4. https://developer.joomla.org/nightly-builds.html

Here is the link to the Github page if you want to follow the progress of Joomla 4 development: https://github.com/joomla/joomla-cms/tree/4.0-dev

Here is a link to the change log: https://github.com/joomla/joomla-cms/commits/4.0-dev

You can see that there are improvements being added to Joomla 4 every day. It looks like there are over 12,000 differences between Joomla 4 and Joomla 3.9.

Thanks to the new Joomla 4 installer basically making your database for you, you can install a new version of Joomla 4 in under 2 minutes! If you have any questions or comments about Joomla 4, here is a link to the Joomla 4 forum:

forum.joomla.org/viewforum.php?f=803&sid=a2e51f0bb439aa62b9b8140ee89629c7

Regards,

David Spring M. Ed.

https://createyourowninteractivewebsite.com/