> For the complete documentation index, see [llms.txt](https://ctracker-docs.keywordrush.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ctracker-docs.keywordrush.com/putting-it-on-your-pages/colors-and-css.md).

# Colours and CSS

Cashback Tracker ships one stylesheet, and it is built to be overridden rather than fought.

### The accent colour

`Settings` → `Storefront` → **Main colour** sets one value, and everything accented uses it: buttons, the cashback figure, the coupon discount, the stars, the active filter.

It is published as a CSS variable, so you can also set it from your own stylesheet:

```css
:root { --cbtrkr-accent: #4f46e5; }
```

That is the whole colour system. There is no second accent to keep in step.

![The storefront settings, including the accent colour](https://3545740495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M69sU0hfZj3QsteYxmI%2Fuploads%2Fgit-blob-aaa03c6cddaa99739ff7aea3a37b8b01b809587a%2Fsettings-storefront.webp?alt=media)

### The rest of the palette

Alongside the accent, the stylesheet defines a small set of neutrals on `:root`. Redefine any of them and every plugin surface follows:

| Variable                                | Used for                          |
| --------------------------------------- | --------------------------------- |
| `--cbtrkr-ink`                          | Headings and figures              |
| `--cbtrkr-ink-2`                        | Body text                         |
| `--cbtrkr-muted`                        | Labels, meta rows, secondary text |
| `--cbtrkr-border`                       | Every border and divider          |
| `--cbtrkr-surface`                      | Card backgrounds                  |
| `--cbtrkr-surface-2`                    | Tinted panels                     |
| `--cbtrkr-radius`, `--cbtrkr-radius-sm` | Corner rounding                   |
| `--cbtrkr-shadow`                       | Card elevation                    |

A dark theme usually needs only this:

```css
:root {
    --cbtrkr-ink: #f3f4f6;
    --cbtrkr-ink-2: #d1d5db;
    --cbtrkr-muted: #9aa3af;
    --cbtrkr-border: #374151;
    --cbtrkr-surface: #111827;
    --cbtrkr-surface-2: #1f2937;
}
```

### What the stylesheet deliberately does not set

**Typeface.** No plugin rule sets `font-family`, anywhere. Your theme owns which font every surface uses; the plugin owns only size, weight and leading. That is why the plugin's cards look like part of your site without any work.

**Page width.** No fixed widths. The shop page and the directory take a `max-width` and otherwise fill whatever their container gives them, so they sit inside your theme's own layout instead of competing with it.

### Where the stylesheet loads

Not on every page. It is enqueued on:

* a shop page
* the shop directory and shop category archives
* the member account page
* any post whose content carries one of the plugin's shortcodes or blocks

Everywhere else your visitors do not download it.

If you call `do_shortcode()` from a **theme template** rather than putting the shortcode in post content, that detection cannot see it. Force it:

```php
add_filter( 'cbtrkr_enqueue_frontend_style', function ( $wanted ) {
    return is_front_page() ? true : $wanted;
} );
```

The **Dequeue plugin style** setting switches the stylesheet off entirely, for themes that would rather write all of it themselves.

### Class names worth knowing

Stable names you can safely target:

| Area                        | Prefix                                                                                                                            |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| The shop page and its parts | `.cbtrkr_shop_page`, `.cbtrkr_shop_offer`, `.cbtrkr_shop_identity`, `.cbtrkr_shop_rate`, `.cbtrkr_shop_cta`, `.cbtrkr_shop_facts` |
| Which layout is in use      | `.cbtrkr_shop_panel` or `.cbtrkr_shop_hero` on the page wrapper                                                                   |
| Shop tiles                  | `.cbtrkr_shop_card`, plus `.cbtrkr_shop_card_compact` in a sidebar                                                                |
| The directory               | `.cbtrkr_shop_directory`, `.cbtrkr_shop_filters`, `.cbtrkr_shop_grid`                                                             |
| Coupons                     | `.cbtrkr_coupon_card`, plus `.cbtrkr_coupon_card_code` or `.cbtrkr_coupon_card_deal`                                              |
| The discount rail           | `.cbtrkr_coupon_card_discount`, plus `_md` or `_sm` when the value is long                                                        |
| Reviews                     | `.cbtrkr_reviews`, `.cbtrkr_review`                                                                                               |
| The member area             | `.cbtrkr_account_wrap`, `.cbtrkr_account_rail`, `.cbtrkr_account_body`, `.cbtrkr_account_row`, `.cbtrkr_account_status_*`         |
| Inside WooCommerce          | `.cbtrkr_account_borrowed` on the account wrapper                                                                                 |

The layout class on the wrapper is the useful one: `.cbtrkr_shop_hero .cbtrkr_shop_rate { … }` restyles the rate in one layout without touching the other.

{% hint style="warning" %}
**One exception to "your rule wins": the discount rail.** Most discounts are short — `20%` — but some networks report the saving as money, and `20 000 S/` is three times as wide. The plugin measures the value and adds `_md` or `_sm` to step the type down so it still fits the column.

Setting `font-size` on `.cbtrkr_coupon_card_discount` alone overrides all of that, and the long ones go back to breaking across three lines. Set your size on the modifiers too:

```css
.cbtrkr_coupon_card_discount { font-size: 28px; }
.cbtrkr_coupon_card_discount_md { font-size: 21px; }
.cbtrkr_coupon_card_discount_sm { font-size: 17px; }
```

{% endhint %}

{% hint style="info" %}
**Write your CSS in your theme, not in the plugin.** A plugin update replaces its stylesheet; your theme's survives. Any rule of yours loaded after the plugin's will win, and you rarely need `!important` to get there.
{% endhint %}

### The member area's own layout switch

The account page chooses between a side rail and a full-width band with a **container query**, not a media query — it measures the column your theme gives it rather than the visitor's screen, so it fits a theme with its own sidebar without being told about it. The single column is the base and the rail is the upgrade at `720px` of column width.

To force one or the other, change the threshold rather than the layout:

```css
/* never show the rail */
.cbtrkr_account_wrap { container-type: normal; }
```

Inside WooCommerce's My Account that is already what happens, via `.cbtrkr_account_borrowed` — Woo draws its own rail there.

### Changing structure, not just colour

CSS covers appearance. When you need different *markup* — a badge on every tile, a section in a different order — that is a hook or a template, not a stylesheet:

* [Adding your own blocks to a shop page](/for-developers/shop-page-blocks.md) — actions and filters, which survive updates
* [Adding your own content to the member area](/for-developers/member-area-hooks.md) — the same idea for the account page
* [Overriding templates in your theme](/putting-it-on-your-pages/overriding-templates.md) — when nothing else will do

### Related

* [Overriding templates in your theme](/putting-it-on-your-pages/overriding-templates.md)
* [Template reference](/for-developers/template-reference.md)