Since version 1.3.6 Showtags includes a fully overridable system that allows the user fully customize its appearance.
1Customize CSS
Showtags includes a basic CSS file (23 lines) to assign a default appearance 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 appearance 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.