> ## Documentation Index
> Fetch the complete documentation index at: https://docs.projectecho.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS for the feedback portal (Pro)

> Upgrade to Pro to add custom CSS on your public feedback portal Design tab—scope styles safely and go live.

Custom CSS lets you restyle your public feedback portal beyond logo, title, and tab labels. It is a **Pro** feature. On Free, the editor is locked and you will see an upgrade prompt.

## Requirements

* A Project Echo workspace on the **Pro** plan (active subscription)
* Access to **Settings → Feedback portal → Design**

Upgrade from **Settings → Billing**, or use the upgrade path shown when the CSS editor is locked. See [Free vs Pro plans](/billing-and-account/free-vs-pro-plans) and [Upgrade and manage billing](/billing-and-account/upgrade-manage-billing).

## Open the editor

1. Sign in at [app.projectecho.io](https://app.projectecho.io).
2. Go to **Settings → Feedback portal**.
3. Open the **Design** tab.
4. Scroll to the **Custom CSS** section.

On Pro you can edit, save, reset, and download CSS. On Free the controls stay locked until you upgrade.

## How it works

* Saved CSS is injected only for **Pro** workspaces on the live portal (subdomain and verified custom domain).
* Styles should target Project Echo’s portal hooks such as `[data-pe-portal]`, `[data-pe-header]`, `[data-pe-nav]`, and `[data-pe-request-card]`.
* The editor starts from a **starter stylesheet** that mirrors default portal tokens and common selectors. Use **Reset** to restore that starter (confirm in the dialog).
* **Download** exports the current editor contents as a `.css` file for backup or review.

After you **Save**, refresh the public portal to preview your changes.

## Limits and safety

Project Echo validates CSS before save:

* Maximum size: **100,000 bytes** (UTF-8)
* Disallowed patterns include `@import`, `expression()`, `javascript:` / `vbscript:` URLs, `</style>`, and similar unsafe constructs

If validation fails, fix the reported issue and save again. Empty CSS clears custom styles and returns the portal to the default look (the editor may still show the starter text until you save a blank clear—use Reset when you want the documented starter defaults again).

<Warning>
  Custom CSS can break layout on small screens. Preview Feedback, Roadmap, and Changelog on desktop and mobile after each meaningful change.
</Warning>

## Recommended workflow

1. Upgrade to Pro if you have not already.
2. Download a copy of the starter (or current CSS) before large edits.
3. Change theme tokens under `[data-pe-portal]` first (colors, radius, font).
4. Adjust header, nav, and request cards with the documented `data-pe-*` selectors.
5. Save, hard-refresh the portal, and spot-check key pages.
6. Keep a downloaded backup of known-good CSS.

## Tips

* Prefer editing CSS variables and existing hooks over brittle deep selectors.
* Keep specificity low so future product updates remain easier to adopt.
* Pair custom CSS with [subdomain and branding](/feedback-portal/subdomain-branding-pro) and, on Pro, a [custom domain](/feedback-portal/connect-custom-domain-pro).

Questions? Email [support@projectecho.io](mailto:support@projectecho.io).