Custom CSS is typically used to:

• Apply brand colors, fonts, and layout rules
• Adjust spacing, density, or typography
• Modify how components such as coupons, headers, and footers appear
• Hide unused modules
• Achieve full brand alignment even when using TRIFFT’s underlying technology

Only the documented static classes should be used for overrides. All other classes are dynamically generated and may change during builds.

Where to Configure Custom CSS

1. In TRIFFT Admin, open Settings in the left sidebar.
2. Select Touchpoints > Select previously-created Web Portal touchpoint you want to edit.
3. Open the Settings tab at the top.
4. Use the search bar and type CSS.
5. Select Custom CSS.
6. Turn the toggle ON and enter your stylesheet.
7. Click Save.

Where to find custom CSS setting in TRIFFT Administration:

How to Apply and See Your Changes

Because browsers cache stylesheets, you may not see your changes immediately.
After saving your CSS, perform a hard refresh on the Loyalty Web Portal.

Hard Refresh Shortcuts (Abbreviated)

macOS:
Chrome / Firefox: Command + Shift + R
Safari: Command + Option + R

Windows:
Chrome / Edge / Firefox: Ctrl + Shift + R or Ctrl + F5

If changes still do not appear, clear browser cache or open the portal in a private window.

How to Apply and See Your Changes

Because browsers cache stylesheets, you may not see your changes immediately. After saving your CSS, perform a hard refresh on the Loyalty Web Portal.

Hard Refresh Shortcuts (Abbreviated)

macOS: Chrome / Firefox: Command + Shift + R Safari: Command + Option + R

Windows: Chrome / Edge / Firefox: Ctrl + Shift + R or Ctrl + F5

📘

If changes still do not appear, clear browser cache or open the portal in a private window.

How to Apply Overrides

CSS entered into this editor is injected on top of the Web Portal’s compiled stylesheet.

.trifft-header {
  background-color: #002244;
}

.trifft-coupon-card {
  border-radius: 12px;
  border: 1px solid #cccccc;
}

Changes take effect immediately after a hard refresh.

Working Examples

Example 1 — Header Restyle

.trifft-header {
  background-color: #111111;
  padding: 12px 24px;
}

.trifft-header-logo img {
  height: 40px;
}

Example 2 — Minimalist Coupon Cards

.trifft-coupon-card {
  box-shadow: none;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
}

.trifft-coupon-use-button {
  background-color: #000;
  color: #fff;
}

Example 3 — Hide the Instagram Feed

.trifft-instagram {
  display: none;
}

Static CSS Class Reference

The following static classes are safe to override. Exact contents reproduced from the uploaded specification.

Global Layout & Components

Authentication

Routes: /, /pass-login, /register, /otp-verify, /register-confirm

Profile

Route: /profile

Coupons

Routes: /coupons, /coupon/:id

News & Messages

Route: /news

Loyalty Card

Route: /card

Dashboard

Route: /