Customize Your Portal Design

By the end of this guide, your support portal will match your brand with custom colors, fonts, and layout.

Prerequisites

Before you begin, make sure you have:

DeskPress installed and activated
A portal page created (via the setup wizard or manually)

There are two ways to customize your portal's look and feel. Pick whichever suits you best -- or use both.

Option A: Frontend Design Editor (Quick Visual Edits)

This is the fastest way to make changes. You see results instantly as you edit.

1. Visit your portal page

Navigate to your support portal while logged in as a WordPress admin.

2. Click "Edit Design"

Look for the Edit Design button in the WordPress admin bar at the top of the page.

3. Use the sidebar editor

A sidebar slides in from the left. Expand any section -- Global Styles, Hero, Topics, and more -- and adjust settings.

4. Preview your changes

Changes preview instantly on the page. No page reload needed.

5. Pick colors easily

On Chrome or Edge (version 95+), you can use the EyeDropper tool to pick colors directly from your page.

6. Save

Click Save when you are happy with the result. Only the settings you changed are saved.

Option B: Admin Design Settings (Full Control)

For comprehensive control over every design detail, use the admin panel.

1. Open the Design tab

Go to DeskPress > Support Portal > Design tab.

2. Configure each section

Work through the sections to build your design:

Colors -- Set your primary, secondary, accent, background, surface, border, and text colors. You can also configure status badge colors here.
Typography -- Choose a font family, set base/small/large font sizes, and heading weight.
Layout -- Set container width, padding, section spacing, card and button border radius, and shadow style.
Hero Section -- Toggle the hero on or off. Set the title and subtitle, choose a background type (solid, gradient, or image), and configure text color and minimum height.
Topics -- Toggle on or off. Set a title, choose column count (2 to 4), and pick a card style (shadow, bordered, or minimal).
Conversation Thread -- Set customer and agent message background colors and border radius.
Opening Hours -- Set open/closed colors, card background, and radius.
Custom CSS -- Add any extra CSS rules for fine-tuning beyond what the settings provide.

3. Save settings

Click Save to apply your design changes.

Verification

Visit your portal page in a regular browser window (not the admin panel). All your visual changes should be applied. Be sure to check on a mobile device or a narrow browser window too -- the layout is fully responsive.

Tips

All design settings are output as CSS custom properties (--hsd-*), which makes them easy to override from your theme's stylesheet if needed.
The Inherit from Theme font option lets your portal match your existing site typography automatically.
Start with the Frontend Editor for quick tweaks. Use Admin Settings when you need comprehensive control.