Frontend Design Editor
What It Does
The Frontend Design Editor is a live design editor sidebar — similar to the WordPress Customizer — that lets you preview and save design changes in real-time directly on your portal page. See every change instantly without reloading.
How to Enable / Access
- Log in to WordPress as an administrator.
- Visit any page that uses a DeskPress portal template.
- In the WordPress admin bar at the top of the page, click the "Edit Design" button.
The editor sidebar will slide open from the left side of the screen.
Configuration Walkthrough
Editor Layout
The editor opens as a 360px sidebar panel on the left side of your screen. Your portal page remains visible on the right, and every change you make is reflected instantly — no page reload needed.
Color Fields
Each color setting includes three ways to pick a color:
- Color swatch — Click to open a standard color picker.
- Hex input — Type in an exact hex color code (e.g.,
#6366f1). - EyeDropper tool — Click the eyedropper icon to pick any color directly from the page. (Available in Chrome and Edge version 95 and newer.)
Editor Sections
The sidebar is divided into seven collapsible sections. Click any section heading to expand or collapse it.
1. Global Styles
| Category | Settings |
|---|---|
| Colors | Primary, Secondary, Accent, Background, Surface, Border, Text Primary, Text Secondary, Text Muted |
| Typography | Font family, Base/Small/Large font sizes, Heading weight |
| Layout | Container width, Card border radius, Card shadow, Button border radius, Section spacing |
2. Hero Section
| Setting | Description |
|---|---|
| Show/Hide toggle | Turn the hero section on or off |
| Title | The main heading text |
| Subtitle | Optional supporting text |
| Background Type | Solid color, Gradient, or Image |
| Background Colors | Solid color, or Gradient Start and Gradient End |
| Text Color | Color of the title and subtitle text |
| Min Height | Minimum height of the hero area |
3. Topics
| Setting | Description |
|---|---|
| Show/Hide toggle | Turn the topics grid on or off |
| Columns | Number of columns (2, 3, or 4) |
| Card Style | Shadow, Bordered, or Minimal |
4. Quick Actions
| Setting | Description |
|---|---|
| Show/Hide toggle | Turn the quick actions bar on or off |
5. Conversations
| Setting | Description |
|---|---|
| Show/Hide toggle | Turn the conversations section on or off |
| Customer Message BG | Background color for customer messages in threads |
| Agent Message BG | Background color for agent messages in threads |
| Status Colors | Active, Pending, Closed, and Spam badge colors |
6. Opening Hours
| Setting | Description |
|---|---|
| Open Status Message | Text shown when your team is available |
| Closed Status Message | Text shown when your team is offline |
| Open Color | Color for the "open" status indicator |
| Closed Color | Color for the "closed" status indicator |
| Card Background | Background color of the hours widget |
7. Custom CSS
A free-form CSS textarea. Any CSS you add here takes effect immediately in the preview.
Saving and Canceling
Saving your changes:
- Click the Save button at the bottom of the sidebar.
- Only the settings you actually changed are sent — unchanged settings are not overwritten.
- A brief "Saved!" toast notification confirms your changes were saved successfully.
Canceling your changes:
- Click Cancel to discard all unsaved changes.
- If you have unsaved changes, a confirmation dialog will ask if you are sure. Choosing to cancel will revert the portal to its original appearance.
Navigating away:
- If you try to leave the page or close the tab while you have unsaved changes, the browser will show a warning asking you to confirm.
Need more settings?
- Click the "Advanced Settings" link at the bottom of the sidebar to jump directly to the full Design tab in the WordPress admin.
Settings Reference
| Action | Behavior |
|---|---|
| Save | Sends only changed settings; shows "Saved!" toast |
| Cancel (with changes) | Shows confirmation dialog; reverts styles on confirm |
| Cancel (no changes) | Closes the editor immediately |
| Navigate away (unsaved) | Browser shows a "leave page?" warning |
| Advanced Settings link | Opens DeskPress > Support Portal > Design in admin |
Tips and Common Questions
How do I open the editor?
Visit your portal page while logged in as an admin and click "Edit Design" in the admin bar at the top of the page.
I don't see the EyeDropper icon. Is something wrong?
The EyeDropper tool is only available in Chrome and Edge (version 95 and newer). It will not appear in Firefox or Safari. You can still use the color picker or type hex codes manually.
Can I use the editor on all portal templates?
Yes. The Frontend Design Editor works on all four portal templates: Portal, Dashboard, Starter, and Custom.
What if I save something I don't like?
Just open the editor again and change the setting back. You can also reset all design settings from the admin Design tab.
Is this the same as the Design tab in the admin?
They control the same settings. The Frontend Design Editor is a visual, live-preview way to make changes. The admin Design tab shows all settings in a traditional form layout. Changes made in either place are reflected in the other.