Customizing Cockpit with Custom CSS

Cockpit offers a powerful feature that allows Superadmins to add custom CSS styles to modify the appearance of the entire panel. This guide explains how to use the Custom CSS feature and provides examples that match Cockpit's actual structure.

Accessing the Custom CSS Feature

1. Login as a Superadmin
   • Access your Cockpit installation with Superadmin credentials
2. Navigate to Custom CSS Settings
   • Find the Custom CSS section in the Superadmin settings area
   • You'll see a text editor where you can enter your custom CSS code

Important: Using !important to Override Default Styles

Critical Note: Cockpit's default styles are often quite specific and may be difficult to override with standard CSS. To ensure your custom styles take precedence, you should use the !important declaration with most of your CSS rules.

Example CSS Customizations for Cockpit

Changing the Font Family

/* Change the main font for the entire panel */
body, .app-content, .app-sidebar, .app-header {
    font-family: 'Roboto', sans-serif !important;
}

/* Change font for headings and card titles */
.card-title, h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif !important;
}

Modifying Theme Colors

/* Change primary theme color */
:root {
    --app-theme: #3498db !important;
    --app-theme-rgb: 52, 152, 219 !important;
}

/* Change header background */
.app-header {
    background-color: #2c3e50 !important;
}

/* Change sidebar background */
.app-sidebar {
    background-color: #1a2530 !important;
}

/* Change button colors */
.btn-theme {
    background-color: #3498db !important;
    border-color: #2980b9 !important;
}

Adjusting Layout Elements

/* Increase sidebar width */
.app-sidebar {
    width: 250px !important;
}

/* Adjust content area to match new sidebar width */
.app-content {
    margin-left: 250px !important;
}

/* Enhance card appearance */
.card {
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

Customizing Login Screen

/* Change login page background */
.login-cover {
    background-image: url('your-custom-background.jpg') !important;
    background-size: cover !important;
}

/* Style login card */
.login-content .card {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 10px !important;
}

Making Text More Readable

/* Increase text size and improve readability */
.app-content {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Make table text easier to read */
.table td, .table th {
    padding: 12px 15px !important;
    font-size: 13px !important;
}

Best Practices for Custom CSS in Cockpit

• Use browser developer tools to inspect the actual element classes in your Cockpit installation
• Start with small changes and test them before making larger modifications
• Always use the !important declaration to ensure your styles override defaults
• Test your customizations across different browsers and devices
• Add comments to document what each section of your CSS is meant to achieve

By using these more specific selectors that match Cockpit's actual structure, your custom CSS will be more effective at creating the desired appearance.