Skip to main content
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 and Upgrade and manage billing.

​
Open the editor

  1. Sign in at 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).
Custom CSS can break layout on small screens. Preview Feedback, Roadmap, and Changelog on desktop and mobile after each meaningful change.
  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 and, on Pro, a custom domain.
Questions? Email [email protected].