Customising the Joomla Login

Most Joomla administrators never give their login pages a second thought. They leave the default colours, logos and messages in place, even though these screens are often the first thing a client or contributor sees. With a few minutes’ work you can make the login experience feel like part of your brand and guide users to where you want them to go. This article explains how to customise colours, replace the logo and add text so users feel welcomed and confident. We show how to tweak buttons and messages.

  • A login page is more than a door – it’s your lobby. A little personalisation goes a long way towards making a first impression – and making users feel at home.

    Why bother customising your login screen?

    The default Joomla login pages – both for the site front‑end and the administrator area – do their job just fine. But there are sound reasons to personalise them:

    • Brand consistency – adding your colours and logo carries your identity through to the login experience.
    • User confidence – bespoke messages and familiar design reassure staff and clients they’re in the right place.
    • Guidance – after login you can direct users to an appropriate page rather than dropping them on the homepage.
    • Professional polish – small details such as removing the generic “Need support?” message make a site feel cared for.

    Tailoring the administrator login screen

    Joomla 5 (and Joomla 4 before it) uses the Atum template for the back‑end. Its settings let you alter colours, logos and text with point‑and‑click controls.

    1. Change colours and logos

    • System → Templates → Administrator Template Styles. Open the Atum – Default entry and explore the Colour Settings tab. Adjust the link colour and other palette options to match your brand.
    • Image Settings. Upload a custom Login logo to replace the Joomla logo above the form. There are also slots for large and small branding images; ideal sizes are around 150 × 30 px and 20 × 20 px.

    2. Edit the login text

    That “Joomla Administrator Login” heading on the left panel isn’t set in stone. To change it:

    • System → Language Overrides. Choose your language (for example, English (United Kingdom)) and click New.
    • Search for TPL_ATUM_BACKEND_LOGIN, select the result and replace the default text with your own phrase – perhaps “Welcome back” or your company name.
    • Save and close. Refresh the login page to see your new message.

    3. Tidy up the support area

    The lower‑right sidebar often contains a generic “Need support?” link. To replace it with something useful:

    • Content → Administrator Modules. Search for the module called Login Support and unpublish it.
    • Create a new Custom Module, give it a title (you can hide the title), choose the Sidebar position and enter your own text or links. This could be a support email, a link to your main site, or even a friendly greeting.
    • Save, close and admire a login screen that now speaks your language.

    4. Go further with CSS

    If you want to fine‑tune fonts, spacing or layouts beyond what Atum offers, create a user.css file inside the template’s CSS folder. Any classes you add here will override the defaults. For example, you could enlarge the login button or round its corners. Just remember to test any changes in multiple browsers.

    Revamping the front‑end login module

    Visitors log in through the Login module, which appears in your site’s sidebar or other position. By default it looks plain. Here’s how to give it some style without changing core files.

    1. Create an override and style the form

    • System → Templates → Site Templates. Select your template and open the Create Overrides tab. Click mod_login to generate a copy of the module’s output.
    • Navigate to HTML → mod_login → default.php within your override. Add Bootstrap classes such as fw-bold and fs‑4 to the pre‑text element to make it stand out. Add pb‑2 (padding bottom) to the user data div for breathing space.
    • Change the login button’s class from btn-primary to btn-dark or another colour class to suit your theme, and insert a clear “Register” button underneath the form so that new users can find the sign‑up link easily.

    These tweaks are optional, but they transform a basic form into something inviting and purposeful. The key is to stick to Bootstrap classes where possible – Joomla uses Bootstrap by default, so you benefit from well‑tested styles without writing custom CSS.

    2. Apply the override

    Once your override is saved, head over to Content → Site Modules, open your Login module, and in the Advanced tab choose your new layout from the drop‑down list. You can also set the pre‑text (“Welcome back”) and post‑text (“New here?”) to display at the top and bottom of the form. Save and refresh your site: your redesigned login box should appear.

    3. Best practices

    • Make a copy of default.php instead of editing it directly. That way you can fall back to the original if needed.
    • Use hyphens in override file names – Joomla won’t show underscores in the layout selector.
    • Stick to Bootstrap classes where possible. They’re consistent across Joomla templates and reduce the need for custom CSS.
    • Test thoroughly. Create overrides on a staging site first so you don’t lock yourself out of your own site.

    Redirecting users for a smoother journey

    By default, logging in takes your users to the site’s home page. That might be fine, but often you want them to land somewhere more useful – perhaps an account dashboard or a protected download area. Joomla gives you two simple ways to control where users go after logging in or out.

    1. Use a login menu item

    Create a new menu item of type Users → Login Form in your main menu. Set its Access level to Guest so it only appears when someone isn’t logged in, and choose a target page in the Login Redirection Page field. When a user logs in via this link they’ll be sent straight to the page you picked. A matching Logout menu item (with Access set to Registered) gives users an obvious way to sign out.

    2. Configure the Login module

    Alternatively, open your Login module and set the Login Redirection Page and Logout Redirection Page options to pages of your choice. Place the module somewhere visible – top right works well – and assign it to pages where you want the login box to appear. To show a logout button on every page, create a second Login module with its Access level set to Registered, position it consistently and assign it to all pages except those where the login box appears.

    Additional tips and considerations

    • Accessibility – when changing colours, maintain contrast so text remains readable. Use clear labels and avoid removing password reset links.
    • Security – don’t reveal unnecessary information on the login page. Keep your site up to date and ensure that custom modules don’t bypass Joomla’s authentication system.
    • Version differences – the steps described above apply to Joomla 5 and Joomla 4. Earlier versions use different templates, so the paths may vary.
    • Module assignments – remember that you can assign the login module to specific pages via the Menu Assignment tab. This is handy if you only want a login box on certain pages.

    If you’re ever locked out after experimenting with overrides, use Joomla’s recovery mode or rename the offending override file via FTP to regain access.

    Our agency’s view

    Customising the login page isn’t high-impact, but it shows that you care about the details. Pretty much every client we’ve worked for over the last couple of years was surprised to learn that you can swap out the blue Joomla branding for their own colours and logo, to makes the back‑end feel like part of your organisation rather than a generic CMS– and that it takes minutes rather than hours,

    We also recommend setting up sensible login redirects – send them straight to the dashboard or content section they use most. These small tweaks collectively make Joomla less confusing for non‑technical users and reduce support requests.


    Key takeaways

    • You can customise the admin login screen without installing extensions.
    • Language overrides let you replace generic headings with your own phrases.
    • Template overrides and Bootstrap classes transform the frontend login module.
    • Login/logout redirects improve user journeys and reduce confusion.

More Articles