---
title: "Custom CSS"
url: "https://fileflare.io/docs/custom-css/"
description: "Override Fileflare's CSS variables from your theme stylesheet to fine-tune the download page and customer-account download box."
published: "2026-03-27T04:12:08+00:00"
modified: "2026-05-01T17:15:50+00:00"
---

The Fileflare download page inherits your Shopify theme’s typography and base colors automatically. For most stores that’s enough. If you want to fine-tune colors, spacing, or shape on the download page itself or the customer-account download box, you can override Fileflare’s CSS variables from your theme stylesheet.

Available on all plans. CSS variables work on the storefront-rendered download page and the customer-account download box. The Fileflare admin UI is not styleable.

## When you’d use this

- Your brand has very specific colors and the auto-inherited theme colors don’t match.
- You want a custom border radius or different button styling than your theme provides.
- You want to tweak the layout density of the download page.

## Where to put the CSS

Add styles to your Shopify theme’s main stylesheet (the file varies by theme — common names include `base.css`, `theme.css`, `application.scss`). Open Online Store → Themes → ⋯ → Edit code, find your CSS file, and paste at the top.

## Variables for the download page

The customer-facing download page (the page customers land on after clicking a download link) uses these variables. Set them inside the `.dda-orders` selector:

```
.dda-orders {
  /* Layout */
  --dda-orders-width: 53.75em;       /* Width of the main box */
  --dda-order-radius-lg: 16px;       /* Outer box radius */
  --dda-order-radius-md: 12px;       /* Inner box radius */
  --dda-order-radius-sm: 8px;        /* Hover-state radius */
  --dda-order-radius-xs: 4px;
  --dda-order-radius-full: 50pc;     /* Pill / circular shapes */
  --dda-order-spacing: 2em;          /* Spacing between outer and inner box */

  /* Colors — light/neutral by default */
  --dda-color-000: #FFF;             /* Inner box background */
  --dda-color-100: #F7F9FC;          /* Outer box background */
  --dda-color-200: #E2E7F0;          /* Order number bubble background */
  --dda-color-300: #EDF0F7;          /* Divider lines + hover background */
  --dda-color-400: #CBD2E0;          /* Main border line */
  --dda-color-500: #717D96;          /* File type/size text */
  --dda-color-600: #2D3648;          /* Main text color */
}
```

## Variables for the customer-account download box

The download box that appears inside customer accounts uses a smaller variable set, scoped to `#digitalAssets`:

```
#digitalAssets {
  --dda-color-100: #F7F9FC;          /* Button background */
  --dda-color-200: #E2E7F0;          /* Button border */
  --dda-color-400: #CBD2E0;          /* Button hover background */
  --dda-color-600: #2D3648;          /* Button text */
}
```

## Common patterns

### Match a dark theme

```
.dda-orders {
  --dda-color-000: #1a1a2e;          /* Inner box (dark) */
  --dda-color-100: #16213e;          /* Outer box */
  --dda-color-200: #2a2a4a;          /* Bubble */
  --dda-color-300: #2a2a4a;          /* Dividers */
  --dda-color-400: #3a3a5a;          /* Borders */
  --dda-color-500: #a0a0c0;          /* Secondary text */
  --dda-color-600: #f0f0ff;          /* Primary text */
}
```

### Tighter, denser layout

```
.dda-orders {
  --dda-orders-width: 42em;
  --dda-order-spacing: 1.25em;
  --dda-order-radius-lg: 8px;
  --dda-order-radius-md: 6px;
}
```

## Common issues

- **Styles aren’t applying** — your theme’s CSS may load after Fileflare’s. Add `!important` on individual properties as a last resort, or move your overrides to the very top of your stylesheet.
- **Some text is still the old color** — Fileflare’s variables only cover the listed scope. For text that’s not styled by these variables, you may need to target specific class names — open the page in dev tools to find the class.
- **Worried about pasting CSS from the web** — only paste from sources you trust. Malicious CSS can include `url()` calls that load tracking pixels.

## Keep learning

- [Style the download page (broader walkthrough)](/docs/how-to-customize-the-styling-of-the-digital-delivery-page-download-page/)
- [Customize the download box title and text](/docs/customize-download-box/)
- [Change the language of customer-facing text](/docs/change-language/)