Joomla! Documentation™

Joomla! 

5.x

series

Description

This feature allows users to easily add CSS classes to links directly from the tinyMCE editor. Whether you're looking to apply specific styles or transform links into interactive elements like buttons, this option significantly simplifies the process of customizing links in your articles. It eliminates the need to manually edit the source code, enabling users to quickly apply predefined styles or add advanced visual effects. Users can select from a range of predefined classes, such as those from Bootstrap, to enhance the appearance and interaction of links. This provides a way to enrich link formatting without having to modify HTML code directly.

Enhance Link Styling with the Class Selector

Starting from Joomla 5.2, you can now easily add custom CSS classes to links using the tinyMCE editor. This new feature allows you to style your links without directly editing the source code of your articles. By adding Bootstrap classes, for example, you can quickly transform a link into a button or add specific visual effects. Here’s a guide to help you make the most of this new option.

Steps to Use the Class Selector

1. Access the tinyMCE configuration: Go to the tinyMCE editor configuration and open the "Advanced" tab.
2. Add classes to the dropdown: In the "Advanced" tab, you can add CSS classes that you want to use for styling your links. For instance, Bootstrap classes to create stylish buttons.

You can find examples for templates that natively use Bootstrap in the official documentation:  
Bootstrap Documentation

Here are some classes you can use for Bootstrap button variants:

• btn btn-primary for a primary button
• btn btn-secondary for a secondary button
• btn btn-success for a success button
• btn btn-danger for a danger button
• btn btn-warning for a warning button
• btn btn-info for an info button
• btn btn-light for a light button
• btn btn-dark for a dark button
• btn btn-link for a link button

Outline Button Alternatives

You can also use the outline button variants:

• btn btn-outline-primary for an outlined primary button
• btn btn-outline-secondary for an outlined secondary button
• … (etc.)

For button sizes, add these classes

• btn-lg for a large button
• btn-sm for a small button

Example: btn btn-dark btn-lg (a large dark button)

Create a link in an article

Open an article and create a link. At the bottom of the link creation dialog, you will see an option to select the configured classes.

Advanced Use: Applying Custom Classes

This feature isn’t limited to Bootstrap classes. You can also apply your own custom CSS classes for specific needs. For example, you can add an icon before the link with a hover effect. This makes it easy to style links without needing to modify the article's source code.

Note on the Feature's Origin

This feature was added in Joomla 5.2 via PR #43260.