Theming: Design and Colors

This is a feature of the Premium plan. Tag Groups Premium

Color of Tabs and Accordion Panels

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. More information about creating you own theme is available here.

Color of Tags in Tag Clouds

Tag Groups Premium 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:

[tag_groups_cloud div_class="tag-groups-theme-green"]

The corresponding parameter is also available in the Gutenberg blocks.

The color is applied to the “prepend” and “append” elements.


This is an example:

WordPress plugin - tag cloud - green
tag-groups-theme-green with the parameter append=”{count}” to show the post counts.

We also adapted styling created by Dimox after a design by Orman Clark. You can use it with the class name


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.1

Tag Cloud - tags with holes - css

You can see the various colors in the demos.

Shuffle Box Themes

For the Shuffle Box you can use the following class names. The color will also be applied to the buttons.

cm-shuffle-box-theme-default (Slategray)


[tag_groups_shuffle_box div_class="cm-shuffle-box-theme-blue"]

Dynamic Post Filter

The HTML of the post snippets that appear under the filter can be customized in the Tag Groups menu Front End -> Dynamic Post Filter.

You can change the select menu with the parameter sumoselect=1 in the shortcode or “Use styling for selector.” in the Gutenberg block, “Advanced Styling” section.

Further Customizations

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 hints in this article.


  1. Use the same value for the minimum and the maximum font size.[]