When working with Joomla 5, the default system messages (success, warning, error, notice) are functional but visually limited.
For projects built with YOOtheme Pro, it makes sense to leverage UIkit notifications to provide a cleaner, more modern user experience.
This article explains a lightweight Joomla override that replaces standard system messages with UIkit notifications, without plugins or core hacks.

Why replace Joomla system messages?

By default, Joomla displays messages inline in the page layout.
This has a few drawbacks:

• Messages push content down
• Styling is limited and inconsistent between templates
• No animation or auto-dismiss
• Poor UX on modern layouts

UIkit notifications solve these issues by offering:

• Floating messages
• Auto-close with timeout
• Close button (X)
• Consistent design Smooth animations

How it works?

Joomla renders system messages using a layout file:

layouts/joomla/system/message.php

Joomla allows templates to override layouts safely. This script replaces that layout and converts Joomla messages into:

UIkit.notification({
    message: "...",
    status: "success | warning | danger",
    pos: "top-center",
    timeout: 10000
});


No core files are modified.

Installation

Copy the file to your template override directory:

/templates/YOUR_TEMPLATE/html/layouts/joomla/system/message.php

Example for YOOtheme Pro:

/templates/yootheme_MY-TEMPLATE/html/layouts/joomla/system/message.php

(See Yootheme's help to activate the template.)
Create the folders if they don’t exist. That’s it.

Joomla will automatically use the override.