It is still 1 1/2 years before Joomla 3 will cease to receive updates, but as Joomla 4 has now reached a reasonable stability, I guess it is time to move forward.
In this post I will describe what approach I went for and which hurdles I found. It may be helpful for others - and it certainly is helpful for me to get my thoughts sorted :-)
To start with, I decided to do the upgrade of the site in a duplicate on a virtual server. This way I could learn and experiment and easily roll back if I needed to, all while the original site was kept alive and kicking.
To create the copy of the site I used the free software Akeeba Backup and its counterpart Akeeba Kickstarter to restore the backup on my virtual machine. Akeeba have really good documentation and even a video of the process: https://www.akeeba.com/videos/1212-akeeba-backup/1618-abtc04-restore-site-new-server.html#akeebaVideoTutorialPlayer
With the copy of the site, the first step is to upgrade to the latest version of Joomla 3. This should not really be necessary, as I trust everyone to always be on the latest version, right? Right?! ;-)
Then switch your upgrade option to "Next Version" and you will find the upgrade to Joomla 4. It checks all prerequisites and extensions. For me, it listed two extensions that might cause problems when upgrading, so I disabled them. After the upgrade I was able to re-enable them without any problems. Not everyone might be that lucky, but if you stick to well-maintained extensions, your chances of success are high.
OK, upgrade done, backend running fine, how about the frontend? Well ... it reported an error and did not display my site.
The culprit was quickly identified: I had been using the Favourite template, which is not maintained any longer and does not support Joomla 4. I decided to go with the new built-in template named Cassiopeia. I do not feel very comfortable about this step, because the free version of Cassiopeia will not receive any future updates. If you want updates, you need to pay for the pro version. I do get that developers need to make money, but there should be at least one free and maintained option. Fewer features, fine, but no updates (security) - bummer.
Anyway, the site has no budget, so I went along.
After switching the template, the error was gone and the site got rendered. As expected, it looked pretty ugly, because all my styling was gone.
Before I continue, I should mention that I love the new backend! It is very clean and it does not take too long to find all the things you need. It does take some getting-used-to though.
Back to getting the site to look better.
First, all the site module needed to be allocated to the right positions in the template. The late Favourite template was a mess in this regard, so I had to move a lot of modules.
Great, now I had my main content, the sides, and even the menu. I had to enable an option to make the menu a drop-down menu. Easy, once you figure that out.
Next, all my menu icons had gone, or rather, they appeared as boxes instead of icons.
It took me long enough to figure out that the new FontAwesone 5 was the culprit. The class names had changed a bit. After fixing that, I found that the icons themselves had changed more that "a bit". They were fat and ugly. In order to get what I wanted, I would have had to go for the paid version of FontAwesome. Yes, there is a paid version now.
After extensive searching and trying different iconic fonts, I ended up using https://iconmonstr.com/ The creator does not even require attribution, but he/she deserves it and will be named on the site.
Now I had to install the CSS and font locally, because I do not want my visitors to be tracked by any 3rd party. If you install the CSS under media/templates/site/cassiopeia/css and the fonts under media/templates/site/cassiopeia/fonts, they will not be overridden by any future updates of the template. We know there will not be any, but better be safe than sorry.
Finally, create a user.css under media/templates/site/cassiopeia/css and include the CSS file for the font from there.
If you want to add a custom JavaScript as well, just create media/templates/site/cassiopeia/js/user.js.
I had to create these file using the cli on the server. Afterwards they can be managed through the backend. Maybe there is a way to also create these files in the backend, but I could not figure it out. They would end up in the wrong location and thus be candidates to be overwritten by an update.
Now I only had to add the correct "Link Icon Class" to each menu item. In Joomla 3 there was only a "Link Class", now it is separate for the icon, which is great.
I had to replace a few icons because the new font is not as extensive as FontAwesome. It was easy enough to find appropriate replacements.
Once this was done, all that was left was the styling of the site, which goes into user.css.
"All that was left"? Oh my! New template, new HTML, new classes. Pretty standard work, but it takes ages ... I am still working on it.
If you want a hamburger menu on mobile phones, use "Collapsible Dropdown" as your menu style. I had "Dropdown" only and was disappointed, starting to bitch and moan here - good thing I reasearched this before writing bad comments here. As every so often, the problem was between the chair and the keyboard ;-) As I said above, if this post does not help anyone else, it sure helps me. It just did :-)
To be continued ...
A really good article to read: https://magazine.joomla.org/all-issues/february-2022/joomla-4-cassiopeia-template-a-bunch-of-tips-tricks
