Customize your portal

Customize your portal's theme, colors, fonts, custom CSS, navigation tabs, and the welcome message on the portal home, with a live preview.

Make your feedback portal feel like part of your product. This article covers the portal's appearance (theme, colors, fonts, custom CSS), the top navigation tabs, and the welcome message on the portal home, all configured on one page with a live preview.

Where to find it

Go to Settings > Portal. The page has controls on the left and a live preview of your real portal on the right. Nothing goes live until you click Save in the save bar that appears at the bottom whenever you have unsaved changes.

Note: The old Branding settings page now redirects here. Bookmarks to it keep working.

Your logo and workspace name are set in Settings > General, in the Workspace card. They appear across the portal, the widget, and the emails Quackback sends. Logos can be JPEG, PNG, GIF, or WebP, up to 5 MB, and are cropped after you choose the file.

Appearance

The Appearance card sets the theme, color palette, and typography. These settings also apply to the embedded widget.

Theme mode

Choose how light and dark mode work for visitors:

Light: the portal always displays in light mode
Dark: the portal always displays in dark mode
Visitor chooses: visitors can switch between light and dark

Preset

Click a preset swatch to apply a coordinated palette (primary, background, and accent colors) in one step.

Font

Choose a font family from the dropdown. Fonts are grouped as Sans Serif, Serif, Monospace, and System (the visitor's own system font). Each option previews in its own typeface.

Corner roundness

Drag the slider from Sharp to Round to set how rounded buttons and cards are. A small preview shows the result.

Advanced CSS

For full control, expand Advanced CSS and write custom CSS. Use :root {} and .dark {} blocks with CSS custom properties to override the light and dark themes.

Note: On Quackback Cloud, Advanced CSS is available from the Business plan. Presets, fonts, and corner roundness are available on every plan.

The Navigation card controls the portal's top tabs. They apply everywhere the portal header shows, including the help center and status pages.

Reorder: drag a row by its handle.
Show or hide: use the switch on the right of a row. The Feedback tab is always on.
Rename: type in the label field. Leave it blank to keep the default label.
Add a custom link: click Add link, then enter a label and a full https:// URL. Remove a custom link with its trash icon.
Reset to defaults: discard your customizations and return to the standard tabs.

The built-in tabs are Feedback, Roadmap, Changelog, Help Center, Support, and Status.

A tab whose product is turned off (for example, Help Center while its module is off in Settings > General) still shows in the editor with a Product off badge. It appears on the portal automatically once you turn the product on, keeping the order and label you set.

Tip: Renamed tabs show your text in every language. Tabs you leave untouched stay translated for each visitor's language.

Welcome message

The Welcome message card adds a short note above the post list on your portal home. The rest of the page (filters, board picker, post list) stays the same. Leave it empty to show nothing.

Go to Settings > Portal.
Write your message in the Welcome message card.
Check the live preview.
Click Save.

The message uses the same rich text editor as posts and comments, so you can add headings, bold, italic, lists, links, inline code, code blocks, images, and emoji.

Common uses:

Frame the feedback you want. "We're looking for feature ideas. Please raise bugs through support."
Surface the roadmap. Link to your roadmap so visitors see what's already planned.
Point at help docs. Link to your help center so visitors can find answers before filing a request.
Set expectations. Explain your tone, duplicate, and response-time policies.

Tip: Keep it short. Visitors come to post and vote; the welcome message is an orienting note, not a landing page.

Live preview

The preview on the right shows your real portal and updates as you edit. Use the controls above it to:

switch between Light and Dark
switch between desktop and mobile widths
click Open portal to see the live, saved version in a new tab

Save your changes

Click Save in the save bar to apply theme, navigation, and welcome message changes together. To throw away unsaved edits, discard them from the same bar. Logo uploads in Settings > General save immediately.

Best practices

Match your brand. Use your brand colors, the same font as your website, and your standard logo.
Check contrast. Make sure text is readable on colored backgrounds and your logo is visible in both light and dark mode.
Check mobile. Use the mobile preview to confirm the logo scales and buttons are easy to tap.
Keep it simple. A clean design builds trust and keeps the focus on the feedback.