Never mistake your production, staging and local environments with Craft CMS

Have you ever accidentally changed something in your staging environment when you meant to make the change in production? Let's make sure that never happens again.

In this post, I'll share how I use Control Panel CSS, a free Craft 5 plugin, and some garish design choices to make it blatantly obvious which Craft CMS environment I am working in.

Just how distressing can these designs be? Take a look at the screenshots below.

The magic 🌈 behind these hard-to-miss designs is the Control Panel CSS plugin, combined with some straightforward CSS files and a couple of images.

I've chosen electric 🟢 green for my local dev environment and a shocking 🔴 red for the staging environment. Static images also watermark each screen.

The production environment remains unchanged. Clients will see the clean and refined control panel that ships with Craft.

How to set this up

Download the files from my GitHub repo. The essential CSS and image files are in the static directory.

Save the static directory to your public files directory, typically the web directory.

/static
├── css
|  ├── cp_dev.css
|  └── cp_staging.css
├── local_id.png
└── staging_id.png

In your local .env file, add a variable pointing to the developer site's CSS file:

CP_CSS_PATH=/static/css/cp_dev.css

In your staging .env file do the same update.

CP_CSS_PATH=/static/css/cp_staging.css

Because we don't intend to alter the production site, leave your production .env file unchanged.

Next, install  Control Panel CSS. In the plugin's settings page, set the CSS File path to the $CP_CSS_PATH you created above.

Push the updated files to your staging and production environments, and you're done.

Can it get any worse? I hope so!

If you customize your local and staging environments to be even more flashy, please post them on Threads and tag me. I'd love to see your designs!