Custom CSS allows you to visually customize HappyFox Support Center and Contact portal to better match your brand or improve usability, without changing the core functionality. You can adjust colors, spacing, fonts, visibility of elements, and layout behavior using simple CSS rules.
This article explains where and how to add custom CSS, followed by five practical examples you can copy and adapt.
Where to Add Custom CSS
-
Navigate to Main Menu > Support Center > Code Customizations → Custom CSS.
Note: Ensure to select the correct brand from the top right brand dropdown
-
Paste your CSS code into the editor.
-
Save the changes.
-
Refresh the page to see the updates.
Tip: Changes apply instantly on refresh. If you don’t see updates, clear your browser cache or use a hard refresh.
Basic Structure of CSS
A CSS rule consists of:
selector { property: value; }
-
Selector – The element you want to style
-
Property – What you want to change
-
Value – The new setting
Example 1: Change the Primary Button Color
Use this to align buttons with your brand colors.
Note: The selectors used in the following examples are generic, only for reference. Please pick the correct selector from your HappyFox support center.
button.primary, .btn-primary
{
background-color: #4a90e2;
border-color: #4a90e2;
}
What this does:
-
Changes the background and border color of primary action buttons.
Example 2: Increase Font Size for Better Readability
Helpful if text feels too small for users.
body { font-size: 16px; line-height: 1.6; }
What this does:
-
Improves overall readability across the application.
Example 3: Hide an Unused Section or Field
You can visually remove elements that are not relevant to your workflow.
#secondary-sidebar, .unused-section { display: none; }
What this does:
-
Completely hides the specified section from view.
-
The data still exists; it is only hidden visually.
Example 4: Highlight Important Status Labels
Use this to draw attention to critical states like “Overdue” or “High Priority”.
.status-overdue
{ background-color: #ffe5e5; color: #b00020; font-weight: bold; padding: 4px 8px; border-radius: 4px; }
What this does:
-
Makes important labels stand out clearly.
Example 5: Adjust Spacing Between Form Fields
Useful when forms feel crowded.
.form-group { margin-bottom: 16px; }
What this does:
-
Adds more vertical space between input fields for a cleaner layout.
Best Practices
-
Start small—test one change at a time.
-
Avoid using
!importantunless absolutely necessary. -
Use browser developer tools (Right-click → Inspect) to identify element selectors.
-
Custom CSS affects appearance only and may need updates if the UI changes in future releases.