Custom CSS enables you to implement unique branding, enhance user interface designs, and tailor specific components to align with your company’s visual identity.
This guide covers the best practices, syntax, and essential features for writing and applying Custom CSS to your portal.
You can alter the CSS of your portal by navigating to Settings > Portal Settings > Custom CSS.
ℹ️ This feature is available on our Enterprise plan.
Example
.portal-button.portal-button-rounded {
color:brown;
border-radius: 20%;
background-color: aqua;
}
.portal-button {
color: gold;
}
1. Basic CSS Syntax
CSS is structured around selectors and declarations. A declaration contains properties and their corresponding values enclosed in curly braces {}.
cssCopy codeselector { property: value; }Example:
cssCopy codeh1 { color: blue; font-size: 24px; }2. Common CSS Selectors
Type Selector: Styles all elements of a given type.
cssCopy codep { color: red; }Class Selector: Styles elements with a specific class.
cssCopy code.my-class { margin: 20px; }ID Selector: Styles a unique element based on its ID.
cssCopy code#my-id { padding: 10px; }Universal Selector: Applies styles to all elements.
cssCopy code* { box-sizing: border-box; }3. Class Naming Conventions
Custom CSS in the portal follows a clear naming convention where all class names begin with .portal-, which helps avoid conflicts with global styles.
Examples include:
.portal-button.portal-card.portal-body
4. CSS Variables
Use these CSS variables to maintain a consistent theme across your portal:
Variable Name | Description |
| Main background color. |
| Secondary background color for other sections. |
| Color for error messages. |
| Color for success messages. |
5. Status Colors
These colors apply to messages or statuses, making your UI more intuitive:
Variable Name | Purpose |
| For information messages. |
| For warning messages. |
| For success notifications. |
👇 Please see below for an example css file to get you started.