Tag Groups Pro has a feature that allows you to create custom color schemes for your Tags. Follow these steps to create your own designs without needing to know any CSS.

  • Go to “Tag Groups”, then “Front End”, then “Tag Colors”.
  • The first step is to choose a CSS class name. In this screenshot below, I’ve chosen “my-lime-green-class”.
  • Use the color boxes to design your terms. You can see a preview on the right side of the screen under “Sample output”.
  • At the bottom of the screen, Tag Groups will automatically generate the CSS you need to use. Copy this CSS to your site. You can place this into the style.css file of a child theme or you can add it using the Customizer.
  • Now you can add your CSS class into the “div class” box of your Gutenberg block. In this screenshot below, there are two classes. I’ve added a comma to space out the classes.
  • Your design is now complete. This screenshot below shows the output from the “my-lime-green-class” that was created at the start of this guide.