This guide will show you how to select the colors of displays in the Tag Groups plugin. We’ll cover the default themes and also show how to make your own customizations.
Default Themes #
If you want to change the style of the tabs or the accordion panels, you simply select one of the bundled themes that you find in the Tag Groups settings, Front End, Themes and Appearance.
Tag Groups Pro comes with a few standard themes that you can use to give some shape and color to your tags. You apply a theme by using its class name for the enclosing element – “div class” or “table class”.
Example of a shortcode:
The corresponding parameter is also available in the Gutenberg blocks.
The color is applied to the “prepend” and “append” elements.
tag-groups-theme-green tag-groups-theme-blue tag-groups-theme-red tag-groups-theme-orange tag-groups-theme-black tag-groups-theme-darkred tag-groups-theme-midnightblue tag-groups-theme-slategray
This screenshot below is an example using the “green” theme:
We also adapted styling created by Dimox after a design by Orman Clark. You can use it with the class name
tag-groups-theme-tag-with-hole
Since the tag size is fixed, the maximum font size should not exceed 18px. The cloud looks best if all tag labels have the same height.
Shuffle Box Themes #
For the Shuffle Box feature, you can use the following class names. The color will also be applied to the buttons.
cm-shuffle-box-theme-default (Slategray) cm-shuffle-box-theme-blue
Here’s an example of this theme with shortcode:
Accordion Tag Cloud Add Terms Alphabetical List Alphabetical Tag Cloud Alphabetical Tag Index Artificial Intelligence Auto Links Auto Terms bbPress Topics Categories Create Terms Current Post Custom Taxonomies Custom URL Dandelion API default category Delete Terms Delete Unused Terms Display Gutenberg Hidden Terms IBM Watson Linked Terms Manage Terms Media Tags Merge Terms Open Calais OpenAI Parent Categories Post Filter Post List Posts Screen Private Taxonomies Related Posts Remove Terms Rename Terms Schedule Auto Terms Simple Tags Suggest Terms Synonyms Tag Cloud Tag Groups Tags Taxonomy Archives TaxoPress TaxoPress Pro Term Description Term Meta Term Order Term Slugs Terms Display Terms for Current Post Terms Screen Uncategorized category Understanding Content WooCommerce WooCommerce Product Categories WooCommerce Product Tags WordPress API WordPress Categories WordPress Search
Click here for more details on Shuffle Box themes.
Further CSS Customization #
Advanced users with some knowledge of CSS can simply copy the corresponding lines from the file /css/frontend.css, change the class names and modify them to create their own variations. Save your customized styling to your child theme’s style.css file or in the WordPress customizer so that changes won’t be overwritten with the next plugin update.
You can find further help in this article on modifying existing themes.