MX Shortcodes Documentation

The two plugins

Install and enable both plugins for the complete experience. They have separate roles:

• System - MX Shortcodes processes shortcode markup and renders the resulting content on public pages. Its settings, including Bootstrap loading and shortcode colours, are described below.
• Button Shortcode Generator (the MX Shortcodes editor button) adds a shortcode builder to supported Joomla content editors. It inserts shortcode markup into your content; it does not render the shortcode itself.

Using the shortcode button

1. Open an article or other content item and place the cursor in the editor where you want the shortcode.
2. Click the MX Shortcodes button, usually shown below the editor. Search for or choose a shortcode from the list.
3. Fill in the fields shown. For shortcodes with repeatable items, use the provided Add control to include more items.
4. Click Add Shortcode. The builder inserts the shortcode markup at the cursor; review it and add or edit any inner content as needed.

If the button is not available, check that Button Shortcode Generator is enabled and that the editor supports Joomla editor buttons. You can also type shortcode markup directly. The System - MX Shortcodes plugin must be enabled for that markup to be processed on public pages.

Writing shortcodes manually

Enter shortcode markup in the content editor. Use double quotes around attribute values. Tags with content need a matching closing tag; item tags are placed inside their parent shortcode.

[alert type="success"]Your changes have been saved.[/alert]
[divider margin_top="24px" margin_bottom="24px" /]

Shortcodes are processed on the public site in HTML pages. They are not rendered in the administrator editor preview. Avoid placing one shortcode inside another item's attribute value.

Shortcode index

Layout and navigation

Rows and columns

Each col becomes one column in its surrounding row. Use Bootstrap grid classes to control column widths and responsive behavior.

[row class="mb-3"]
  [col class="col-md-6"]First column[/col]
  [col class="col-md-6"]Second column[/col]
[/row]

Optional row attributes: id, class. The default column class is col.

Accordion

[accordion id="faq" version="1"]
  [accordion_item title="First question"]First answer.[/accordion_item]
  [accordion_item title="Second question"]Second answer.[/accordion_item]
[/accordion]

Attributes: id sets a base identifier; version accepts 1 or 2. The first panel starts open.

Tabs

[tab id="services" button="nav-tabs" class="tab"]
  [tab_item title="Design"]Design details.[/tab_item]
  [tab_item title="Support"]Support details.[/tab_item]
[/tab]

button accepts nav-tabs or nav-pills. Optional attributes are id and wrapper class. The first tab is selected initially.

Carousel

[carousel id="features"]
  [carousel_item src="/images/feature-one.jpg"]First feature[/carousel_item]
  [carousel_item src="/images/feature-two.jpg"]Second feature[/carousel_item]
[/carousel]

Each item can use an image src and optional caption text. An item without src can contain text or markup instead. Navigation controls appear when there is more than one item.

Content elements

Alerts and buttons

[alert type="warning" close="yes"]Please review this notice.[/alert]
[button type="success" size="large" link="/contact" target="_blank"]Contact us[/button]

Alert type: primary, secondary, success, danger, warning, info, light, or dark. close accepts yes to show a dismiss button; optional style adds inline CSS.

Button type also accepts link; size accepts small or large. Use link for the destination and target="_blank" to open it in a new tab.

Quote, testimonial, and typography

[blockquotes]A quotation from a source.[/blockquotes]
[testimonial name="Alex Lee" designation="Editor" email="This email address is being protected from spambots. You need JavaScript enabled to view it." version="1"]A customer quote.[/testimonial]
[dropcap]A paragraph beginning with a large initial letter.[/dropcap]
[block background="#f4f7f3" color="#202b2b" padding="16px" border="#086b59"]Highlighted content.[/block]
[blocknumber text="01" background="#086b59" color="#ffffff"]A numbered point.[/blocknumber]
[bubble author="Alex" background="#eeeeee"]A speech bubble.[/bubble]

testimonial attributes: name, designation, email, url, and version (1 or 2). A supplied url links the designation.

block supports background, color, padding, border, and type (rounded or circle). blocknumber supports text, background, color, type, size, and custom_size. bubble supports author, background, color, padding, border, and type.

Divider and icon

[divider margin_top="24px" margin_bottom="24px" border="1px solid #d6dfda" /]
[icon name="fa fa-star" size="24" color="#086b59" class="featured" /]

The icon's name is the Font Awesome icon name, with or without the fa fa- prefix. Optional attributes: size in pixels, color, and extra CSS class.

Media and progress

Gallery

[gallery columns="3" modal="yes" filter="yes"]
  [gallery_item src="local-images:gallery/item-one.jpg" tag="interior,featured"]First image[/gallery_item]
  [gallery_item src="/images/gallery/item-two.jpg" tag="featured"]Second image[/gallery_item]
[/gallery]

Gallery attributes: columns (1-6), modal (yes or no), and filter (yes or no). Each item needs a src; optional comma-separated tag values make filter buttons. Prefix a Joomla Media image path with local-images: to resolve it from the configured images directory.

Progress

[progressbar bar="68" text="Complete" type="success" striped="no" active="no" /]
[progresspie size="medium"]
  [progresspie_item label="Design" value="85" color="#086b59" /]
  [progresspie_item label="Build" value="62" color="#d4872c" /]
[/progresspie]

For a progress bar, bar is clamped to 0-100; type accepts Bootstrap contextual colors, and striped/active accept yes or no. For progress pies, size accepts small, medium, large, or custom; set custom_size with a CSS size such as 9rem. Each item accepts label, value, and a hex color.

Countdown

[countdown date="2027-01-01 00:00:00" size="large"]The event is now live.[/countdown]

The required date accepts a PHP-recognized date/time string. size accepts small, medium, large, or custom; custom sizes use custom_size such as 3rem. Enclosed text replaces the default "Countdown complete." message when the timer ends.

Video and map

[mxvideo height="360"]https://www.youtube.com/watch?v=VIDEO_ID[/mxvideo]
[mxmap lat="40.7128" lng="-74.0060" zoom="12" height="320" maptype="ROADMAP" /]

mxvideo accepts YouTube or Vimeo URLs and an optional iframe height. mxmap accepts latitude lat, longitude lng, zoom, pixel height, and Google Maps maptype (for example ROADMAP, SATELLITE, HYBRID, or TERRAIN).

Plugin settings