Tricks, tips and traps

  1. The IcoMoon fonts were distributed with Joomla 3.x and used with the Isis administrator template.  When J! 4.x was released, the developers decided to use FontAwesome fonts instead of IcoMoon.  That’s just a matter of history.  There could be any number of reasons why people might want to use IcoMoon fonts with Joomla 4.x{footnote}I used the IcoMoon font-family to create the content of the modal pop-up in the demonstration A simple pop-up modal.{/footnote} but doesn’t matter if we’re discussing IcoMoon fonts or any other font family:  the principles of self-hosted webfonts{footnote}see How to host your own webfonts{/footnote} are just the same and can be used with Cassiopeia or any other template.  This article will show you how to host any font you like and we’re using the IcoMoon font files included with Joomla 3.x as an example.

  2. There must be thousands of examples of modal popups used on websites these days{footnote}see https://www.webfx.com/blog/web-design/examples-of-modal-windows/ or https://bashooka.com/inspiration/modal-window-ui-designs/{/footnote}—often saturated with all kinds of features—demonstrating the inventiveness of their designers.  In addition to the many different kinds of popups{footnote}e.g. ones that open and close after a set amount of time, ones that open when you click a button or hover over an element, those that close when you click a gadget or press a key on a keyboard, ones that fly-in from the top/bottom or side, ones that fade in/out, ones that are located at the top/bottom or centred on the screen, etc.{/footnote} there are hundreds of techniques that people can use to generate them.

    When it comes time to reach into your “toolkit” and create a simple modal popup for your website (perhaps you will use the feature once or maybe you will use it in several places), we all know that you can waste hours of trial-and-error creating the most basic modal popup.  No-one is looking for perfection and, unless your business is to showcase your talent for design, you probably only need the most basic no-frills kind.  If you want something elaborate then this article may not be for you although you may get some ideas to take the basic design further.

    This article will show you how to create the simple,  “no frills” modal popup demonstrated in A simple pop-up modal on this site.  Most of the CSS already exists in the Cassiopeia template; it just needs a few tweaks.

  3. Are you confused by the “Web Authentication” option on the Joomla 4.x login screen? I saw this question posted on The Joomla Forum™:

    I want to hide the button for “web authentication” on the front end on the login page. [If I login normally and go to the user profile page I see] “W3C Web Authentication (WebAuthn) Login-W3C Web Authentication (WebAuthn) Login. No WebAuthn authenticator has been set up yet” I think it is confusing for a novice who tries to log in. How do I hide it?forum user, Joomla Forum, 25-Nov-2021

    The following points need to be kept in mind:

    1. People will not see the “web authentication” option on the login page unless the website uses HTTPS with a valid security certificate.  If you have just created a J! 4.x website using Wampserver for example, you may not see the option at all.
    2. The feature is not supported by all web browsers.
    3. The feature was not present in J! 4.0; the feature was added in J! 4.1.
    4. The feature is always present (even if you or your website users do not require it).
    5. In order to use the feature, you need to set up a “WebAuthn authenticator”.  What’s that, you may ask?  You can read all about it at WebAuthn Passwordless Login.

    Does all of this sound complicated?  Do I need it?  Relax.

  4. I saw an intriguing question posted on The Joomla Forum™ recently:

    I want a [horizontal] menu [in the footer] on the same level as the copyright.forum user, Joomla Forum, 20-Aug-2022

    While it‘s certainly possible to perform a CSS fiddle to display a menu module in this format, for example,

    footer nav.navbar {
        width: 60%;
    }
    footer nav.navbar ul {
        flex-direction: row;
    }
    footer nav.navbar ul li {
        padding: 0 1.25em 0 0;
    }

    There is an easier way{footnote}https://ltheme.com/use-the-menu-with-cassiopeia/ (search for the section on "Creating Horizontal Menu in the Header"){/footnote} by making two small changes in the menu module (see the screenshot below):

    Horizontal footer menu:  module settings

  5. A common experience{footnote}I couldn‘t tell you how often this problem occurs but the issue arises on The Joomla Forum™ about once a day.{/footnote} that people have after “successfully” updating from J! 3.10 to J! 4.0 is that their website breaks.  It doesn‘t happen all the time—i.e. every time people migrate from J! 3.x to J! 4.x—but it can catch people by surprise.  One of the most common reasons why websites will break is because their J! 3.10 site had one or more third-party extensions installed that used “deprecated code”{footnote}Further information about potential backward compatibility changes J! 4 may be found here:  Potential backward compatibility issues in Joomla 4{/footnote}.  If you didn‘t install any third-party extensions then you can ignore the rest of this topic{footnote} If you have not installed any third-party extensions in J! 3.10 then your migration to J! 4 should proceed successfully but there may be factors that do not involve “deprecated code”.{/footnote}.