Customize Portal Branding: Colors, CSS, and Text Editor

Make the support portal match your brand with custom colors, CSS overrides, and text editor preferences. This is a Pro feature.

Accessing Style Settings

Go to Support Genix > Settings > General > Style.

Brand Colors

Customize two primary colors used throughout the portal and dashboard:

Primary Brand Color

Setting	Default	Format
Primary Brand Color	#0bbc5c (green)	Hex color code

The primary color is used for:

• Buttons and call-to-action elements
• Links and clickable text
• Active/selected state indicators
• Section headers and highlights

Secondary Brand Color

Setting	Default	Format
Secondary Brand Color	#ff6e30 (orange)	Hex color code

The secondary color is used for:

• Hover states on buttons and links
• Badges and tags
• Accent elements and callouts
• Supporting visual highlights

How to Change Colors

1. Click the color field to open the color picker.
2. Choose your color visually or enter a specific hex code.
3. Click Save.

The changes apply immediately across the entire portal.

Tips for Choosing Colors

• Use your brand’s primary color as the Primary Brand Color.
• Choose a complementary or accent color for the Secondary Brand Color.
• Ensure sufficient contrast between your colors and white/dark backgrounds for accessibility.
• Test on both desktop and mobile after changing colors.

Text Editor Selection

Choose which rich text editor is used for composing ticket replies and notes.

Option	Description
TinyMCE (default)	Full-featured WYSIWYG editor with comprehensive toolbar. Better for rich formatting, media embedding, and complex content.
Quill	Lightweight, modern editor with a minimal toolbar. Better for faster loading and simpler content.

How to Change

1. Select either TinyMCE or Quill from the dropdown.
2. Click Save.

Both editors support:

• Bold, italic, underline
• Ordered and unordered lists
• Links
• Code formatting

TinyMCE additionally supports:

• Media insertion
• Table creation
• More formatting options
• HTML source editing

Editor Height

Setting	Default	Range
Text Editor Height	180px	Minimum 100px

Adjust the default height of the text editor. A taller editor is useful if your agents write longer responses.

Custom CSS

Add custom CSS rules to override any styling in the portal.

How to Add Custom CSS

1. In the Custom CSS field, write your CSS rules.
2. Click Save.

The CSS is applied globally to both the portal and admin interface.

Common Customizations

Change the header background:

.sg-header {
    background-color: #1a1a2e;
}

Customize button styling:

.ant-btn-primary {
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
}

Add a left border to ticket items:

.sg-ticket-item {
    border-left: 4px solid #0bbc5c;
}

Change font family:

.support-genix-portal {
    font-family: 'Inter', -apple-system, sans-serif;
}

Hide an element:

.element-class-to-hide {
    display: none !important;
}

Tips for Custom CSS

• Use your browser’s Inspect Element tool to find the CSS class names of elements you want to style.
• Be specific with selectors to avoid unintended side effects.
• Use !important sparingly — only when needed to override existing styles.
• Test your CSS on different screen sizes (desktop, tablet, mobile).
• Keep a backup of your custom CSS in case you need to revert.

Portal Logo and Branding

In addition to colors and CSS, you can customize the portal header:

Go to Support Genix > Settings > General (Main settings):

Setting	Description
App Logo	Upload a custom logo displayed in the portal header.
App Favicon	Upload a custom favicon for the portal browser tab.
Footer Copyright Text	Customize the footer text. Supports placeholders: [site_title], [site_url], [site_link], [year].
Hide Copyright Text	Toggle to completely hide the footer copyright.

Related Docs

• Customize Ticket Status Labels
• Admin Dashboard Overview