Since version 1.3.6 Showtags includes a fully overridable system that allows the user fully customize its appearence.

1Customize CSS

Showtags includes a basic CSS file (23 lines) to assign a default appearence to tags. You can customize the CSS in two ways:

1.1. Redefine some CSS rules in your template CSS

You like the global tags appearence but you want to change tags background color, font family ...

In your CSS just redefine the CSS property that you want to change. For example to change background color to red we will add to our template CSS:

.content-showtags a {
  background-color: #FF0000;
}

In the Showtags configuration you can also add a custom CSS class that will be added to the tags main parent. For example you can add the class "mytags" and then in your CSS use:

.mytags a {
	background-color: #FF0000;
}

1.2. Create an override for the showtags CSS file in your template folder.

If you prefer to fully redefine all the Showtags CSS you only have to create a CSS file in your template folder at:

/templates/YOUR_TEMPLATE/css/plg_content_showtags/showtags.css

The plugin will detect and load it instead of the default file located at:

/media/plg_content_showtags/css/showtags.css

Note that you can also create an empty showtags.css file to define all the styles in your template CSS.

2Customize HTML

The new overrides system will also check for layouts overrides in your template folder. That allows to fully customize the markup of the plugin.

You only have to copy the folder:

/plugins/content/showtags/tmpl

To:

/templates/YOUR_TEMPLATE/html/plg_content_showtags

And then edit the files in the new folder to customize the HTML code.

The file:

/templates/YOUR_TEMPLATE/html/plg_content_showtags/default_ulli.php

will be loaded if you select the "Format" "Unordered list" in the plugin settings.

The file:

/templates/YOUR_TEMPLATE/html/plg_content_showtags/default_ulli.php

will be loaded if you select the "Format" "Word list" in the plugin settings.

That's it! You can now fully adapt Showtags to your template.