elementor4fun-logo
Last update: February 10, 2021

How to style the terms in a WP-Grid-Builder grid

Here is a little tip to set a different color for each term in a grid made with the plugin WP Grid Builder (aff link).

There are 2 different ways, as there are 2 methods to build a grid with WP Grid Builder.

With a card made with WP Grid Builder

Method 1

The easiest and fastest way. We just have to enable the Term Colors option:

Then we go to the category settings and we can have a different color for each category :

Method 2

We can do it with some custom CSS, which mean we can not only change the color but also the weight, font and so on.

If we check the code, we will see a data attribute "data-id" , with a unique number for each different term :

We can now style each term by using this data attribute in CSS :

#shortcode-8-1004 .wp-grid-builder .wpgb-block-term[data-id="5"] {
    color:#FFA752
}
#shortcode-8-1004 .wp-grid-builder .wpgb-block-term[data-id="6"] {
    color:#7652FF
}

It's what you can see in the OXYGEN4FUN homepage.

With a grid made with the Repeater

If you use the Repeater element to build your grid, it's easier as there is no custom CSS to add.

Instead of adding the category only one time, we add them several time (OXYGEN4FUN has 3 categories, so I add them 3 times).

Each category has his own color:

And for each of them, we set a different condition.

It's what you can see here :

category
  • All
  • Tutorials (85)
  • Tips (25)
  • Resources (10)

Convert Oxygen Classic sections into Oxygen 6 sections

Tips

Easy Posts: how to dynamically add special css classes for posts?

Tutorials

Polylang condition in Oxygen: how to use one template for different languages

Tutorials

Oxygen bug fix: Images in content are not responsive

Tips

How to pause Slides autoplay when you hover over?

Tutorials

Oxygen bug fix: Sticky Header overlaps Modal and Gallery lightbox

Tips

Free SVG icon set from Unicons for Oxygen

Resources

Toggle in Oxygen: how to close the rest when opening one tab?

Tutorials

Don't forget to check this tutorial if you want to learn more about how to use this plugin with Oxygen.

closealign-justifychevron-downcaret-up