Brand Hub & Designer

One Designer. One Brand Identity. Everywhere.

The Designer is a unified design system for your entire Tracksies suite. It controls how every piece of customer-facing and admin-facing output looks — your emails, your PDF invoices, your review cards, your floating widget, your packing dashboard, your My Account pages, your admin panels. All of it. From one place.

Change your primary colour once and it updates everywhere. Your review request emails match your invoices. Your floating widget matches your review cards. Your admin dashboard matches your customer-facing pages. No hunting through five different settings screens. No “which shade of blue did I use in that other plugin?” No drift.

This is something no other WordPress plugin suite offers. If you’re using separate plugins for reviews, invoices, loyalty, and analytics, you’re configuring styles in four different places — four different colour pickers, four different font settings, four different update cycles. And they never quite match. The Designer eliminates that entirely.

—

What the Designer Controls

Everything visual across the Tracksies suite flows from the Designer:

• Colours — Primary, secondary, accent, surface, background, border, text, header/footer, star ratings, widget, priority/status indicators. Seven colour groups, all cascading through CSS variables.
• Typography — Theme font capture (auto-detected from your active theme), email-safe fonts, PDF fonts with TTF upload support, font sizes across all contexts.
• Interface style — Border radius (square/subtle/medium/rounded), drop shadows (none/hover-only/always), animations. The “feel” of every card, button, and panel.
• Logos and business identity — Logo with position and sizing, business name, tagline, contact details, social links. Used in email headers, PDF documents, and structured data.
• Document layout — Paper size, margins, header/footer text, SKU and weight display, custom CSS for emails.

Where It Applies

How It Works Under the Hood

The Designer outputs CSS custom properties (variables) — named containers like --tracksies-color-primary — inline in your site’s . Every Tracksies CSS file references these variables instead of hardcoded colour values. When you change “Primary” from teal to coral in the Designer, the variable updates, and every element reading that variable updates with it. No hardcoded colours anywhere in the CSS.

This is the mechanism that makes “set once, apply everywhere” work. And because the variables are output inline, they override any defaults instantly — no cache issues, no specificity battles.

Per-Plugin Sections

The Designer is context-aware. Tabs and sections appear based on which plugins you have active:

• Trustie active? Rating colours, widget colours, reviews page layout settings appear.
• WooCommerce active? Document colours, PDF typography, paper size, margin settings appear.
• Squizzie active? Report cover page and section styling options appear.
• Pipesie active? Pipeline status colours and email preview tabs appear.

You only see what’s relevant to your setup. Install a new plugin and its Designer sections appear automatically.

—

Why This Matters

Without centralised branding, things drift. Your emails end up with one shade of blue, your invoices use another, your review widget picks a default that doesn’t match either, and your returns page looks like it belongs to a different company entirely. It’s death by a thousand paper cuts — no single thing looks wrong, but nothing looks cohesive.

The Designer fixes this by being the single source of truth for your visual identity across every Tracksies feature. Change your primary colour here, and it updates in your emails, your PDF documents, your review stars, your floating widget, your admin interface — everywhere. All five tabs of the Designer work together to give you complete control over how your brand appears.

The competitive reality: Other plugin suites don’t have this. If you’re using Yotpo for reviews, ShipStation for packing, and a separate loyalty plugin, each one has its own colour settings (if it has any at all). You end up with three different interpretations of your brand, none of which match your theme. The Designer gives you one place, one save, one brand identity across everything.

—

Where to Find It

Go to Tracksies > Designer in the left sidebar of your WordPress admin. The Designer is the first submenu item under Tracksies.

You’ll see five tabs along the top: Colours, Branding, Interface, Documents, and Woo. Each tab controls a different aspect of your brand’s visual identity. We’ll walk through every one.

—

Tab 1: Colours

This is where you set the colours that cascade through everything Tracksies does. The tab is divided into sections, and some sections only appear when certain plugins are active (so don’t worry if you see fewer sections than described here).

Theme Colour Detection

Right at the top, you’ll see a card titled Your Theme Colours. Tracksies scans your active theme (and page builder, if you’re using one like Bricks, Elementor, or Divi) and pulls out any colours it finds in your global style settings.

This matters because it saves you hunting for hex codes. If your theme already has your brand colours configured, they’ll show up here as clickable swatches. Click any swatch to copy the hex code to your clipboard, then paste it into the colour fields below. You’ll see a small “Colour copied!” toast when it works.

If no colours appear, it means your theme or page builder hasn’t set global colours yet. The card will tell you what theme and builder you’re using, and suggest assigning colours in your theme’s style settings first.

Brand Colours

These are the foundation. If you only configure three things in the entire Designer, make it these:

• Primary (default: #3E7CB1) — your main brand colour. This is the workhorse. It’s used for primary button backgrounds, links, active states, and accents throughout Tracksies. If your brand is “that teal company”, this is where that teal lives.
• Secondary (default: #2AA9A9) — a complementary colour. Used for secondary button backgrounds and hover states. Think of it as the supporting actor to your primary colour’s lead role.
• Accent (default: #F4AF30) — a highlight colour. Used for attention-grabbing elements and special callouts. This is your “look over here” colour.

To set any colour: click the colour swatch to open a picker, or type a hex code directly into the text field next to it (like #3E7CB1). Both methods work.

Button Text Colours

Below the brand colours, you’ll find button text colour settings. These control the text on top of your primary and secondary buttons:

• Primary Button Text (default: #ffffff) — the text colour on primary buttons. If your primary colour is light, you might want to switch this to a dark colour so the text is readable.
• Secondary Button Text (default: #ffffff) — the text colour on secondary buttons.

A Button Preview sits below these fields and updates live as you change colours. This matters because it lets you check that your button text is actually readable against your button background before you save. If the text disappears into the background, you know you need more contrast.

Rating Colours

This section appears when Trustie or WooCommerce is active. It controls how star ratings and review verification badges look across your site:

• Star Colour (default: #F4AF30) — the colour of filled stars in ratings. The ones that are “lit up” when a customer gives you four out of five.
• Empty Stars (default: #e0e0e0) — the colour of unfilled stars. The one empty star in that four-out-of-five rating.
• Verified Badge (default: #7EB77F) — the colour of the “Verified” checkmark that appears next to verified purchase reviews.

A live star preview sits below these fields showing four filled stars, one empty star, and a verified badge. As you change the colours, the preview updates in real time so you can see exactly how your ratings will look on your site.

Widget Colours

This section appears when Trustie is active. It controls the floating reviews widget — the tab that sits on the edge of your site and opens a panel of customer reviews when clicked:

• Tab & Header Background (default: #F4AF30) — the background colour for both the floating tab and the panel header that appears when the widget opens.
• Tab & Header Text (default: #332927) — the text colour on the tab and header.

A live preview shows a mock tab and header that update as you adjust the colours. This matters because the widget tab is always visible on your site, so you want it to complement your design without clashing.

Document & Email Colours

These colours control the header and footer areas of your PDF documents (invoices, packing slips) and emails. If WooCommerce is active, the section is titled “Document & Email Colours”. Without WooCommerce, it shows as “Email Colours”.

• Header Background (default: #3E7CB1) — the banner/header background in documents and emails. This is the coloured bar at the top where your logo sits.
• Header Text (default: #ffffff) — the text colour on that header background.
• Footer Background (default: #F1F2F2) — the footer area background at the bottom of documents and emails.
• Footer Text (default: #332927) — the text colour in footer areas.

A live preview shows a mock document with your header, a content area, and your footer, all updating in real time. This matters because it lets you verify that your header text is readable against your header background before any actual emails or invoices go out.

Text & Background

These control the quieter visual elements — the backgrounds, borders, and text that make up the everyday look of Tracksies panels and components:

• Text (default: #332927) — your primary text colour. Headings, body text, and most words across Tracksies.
• Light Text (default: #646970) — secondary text, captions, dates, helper text, and labels. The quieter stuff.
• Background (default: #F1F2F2) — page and section background colour. The colour behind the cards.
• Surface (default: #ffffff) — background colour for cards, panels, and modals. Like the colour of the paper your content sits on.
• Borders (default: #c3c4c7) — colour for card edges, dividers, input outlines, and separators.

—

Tab 2: Branding

This tab handles your logo, business details, and typography — the non-colour parts of your brand identity.

Primary Logo

Your logo appears in email headers, PDF document headers, and other branded elements.

1. Click Upload Logo in the Logo section at the top of the Branding tab. This opens the WordPress Media Library.
2. Select an existing image or upload a new one, then click Select.
3. A preview of your logo appears in the card. If you need to change it later, click Upload Logo again. To remove it entirely, click Remove.

Logo Width (below the upload): Set the maximum width in pixels, from 50px to 400px. The height adjusts proportionally, so you only need to set one dimension. For emails, a width between 150px and 300px usually works well. Too large and it dominates the header; too small and it looks like an afterthought. Start at 200px and adjust from there.

Logo Position: Choose where your logo sits in document and email headers — Left, Center, or Right. Most brands go with left-aligned (it’s what people expect), but if your brand is centred in nature, centre works nicely too.

Brand Hub actually supports four logo variants behind the scenes: primary (your main logo), icon (a square icon version, 60x60px default), dark (for use on light backgrounds), and light (for use on dark backgrounds). Each variant has its own URL, width, and height settings. The primary logo is the one you’ll use most, and it’s the one exposed in the Designer UI. The other variants can be set programmatically or via the saved settings for advanced use cases.

Business Info

These details are used in emails, PDF documents, structured data (schema markup), and anywhere your business identity appears:

• Business Name — defaults to your WordPress site title. This is the name that appears in email headers and document headers.
• Tagline — defaults to your WordPress tagline. Appears in banner-style email headers and some document layouts.
• Email — defaults to your WordPress admin email. Used in document footers and email signatures.
• Phone — your business phone number for document footers.
• Address — your business address, used in document footers and structured data.

Additional business fields are stored by Brand Hub but configured elsewhere: ABN/Tax ID, Website, and Social Media links (Facebook, Instagram, Twitter/X, LinkedIn, TikTok, YouTube). These populate email footers, document footers, and structured data output.

Frontend Typography

This section shows which fonts Tracksies has detected from your active theme. It displays your Body Font and Heading Font with a green confirmation banner when fonts have been captured successfully.

This matters because Tracksies uses your theme’s fonts for frontend elements like review cards, widget panels, and customer-facing pages. Your reviews will match the rest of your site’s typography without you configuring anything.

Font capture happens automatically. Tracksies checks your theme’s fonts once a day and caches the result.

If fonts show as “Not yet captured”: Visit any frontend page of your site while logged in as an admin. Tracksies captures fonts on the first frontend page load. You’ll see a yellow notice if fonts haven’t been detected yet.

To force a refresh (after changing themes or updating your fonts): Add ?tracksies_refresh_fonts=1 to any frontend URL on your site. For example: https://yoursite.com/?tracksies_refresh_fonts=1. You need to be logged in as an admin. A notification will confirm which fonts were captured.

Email Typography

Frontend elements use your theme’s fonts automatically, but emails need system-safe fonts that render reliably across all devices and email clients. That’s what this section controls:

• Heading Font — choose from system-safe options: System Default, Arial, Georgia, Times New Roman, Verdana, Trebuchet MS, Courier New, Tahoma, or Lucida Sans. Used for headings in emails.
• Body Font — same list of options. Used for body text in emails.
• Base Font Size — the base size in pixels (12px to 24px, default 16px). Other sizes scale relative to this.

The reason these are separate from your theme fonts: email clients like Outlook ignore custom web fonts entirely. These system-safe fonts are guaranteed to render correctly in every email client.

PDF Typography

PDFs have their own font system because they can use actual font files — not just the limited system-safe fonts that emails are stuck with. If your theme uses a custom font (from Bricks Builder, Elementor, or uploaded via your theme settings), you can use that same font in your invoices and packing slips.

• PDF Heading Font — choose a system font, select one found on your site, or upload a .ttf file. Used for document titles and table headers.
• PDF Body Font — same options. Used for body text, addresses, line items, and totals.
• PDF Font Size — the base text size for PDFs in pixels (9px to 18px, default 12px). All other text in your documents scales proportionally from this value — addresses, table headers, meta text, totals, even the document title. Increase this if your chosen font renders smaller than expected at the default size. Some custom fonts (particularly from page builders like Bricks) have different metrics than system fonts, so the same pixel value can look noticeably smaller.

Tracksies automatically scans your site for .ttf font files from your theme, page builder, and uploads folder. These appear in the “Found on Your Site” group in the font dropdowns. If you don’t see your font listed, click the Rescan Fonts button below the font selects to trigger a fresh scan.

If you upload a font: Click the Upload Font button that appears when you select “Upload a .ttf file” from the dropdown. The file must be a .ttf format and under 5MB. After uploading, the font is stored in your WordPress uploads folder and will persist through theme changes.

Tip: If your PDFs look fine with the default Helvetica but you want them to match your website’s branding more closely, try selecting your theme’s font from the “Found on Your Site” list and bumping the PDF Font Size up by 1-2px if the text looks small.

—

Tab 3: Interface

This tab controls the visual feel of Tracksies UI elements — how rounded things are, whether cards have shadows, whether things animate on hover, and how reviews are laid out.

UI Style

Border Radius — controls the corner rounding on cards, buttons, panels, and inputs throughout Tracksies. Choose from the Border Radius dropdown in the UI Style section:

• Square (0px) — sharp corners everywhere. Clean and modern.
• Subtle (4px) — barely-there rounding. Professional and understated.
• Medium (8px) — the default. A gentle curve that works well with most designs.
• Rounded (16px) — noticeably rounded corners. Friendlier, more approachable feel.

This matters because corner rounding has a surprising impact on how your site feels. Sharp corners feel more formal and corporate; rounded corners feel warmer and more inviting. Pick what matches your brand personality.

Drop Shadows — controls whether cards and panels have shadow effects. Choose from the Drop Shadows dropdown:

• None (flat look) — no shadows at all. This is the default. Clean, flat design.
• Subtle (hover only) — shadows only appear when someone hovers over a card. Adds depth without visual clutter.
• Visible (always on) — shadows are always visible. Cards look like they’re floating above the page.

Animations — the toggle in the Animations row controls whether hover transitions and animations are enabled. When on, elements like buttons and cards respond smoothly to mouse interactions. When off, everything is instant. Turn this off if you prefer a no-frills interface, or if you want to respect users who have reduced-motion preferences.

Rating Display

Star Size — set the size of stars in ratings in pixels (12px to 48px) using the Star Size field in the Rating Display section. The default is 18px, which works well at most sizes. Increase it if your reviews are a prominent feature and you want the stars to be more eye-catching.

Show Review Count — the toggle in the Show Review Count row controls whether the number of reviews appears next to star ratings, like “(24 reviews)”. This is on by default. Turn it off if you want a cleaner look, but keep in mind that the count provides social proof — seeing “24 reviews” next to a 4.5-star rating is more convincing than stars alone.

Reviews Page Layout

These settings control the appearance of your reviews page (the page that uses the [trustie_reviews_page] shortcode):

Page Title — enter a custom title in the Page Title field, or leave it blank to use the default “Customer Reviews”. This is the heading that appears at the top of the reviews page.

Columns — choose how many columns of review cards to display on desktop using the Columns dropdown: 1, 2, or 3. One column gives each review maximum width (good for long, detailed reviews). Three columns shows more reviews at a glance (good for shorter reviews and star ratings).

Show Sources — the toggle in the Show Sources row controls whether the review source breakdown appears (like “12 Product, 8 Store, 5 Google”). This helps visitors understand where your reviews come from, which builds trust.

—

Tab 4: Documents

This tab controls settings specific to PDF documents — invoices, packing slips, and other generated documents.

Document Content

Show SKU — the toggle in the Show SKU row in the Document Content section controls whether product SKU codes appear on your documents. This is on by default. Useful for warehouse teams who pick by SKU, but you might want to turn it off for customer-facing invoices if SKUs are meaningless to your customers.

Show Weight — the toggle in the Show Weight row controls whether product weight appears on packing slips. This is off by default. Turn it on if weight information helps your packing team estimate box sizes or shipping costs.

Header/Footer Text

Header Text — enter custom text in the Header Text field to display in document headers. This appears alongside your logo and business name. Useful for taglines, ABN/Tax ID numbers, or seasonal messages.

Footer Text — enter custom text in the Footer Text field for the bottom of documents. Common uses: return policy summaries, thank-you messages, terms and conditions references, or “Questions? Contact us at…” messages.

PDF Settings

Paper Size — choose from the Paper Size dropdown in the PDF Settings section:

• A4 — standard international paper size (210 x 297 mm). This is the default.
• Letter — US standard paper size (8.5 x 11 inches).
• Legal — US legal paper size (8.5 x 14 inches).

Pick the paper size that matches what you actually print on. If you’re in Australia, Europe, or most of the world, A4 is what you want. If you’re in the US, Letter is your standard.

Margins — set the page margins in millimetres for Top, Right, Bottom, and Left (0mm to 50mm each, default 15mm). These control how much white space surrounds your document content. The defaults work well for most printers, but if your documents are getting cut off at the edges, increase the margins slightly.

—

Tab 5: Woo

This tab contains WooCommerce-specific visual settings — the colours used in your packing dashboard and order management, plus email configuration.

Priority Colours

These colours appear in the packing dashboard to indicate how urgently an order needs attention. Set each one using the colour picker or hex field in the Priority Colours section:

• Critical (default: #ef4444 — red) — for orders that need immediate action. VIP orders, time-critical shipments.
• High (default: #f59e0b — amber) — for high-priority orders. Repeat customers, expedited shipping.
• Medium (default: #3b82f6 — blue) — for elevated-priority orders.
• Low (default: #6b7280 — grey) — for normal/default priority.

This matters because colour-coding helps warehouse staff instantly identify which orders to pack first. Red screams “do this now”, amber says “soon”, and grey means “whenever you get to it”.

Status Colours

These colours indicate order status throughout Tracksies — in order lists, dashboards, and status badges. Set each one in the Status Colours section:

• Pending (default: #f59e0b — amber)
• Processing (default: #3b82f6 — blue)
• Packed (default: #8b5cf6 — purple)
• Shipped (default: #10b981 — green)
• Completed (default: #10b981 — green)
• Cancelled (default: #ef4444 — red)

You might want to customise these to match your existing order management colours, especially if your team is already used to a particular colour scheme from another system.

Order Emails

Branded Template — the toggle in the Branded Template row in the Order Emails section controls whether WooCommerce order emails use Tracksies branding (your Brand Hub logo, colours, header, and footer). When on, order confirmations, shipping notifications, and other WooCommerce emails get your brand treatment. When off, they use WooCommerce’s default styling.

Order Email Footer — enter additional footer text in the Order Email Footer field that appears specifically in WooCommerce order emails. This is separate from the document footer — use it for order-specific messaging like “Questions about your order? Reply to this email” or a link to your returns policy.

Custom CSS — the Custom CSS field accepts CSS code that applies only to WooCommerce order emails. This is for advanced users who want precise control over email styling. For example, you might adjust table spacing, change font sizes, or tweak padding. The field uses a monospace font so code is easier to read.

—

How Colours Cascade

This is the part that makes it all worth setting up. Once you configure your Brand Hub colours, they’re output as CSS variables — think of these as named containers for your colours. Every Tracksies element reads from these containers instead of having colours hardcoded. Here’s where they show up:

• Emails — header background, footer background, button colours, link colours
• PDF documents — invoice and packing slip header/footer styling, text colours
• Floating widget — tab colour, panel header, review card accents
• Review cards — star colours, verified badge colours, card borders and backgrounds
• Admin interface — focus indicators, active states, panel backgrounds
• Customer-facing pages — returns progress bar, review forms, status badges

You set colours once, and they show up everywhere. If you change your primary colour from teal to coral, everything updates. No hunting through settings pages in five different places.

The Main CSS Variables

Here are the CSS variables that Brand Hub outputs. You don’t need to do anything with these — they’re listed here for reference, and for developers who want to understand what’s happening behind the scenes:

Colour Variables:

Rating Variables:

Typography Variables:

Layout Variables:

Live Preview Cards

As you change colours on the Colours tab, several preview elements update in real time:

• Button Preview (Brand Colours section) — shows your primary and secondary buttons with their text colours, so you can check readability.
• Star Preview (Rating Colours section) — shows filled and empty stars plus a verified badge in your chosen colours.
• Widget Preview (Widget Colours section) — shows a mock floating tab and panel header in your widget colours.
• Document Preview (Document & Email Colours section) — shows a mock document with your header, content area, and footer.

These previews help you make confident colour choices without saving and reloading. What you see in the preview is what your customers will see.

—

Common Questions

Do I need to set all the colours?
No — the defaults work well out of the box. You only need to change the ones you want to customise. At minimum, set your Primary colour to match your brand. Everything else will look cohesive from that starting point.

Will this affect my theme’s styling?
No. Brand Hub only styles Tracksies elements — emails, widgets, reviews, PDF documents, admin panels, and so on. Your theme’s native styling is completely untouched. They’re separate worlds.

My colours look different in emails versus the website?
Email clients have notoriously limited CSS support (looking at you, Outlook). Brand Hub does its best to translate your colours faithfully, but some email clients may render colours slightly differently. This is an industry-wide limitation, not a Tracksies issue. The web-based elements (widget, reviews, admin) will always be pixel-perfect.

I changed a colour but the widget/email still shows the old one?
Two likely culprits: your browser cache or a caching plugin. Clear your caching plugin’s cache (WP Rocket, LiteSpeed, W3 Total Cache — whatever you’re running), then do a hard refresh in your browser (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). For email previews, reload the preview page entirely.

What are CSS variables?
Don’t worry about the technical details — they’re listed above mainly for developers. The short version: CSS variables are like named containers for your colours. When you set “Primary = #3E7CB1” in Brand Hub, Tracksies creates a container called --tracksies-color-primary with that value inside. Every Tracksies element that needs your primary colour reads from that container. Change the value, and everything reading it updates automatically. It’s the mechanism that makes the “set once, apply everywhere” magic work.

Some colour sections are missing?
Colour sections are contextual. Rating Colours and Widget Colours only appear when Trustie is active. Document & Email Colours adapts its title and description based on whether WooCommerce is installed. If you’re missing a section, check that the relevant plugin is installed and activated.

What paper size should I use?
If you’re in Australia, Europe, or most of the world, use A4. If you’re in the United States, use Letter. If you’re printing legal documents that need the extra length, use Legal. When in doubt, A4 is the safe choice.

Can I use different fonts for emails and my website?
Yes, and in fact that’s what happens by default. Your website uses your theme’s fonts (captured automatically). Your emails use the system-safe fonts you choose on the Branding tab — email clients don’t support custom web fonts, so system-safe fonts ensure your emails look consistent for every recipient. PDFs can use either system fonts or custom TTF fonts from your theme, page builder, or uploads.

My PDF text looks too small (or too large)?
Head to Designer > Branding > PDF Typography and adjust the PDF Font Size slider. The default is 12px, which works well with system fonts. If you’re using a custom font that renders smaller than expected (common with fonts from Bricks, Elementor, or other builders), try bumping it up to 13 or 14. All text in your invoices and packing slips scales proportionally.

—

Troubleshooting

Colour picker doesn’t open
Try a different browser. Some ad blockers and privacy extensions can interfere with JavaScript-based colour pickers. If you’re using Brave, try temporarily disabling Shields for your admin pages.

Colours don’t save
Open your browser’s developer console (F12, then click the Console tab) and check for JavaScript errors. Red text in the console usually points to a plugin conflict. If you see errors, try clearing your browser cache and reloading. If errors persist, temporarily deactivate other plugins to identify the conflict.

Logo doesn’t appear in emails
Make sure the logo URL is accessible from the internet. If you’re developing locally (localhost), email clients can’t reach your logo because it’s only on your computer. Upload the logo to your live site’s Media Library and use that URL. Also check that your logo file isn’t unusually large — email clients sometimes skip images over 1MB.

Fonts not matching my theme
Visit your site with ?tracksies_refresh_fonts=1 appended to the URL to force Tracksies to recapture your theme’s fonts. You need to be logged in as an admin for this to work. If fonts still don’t match after a refresh, your theme may be loading fonts in a non-standard way — reach out to support and we’ll help sort it out.

Document margins or paper size not applying
After changing Paper Size or Margins on the Documents tab, click Save at the bottom of the Designer page. Then generate a new document — existing PDFs won’t retroactively update. If the new document still shows wrong margins, clear any caching plugin’s cache and try again.

Priority or status colours not showing in dashboard
These colours are saved separately from the main Brand Hub colours. After changing them on the Woo tab, click Save and reload the packing dashboard or orders page. If you’re still seeing old colours, clear your browser cache with a hard refresh (Ctrl+Shift+R).

Custom email CSS not taking effect
The Custom CSS field on the Woo tab only applies to WooCommerce order emails. Make sure the Branded Template toggle is turned on — custom CSS only works when Tracksies is handling the email template. Also remember that email clients strip many CSS properties, so not all CSS will work in emails the way it does on a web page.