← All posts

Color Oxygen Repeater Posts by Category with Scripts Organizer

scripts organizer

Giving each post card in an Oxygen Builder repeater its own background color by category usually means conditions, extra plugins or duplicate templates. In this video we write the category slug into a custom attribute on the repeater element and target it with plain CSS attribute selectors. You get category-based colors with one attribute and a few lines of CSS, and no extra plugin.

Intro

The goal is simple: every post in a repeater gets a background color based on the category it's assigned to. The demo page, "Blog post with bg color", shows a grid of posts. Each card is a Div inside the repeater's Link Wrapper.

Setup

We need something on each post card that the CSS can target. Oxygen can already output the post's category slug in a custom attribute, so the setup happens in the builder and you don't write any PHP.

For this demo we generated test posts with FakerPress and assigned them to three categories. Go to Posts → Categories and check the Slug column, because the CSS will match these values. In the demo the slugs are features, news and update.

Add the attribute in Oxygen:

  1. Select the Div you want to color inside the repeater. In the demo it's the Div under Repeater → Div → Link Wrapper.
  2. Open the Advanced tab and click Attributes.
  3. Click Add Attribute and name it category_bg.
  4. In the value field, click data to open dynamic data and choose the taxonomy terms option.
  5. In Taxonomy Terms Options, set Taxonomy to category. If a post can have more than one category, put a space in Separator so the slugs don't run together.
  6. Click Insert, then save the page.

Now check the result on the front end. Right-click a post card, choose Inspect, and find the Div. Each card should have its own value, for example:

<div id="div_block-24-14" class="ct-div-block box-hover" category_bg="news">

Style BG

Now each card has its category in the markup, so you only need one CSS rule per category. You can add the CSS in an Oxygen Code Block or with an Oxygen selector. We use Scripts Organizer because it keeps the CSS in one place and lets us load it only where we need it.

  1. In Scripts Organizer → Code Blocks, add a new code block. We named ours Post colors.
  2. Make sure Enable Code Block is On.
  3. Set Trigger Location to Conditions, Script Location to Header, and Template to Page, Post.
  4. Under Select Page/Post, pick the page that holds the repeater (Home in the demo).
  5. Choose CSS as the language and add one rule per category slug:
html [category_bg="features"]{
    background-color: red;
}

html [category_bg="news"]{
    background-color: blue;
}

html [category_bg="update"]{
    background-color: green;
}

When the color doesn't show up

After the first save, the cards didn't change color. Inspecting the Div showed why: #div_block-24-14 had its own background-color: #ffffff from Oxygen. An ID selector is more specific than an attribute selector, so the ID rule won and our colors never showed.

The fix: select the Div in Oxygen, remove the background color from its styles, save, and refresh. The category colors then appear. If your colors don't apply, open the inspector and look for a background set on the element's ID or class.

From here you can add more CSS to the same selectors, such as text color or borders. What matters is the pattern: output the term as an attribute, then target it with CSS.

Who is this for

  • Oxygen Builder users building blog grids or archives who want each category to look different.
  • Site builders who'd rather write a few CSS rules than install a plugin or build separate templates per category.
  • Anyone who has styled an element in Oxygen and wondered why their CSS doesn't apply. The ID-specificity problem at the end comes up often.

FAQ

Do I need an extra plugin to color Oxygen repeater posts by category? No. The attribute comes from Oxygen's own Attributes option with dynamic taxonomy terms data. The CSS can go in an Oxygen Code Block or selector. We used Scripts Organizer only because we prefer managing CSS there.

Why use the category slug instead of the category name? Slugs are lowercase with no spaces, so they work well as attribute values in CSS selectors. Check them under Posts → Categories before writing your rules.

What if a post has more than one category? Set a space as the Separator in Taxonomy Terms Options so the slugs don't run together in the attribute value.

My CSS is correct but the background color doesn't change. Why? The element probably has a background color set on its ID in Oxygen. That rule is more specific than an attribute selector, so it wins. Remove the background color from the element in Oxygen and refresh.

Can I use this for other taxonomies? The Taxonomy Terms Options dialog lets you pick the Taxonomy. We used category in the video, but the steps are the same for any taxonomy you choose there.

Get Scripts Organizer → dplugins.com

Related posts