Portal Design Settings
What It Does
Over 50 design settings let you customize every visual aspect of your support portal — colors, typography, layout, and more — all from the WordPress admin. No CSS knowledge required (though there is a Custom CSS field for advanced users).
How to Enable / Access
Go to DeskPress > Support Portal > Design tab.
All changes are saved when you click the Save button. To preview changes in real-time before saving, use the Frontend Design Editor instead.
Configuration Walkthrough
The Design tab is organized into clearly labeled sections. Here is a walkthrough of each one.
Colors
These settings control the overall color palette of your portal. All colors are applied as CSS custom properties (--hsd-*), so they cascade throughout the entire portal consistently.
| Setting | Default | Description |
|---|---|---|
| Primary | #6366f1 | Your main brand color — used for buttons, links, and key UI elements |
| Primary Hover | #4f46e5 | The color shown when hovering over primary elements |
| Secondary | #64748b | Used for secondary buttons and less prominent UI elements |
| Accent | #8b5cf6 | Accent highlights for badges, tags, and decorative elements |
| Background | #f8fafc | The page background color |
| Surface | #ffffff | Background color for cards, panels, and content areas |
| Text Primary | #18181b | Main body text color |
| Text Secondary | #71717a | Subtitles, descriptions, and supporting text |
| Text Muted | #a1a1aa | Hints, placeholders, and disabled text |
| Border | #e4e4e7 | Borders and dividers between sections |
| Status Active | #22c55e | Badge color for active conversations |
| Status Pending | #f59e0b | Badge color for pending conversations |
| Status Closed | #6b7280 | Badge color for closed conversations |
| Status Spam | #ef4444 | Badge color for spam conversations |
Typography
Control the fonts and text sizing across the portal.
| Setting | Default | Description |
|---|---|---|
| Font Family | System Default | The typeface used throughout the portal |
| Base Font Size | 16px | Standard body text size |
| Small Font Size | 14px | Used for captions, badges, and small labels |
| Large Font Size | 18px | Used for introductory text and larger descriptions |
| Heading Weight | 600 | Font weight for headings (600 = semi-bold) |
Available font options: System Default, Inter, Roboto, Open Sans, Lato, Poppins, Nunito, Source Sans Pro, Inherit from Theme.
Choosing System Default uses the visitor's operating system font (e.g., -apple-system on Mac, Segoe UI on Windows). Choosing Inherit from Theme uses whatever font your WordPress theme defines.
Layout
These settings control spacing, sizing, and the overall structure of the portal.
| Setting | Default | Description |
|---|---|---|
| Container Width | 1400px | Maximum width of the portal content area |
| Container Padding | 32px | Horizontal padding inside the container |
| Section Spacing | 64px | Vertical space between major sections |
| Card Border Radius | 12px | Corner rounding on cards and panels |
| Card Shadow | Soft | Shadow depth on cards |
| Button Border Radius | 8px | Corner rounding on buttons |
| Global Border Radius | 12px | Default corner rounding for all elements |
Shadow options: None, Subtle, Soft, Medium, Strong.
Hero Section
Customize the large banner area at the top of the portal.
| Setting | Default | Description |
|---|---|---|
| Enabled | Yes | Show or hide the hero section |
| Title | "How can we help you?" | The main heading text |
| Subtitle | (empty) | Optional text below the title |
| Background Type | Gradient | Choose Solid color, Gradient, or Image |
| Background Color | #6366f1 | Used when Background Type is Solid |
| Gradient Start | #6366f1 | Starting color for gradient backgrounds |
| Gradient End | #8b5cf6 | Ending color for gradient backgrounds |
| Background Image | (none) | Upload an image when Background Type is Image |
| Text Color | #ffffff | Color of the hero title and subtitle |
| Min Height | 320px | Minimum height of the hero area |
Topics Section
Control how knowledge base category cards are displayed.
| Setting | Default | Description |
|---|---|---|
| Enabled | Yes | Show or hide the topics grid |
| Title | "Browse by Topic" | Heading above the topic cards |
| Columns | 3 | Number of columns (2, 3, or 4) |
| Card Style | Cards (shadow) | Visual style of topic cards |
Conversation Thread
Customize how individual conversation threads look when a customer opens a ticket.
| Setting | Default | Description |
|---|---|---|
| Customer Message BG | #f9fafb | Background color for messages sent by the customer |
| Agent Message BG | #eef2ff | Background color for messages sent by your support team |
| Thread Border Radius | 12px | Corner rounding on message bubbles |
Opening Hours Display
Style the opening hours widget that appears on the portal.
| Setting | Default | Description |
|---|---|---|
| Open Color | #22c55e | Color shown when your team is currently available |
| Closed Color | #ef4444 | Color shown when your team is offline |
| Card Background | #ffffff | Background color of the hours card |
| Card Border Radius | 12px | Corner rounding on the hours card |
Custom CSS
A free-form CSS textarea for advanced customizations. Any CSS you add here is loaded after the portal styles, so it can override anything.
Since all design settings are output as CSS custom properties (e.g., --hsd-primary, --hsd-bg, --hsd-font-size-base), you can also override them in your theme stylesheet if you prefer.
Settings Reference
| Section | Number of Settings | Key Controls |
|---|---|---|
| Colors | 14 | Brand colors, status colors, text colors |
| Typography | 5 | Font family, sizes, heading weight |
| Layout | 7 | Container width, spacing, border radius, shadows |
| Hero Section | 10 | Title, background, height |
| Topics Section | 4 | Columns, card style |
| Conversation Thread | 3 | Message colors, border radius |
| Opening Hours | 4 | Status colors, card styling |
| Custom CSS | 1 | Free-form CSS |
Tips and Common Questions
I changed a color but nothing happened. What's wrong?
Make sure you clicked Save after making changes. If you want to see changes in real-time, use the Frontend Design Editor from your portal page instead.
Which font should I choose?
If you want your portal to match your theme exactly, choose Inherit from Theme. If you want a clean, modern look regardless of theme, Inter or Poppins are popular choices. System Default is the fastest option since it does not load any external fonts.
Can I use my own custom font?
Yes. Choose Inherit from Theme, then load your custom font in your theme's stylesheet and apply it to the .hsd-portal wrapper.
What's the difference between Card Border Radius and Global Border Radius?
Card Border Radius applies specifically to cards and panels. Global Border Radius is the fallback for all other elements (inputs, dropdowns, badges, etc.).
Will my changes affect the rest of my site?
No. All portal design settings are scoped to the portal pages only. They will not affect your theme or other pages.