> For the complete documentation index, see [llms.txt](https://ce-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://ce-docs.keywordrush.com/custom-templates/customizing-templates-with-css.md).

# Customizing templates with CSS

If you have basic HTML/CSS skills, you can easily customize template settings like colors, padding, margins, font size, etc., by applying custom CSS rules. Each template has a unique class wrapper, and most elements within the templates have unique classes as well.

**Example: Changing Price Color**

All price outputs have the class `cegg-price`. To change the color of the price text, use the following CSS:

```css
.cegg-price {
  color: red;
}
```

**Example: Changing Price Font Size**

In some cases, you might need to add `!important` to override the default styles:

```css
.cegg5-container .cegg-item-card .cegg-price {
    font-size: 25px !important;
}
```

<figure><img src="/files/l4YD4f6w4ZBRniUu5XLS" alt=""><figcaption></figcaption></figure>

### Adding Custom CSS

To add custom CSS:

1. Go to **Appearance > Customize > Additional CSS** in WordPress.
2. Alternatively, you can add custom CSS directly to your child theme's stylesheet file.

### Coupon chip classes

The coupon chip from [Shops & coupons](/frontend/shops-and-coupons.md) uses these classes:

| Class                   | Part                                                  |
| ----------------------- | ----------------------------------------------------- |
| `.cegg-coupon-wrap`     | The wrapper around the chip and its expiry line.      |
| `.cegg-coupon`          | The chip itself — the clickable element.              |
| `.cegg-coupon-discount` | The discount label, for example `15% off`.            |
| `.cegg-coupon-code`     | The code, for example `PRIME15`.                      |
| `.cegg-coupon-title`    | Used instead of the code for a deal that has no code. |
| `.cegg-coupon-ends`     | The `ends in 4 days` line under the chip.             |
| `.cegg-coupon-strip`    | The strip below the block, in strip mode.             |
| `.cegg-coupon-shop`     | The shop name, shown only inside the strip.           |

The chip takes its colour from `--cegg-success`, so it follows your palette rather than a fixed green:

```css
.cegg5-container a.cegg-coupon {
    color: #b12704;
}
```

### Coupon card classes

In card mode (`coupons_display=cards`) each coupon renders through `block_shop_coupons`, which you can copy into `content-egg-templates/` like any other template.

| Class                                                 | Part                                                           |
| ----------------------------------------------------- | -------------------------------------------------------------- |
| `.cegg-shop-coupons`                                  | The list wrapper.                                              |
| `.cegg-shop-coupon`                                   | One card.                                                      |
| `.cegg-shop-coupon__image`                            | The coupon's own image, when it has one.                       |
| `.cegg-shop-coupon__logo`                             | The shop logo in the card head.                                |
| `.cegg-shop-coupon__discount`                         | The discount badge.                                            |
| `.cegg-shop-coupon__title`                            | The offer title.                                               |
| `.cegg-shop-coupon__details` / `__summary` / `__desc` | The **See details** toggle and its body.                       |
| `.cegg-shop-coupon__stub`                             | The right-hand panel holding the button.                       |
| `.cegg-shop-coupon__reveal`                           | The **Show Code** button, which becomes the code once clicked. |

{% hint style="warning" %}
The card's torn-ticket notch is punched with a CSS `mask`, and a mask clips any `border` or `box-shadow` along the notch curve. That is why the card has neither — adding one back shows as a bitten-off edge. If you want a bordered card, remove the `mask` rules as well.
{% endhint %}

{% hint style="warning" %}
Two rules here are load-bearing. `.cegg-coupon-wrap` sets `position: relative` and `z-index: 3` to sit above the card-wide `stretched-link` overlay that most templates use for their buy button — remove it and the chip stops being clickable. And `.cegg-coupon-code` never shrinks on purpose, so a narrow column squeezes the discount label instead of truncating the code; setting `text-overflow: ellipsis` on the code can produce an unusable `PRIM…`.
{% endhint %}