Syntaq Falcon

Appearance

Host Custom CSS Management ​

Overview ​

The Host Custom CSS feature allows system administrators to customize the visual appearance of their Syntaq Falcon application across all tenants. This feature provides a centralized way to apply branding, styling modifications, and visual consistency throughout the entire platform.

Key Features ​

  • Global Branding: Apply custom styles to all tenants simultaneously
  • Theme Compatibility: Works seamlessly with all 13 built-in themes
  • Tenant Override: Tenant-specific CSS can still override host CSS when needed
  • User-Friendly Interface: Simple upload and management through Host Settings
  • Error-Resilient: Failed CSS loads don't break application functionality

Accessing Host Custom CSS ​

  1. Login as Host Administrator

    • Navigate to the Host Administration area
    • Ensure you have Host Management permissions

  2. Open Host Settings

    • Go to Administration → Host Settings
    • Click on the Customization tab

Managing Host Custom CSS ​

Uploading Custom CSS ​

  1. Prepare Your CSS File

    • Create a .css file containing your custom styles
    • Ensure file size is under 5MB
    • Test styles locally before uploading

  2. Upload Process

    • Click Choose file in the Host Custom CSS section
    • Select your prepared CSS file
    • Click Upload to apply the styles

  3. Verification

    • The status will change to "Active" upon successful upload
    • Refresh any open pages to see the changes
    • Test across different themes to ensure compatibility

Downloading Current CSS ​

  • Click the Download button to retrieve the currently active host CSS file
  • Use this to backup your styles or make modifications locally

Removing Host CSS ​

  1. Click the Remove button next to the download option
  2. Confirm the removal in the dialog that appears
  3. The status will change to "Not Set" and styles will be removed immediately

CSS Development Guidelines ​

Best Practices ​

1. Use Specific Selectors ​

css
/* Good: Specific to your branding */
.your-brand .header-title {
    color: #your-brand-color;
}

/* Avoid: Too generic, may affect other elements */
.header-title {
    color: #your-brand-color;
}

2. Respect Existing Layouts ​

css
/* Good: Additive styling */
.kt-header__brand {
    background-color: #your-color;
    border-bottom: 2px solid #accent-color;
}

/* Avoid: Disruptive changes */
.kt-header__brand {
    position: absolute; /* Could break layout */
    width: 50%; /* Could break responsiveness */
}

3. Theme Compatibility ​

css
/* Good: Works with light and dark themes */
.your-custom-element {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Consider: Theme-specific styling if needed */
[data-theme="dark"] .your-custom-element {
    border-color: rgba(255, 255, 255, 0.2);
}

4. Responsive Design ​

css
/* Good: Mobile-first responsive design */
.your-branding {
    font-size: 14px;
}

@media (min-width: 768px) {
    .your-branding {
        font-size: 16px;
    }
}

@media (min-width: 1200px) {
    .your-branding {
        font-size: 18px;
    }
}

Common Use Cases ​

Corporate Branding ​

css
/* Header branding */
.kt-header__brand-logo img {
    max-height: 40px;
    width: auto;
}

/* Color scheme */
:root {
    --primary-color: #your-primary;
    --secondary-color: #your-secondary;
    --accent-color: #your-accent;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

Custom Fonts ​

css
/* Import custom fonts */
@import url('https://fonts.googleapis.com/css2?family=Your+Font:wght@300;400;700&display=swap');

/* Apply to specific elements */
.kt-header__brand,
.kt-subheader__title,
h1, h2, h3 {
    font-family: 'Your Font', sans-serif;
}
css
.kt-footer {
    background-color: #your-footer-color;
    border-top: 3px solid #your-accent-color;
}

.kt-footer__copyright {
    color: #your-text-color;
}

CSS Loading Order and Precedence ​

Understanding the CSS loading order helps you write effective custom styles:

  1. Framework CSS (Bootstrap, Metronic)
  2. Theme CSS (Theme-specific styles)
  3. Host Custom CSS (Your global styles) ← Applied Here
  4. Application CSS (Falcon-specific styles)
  5. Tenant Custom CSS (Tenant-specific overrides)

Specificity Guidelines ​

css
/* Low specificity - may be overridden */
.header { color: blue; }

/* Medium specificity - better */
.kt-header .header-title { color: blue; }

/* High specificity - use sparingly */
body .kt-header .kt-header__brand .header-title { color: blue; }

/* Highest specificity - last resort */
.header-title { color: blue !important; }

Troubleshooting ​

Common Issues ​

1. Styles Not Appearing ​

Symptoms: CSS uploaded successfully but changes not visible Solutions:

  • Clear browser cache (Ctrl+F5 or Cmd+Shift+R)
  • Check browser developer tools for CSS errors
  • Verify CSS selector specificity
  • Ensure CSS syntax is valid

2. Layout Breaking ​

Symptoms: Page layout appears broken after applying CSS Solutions:

  • Remove the custom CSS temporarily
  • Review changes to position, float, or display properties
  • Test with different themes
  • Use browser developer tools to identify conflicting styles

3. Mobile Issues ​

Symptoms: Desktop looks good but mobile layout is broken Solutions:

  • Test responsive design at different screen sizes
  • Use mobile-first CSS approach
  • Avoid fixed widths and heights
  • Test on actual mobile devices

4. Theme Switching Problems ​

Symptoms: Styles work with one theme but not others Solutions:

  • Test with all available themes
  • Use theme-agnostic selectors when possible
  • Implement theme-specific overrides if needed
  • Check dark mode compatibility

Debugging Tools ​

Browser Developer Tools ​

  1. Right-click on any element → Inspect Element
  2. Use the Elements tab to see applied styles
  3. Use the Console tab to check for CSS errors
  4. Use the Network tab to verify CSS file loading

CSS Validation ​

  • Use online CSS validators to check syntax
  • Test CSS in isolation before uploading
  • Validate against CSS3 standards

Performance Considerations ​

File Size Optimization ​

  • Minimize CSS files before uploading
  • Remove unused styles and comments
  • Use shorthand properties where possible
  • Consider using CSS preprocessors (SASS/LESS) for development

Loading Performance ​

  • Keep CSS files under 5MB (system limit)
  • Avoid complex selectors that slow rendering
  • Use efficient CSS properties
  • Minimize use of !important

Browser Compatibility ​

  • Test in all supported browsers:
    • Chrome (latest)
    • Firefox (latest)
    • Safari (latest)
    • Edge (latest)
  • Use CSS features supported across browsers
  • Provide fallbacks for newer CSS properties

Security Considerations ​

Safe CSS Practices ​

  • Only upload CSS from trusted sources
  • Avoid external resource imports when possible
  • Don't include sensitive information in CSS comments
  • Regularly review and update custom styles

Content Security Policy ​

  • Ensure CSS complies with your CSP settings
  • Avoid inline styles in CSS (use classes instead)
  • Test CSS with strict CSP policies

Advanced Features ​

CSS Custom Properties (Variables) ​

css
:root {
    --brand-primary: #007bff;
    --brand-secondary: #6c757d;
    --brand-success: #28a745;
    --brand-font-family: 'Your Brand Font', sans-serif;
}

/* Usage throughout your CSS */
.btn-primary {
    background-color: var(--brand-primary);
}

.brand-text {
    font-family: var(--brand-font-family);
}

Media Queries for Different Contexts ​

css
/* Print styles */
@media print {
    .no-print { display: none; }
    .kt-header { background: white !important; }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url('high-res-logo.png');
        background-size: 100px 50px;
    }
}

Maintenance and Updates ​

Regular Maintenance ​

  • Review CSS effectiveness quarterly
  • Update styles when themes are updated
  • Monitor performance impact
  • Keep backup copies of working CSS files

Version Control ​

  • Maintain version history of your CSS files
  • Document changes and reasons
  • Test thoroughly before applying updates
  • Keep rollback versions available

Support and Resources ​

Getting Help ​

  • Check the Syntaq Falcon documentation
  • Review browser developer tools for errors
  • Test CSS changes in a development environment first
  • Contact support with specific error messages and browser information

Additional Resources ​

This documentation was last updated: [Current Date]For technical support, contact: [Support Information]

Syntaq Falcon user documentation

Copyright © 2026 Syntaq Solutions