Welcome to your comprehensive guide on the Control Panel CSS plugin for Craft CMS! This powerful tool allows you to personalize your control panel by adding custom CSS, letting you style your dashboard just the way you like it. Whether you’re looking for a complete overhaul or just a subtle tweak, let’s dive in and get you started!

Getting Started: Installation

First things first, you need to install the Control Panel CSS plugin. Once installed, navigate to:

• Settings → Control Panel CSS

Here, you can begin customizing the styling of your control panel.

Adding Your Custom CSS

After accessing the Control Panel CSS settings, you have two options for saving your custom CSS:

• 1) An external file in your public directory
• 2) The Additional CSS field on the settings page

You can choose to use one or both methods as per your preference. This allows for a seamless integration that suits your workflow!

Starter Code Snippet

To jump-start your customization journey, here’s a handy CSS snippet you can start with:

/* Sidebar background color */
#global-sidebar {
    background: #333f4d;
}

/* Header background color */
#main-container #main #header {
    background: #ebedef;
}

/* H1 tags */
h1 {
    color: #29323d;
}

/* Standard button color */
.btn.submit {
    background: #da5a47;
}

/* Hover button color */
.btn.submit:not(.disabled):not(.inactive):hover,
.btn.submit:not(.disabled):not(.inactive).hover {
    background: #bf503f;
}

/* Active button color */
.btn.submit:not(.disabled):not(.inactive):active,
.btn.submit:not(.disabled):not(.inactive).active {
    background: #8c3b2e;
}

If you prefer, you can also find the same code as a Gist.

Ensuring Freshness with File Hashing

To make sure your custom CSS always reflects the latest changes, a cache-busting hash is auto-appended to each file reference. If you want to disable this feature, set cacheBusting to false in your PHP config file like so:

# Disable hash-based cache busting
cacheBusting = false

Be sure to follow the usage instructions in the config file for a smooth experience!

Troubleshooting

Here are a few troubleshooting ideas to help you through any difficulties you may encounter:

• Check CSS Loading: Ensure your custom CSS file is correctly referenced in your settings or public directory.
• Fix Caching Issues: If changes aren’t appearing, clear your browser cache and refresh the page.
• Use Browser Developer Tools: Inspect elements to verify if your CSS styles are being applied and troubleshoot conflicts.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Explore More Plugins

Don’t forget, there are many other plugins available to enhance your Craft CMS experience. Check out the full catalog at plugins.doublesecretagency.com.

Closing Thoughts

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Enjoy your customized Control Panel!