Applying Custom CSS Styles

AlgoSphere provides a built-in way to apply custom CSS to the admin panel without modifying any core files. Your styles are saved in the database and persist across updates.

Adding Custom CSS

1. Navigate to Setup → Settings → Appearance.
2. Scroll to the Custom CSS section.
3. Enter your CSS in the text area.
4. Click Save.

AlgoSphere injects your CSS into every admin page inside a <style> tag.

Example: Change Colours

/* Override the primary button colour */
.btn-primary {
    background-color: #1a56db !important;
    border-color: #1a56db !important;
}

/* Change sidebar background */
aside.main-sidebar {
    background-color: #0f172a !important;
}

Example: Hide or Restyle Elements

/* Hide the help menu item */
.nav-help-link {
    display: none !important;
}

/* Brand colour on table headers */
table thead th {
    background-color: #1a56db !important;
    color: #ffffff !important;
}

Custom CSS for the Customer Portal

To apply custom CSS to the customer-facing portal, navigate to Setup → Settings → Customer Portal and enter your CSS in the Custom CSS field there.

Custom JavaScript

Add custom JavaScript at Setup → Settings → Appearance → Custom JavaScript. This is injected before the closing </body> tag on every admin page.