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:

: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

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:

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

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.

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:

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

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.

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:

/* 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 — actions and filters, which survive updates

• Adding your own content to the member area — the same idea for the account page

• Overriding templates in your theme — when nothing else will do

Related

• Overriding templates in your theme

• Template reference