Host Custom CSS - Quick Reference Guide

Access Path

Administration → Settings → Host Settings → Customization tab

File Requirements

• Format: .css files only
• Size: Maximum 5MB
• Syntax: Valid CSS required

Basic Operations

Upload CSS

1. Click "Choose file"
2. Select your .css file
3. Click "Upload"
4. Wait for confirmation

Download CSS

• Click "Download" button (when CSS is active)

Remove CSS

1. Click "Remove" button
2. Confirm deletion
3. ⚠️ Cannot be undone - download backup first

CSS Precedence Order

Bootstrap → Theme CSS → Page CSS → HOST CSS → Tenant CSS → Inline CSS
                                     ↑ Your CSS loads here

Common Selectors

Brand Colors

:root {
    --kt-primary: #your-brand-color;
}

.btn-primary, .kt-header {
    background-color: var(--kt-primary) !important;
}

Custom Fonts

@import url('https://fonts.googleapis.com/css2?family=YourFont:wght@400;500;700&display=swap');

body {
    font-family: 'YourFont', sans-serif !important;
}

Header Branding

.kt-header {
    background-color: #your-brand-color;
}

.kt-header-brand-logo img {
    content: url('https://yourdomain.com/logo.png');
    max-height: 40px;
}

Form Builder Styling

.formio-dialog-content {
    background: #your-color;
    font-family: "Your Font", sans-serif;
}

.card-header {
    background-color: #your-brand-color;
    color: white;
}

Quick Troubleshooting

Issue	Solution
Upload fails	Check file size (<5MB) and format (.css)
CSS not applying	Clear browser cache (Ctrl+F5)
Styles overridden	Add !important or use more specific selectors
Broken layout	Check CSS syntax, remove problematic rules

Status Indicators

• "Active": CSS is uploaded and working
• "Not Set": No CSS currently configured
• Last Updated: Shows when CSS was last modified

Best Practices

• ✅ Test in development first
• ✅ Download backup before changes
• ✅ Use specific CSS selectors
• ✅ Include responsive design
• ❌ Don't use overly generic selectors
• ❌ Don't include JavaScript in CSS files

Emergency Reset

If CSS breaks the interface:

1. Use direct database access to clear Host CSS setting
2. Or contact system administrator for assistance