Theming

Color of Tabs and Accordion Panels

If you want to change the color of the tabs or the accordion, you can find more information 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:

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

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

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

Tag Cloud - tags with holes - css

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)
cm-shuffle-box-theme-blue

Example:

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

Show 1 footnote
  1. Use the same value for the minimum and the maximum font size.

How do you rate this article?