---
title: "Never mistake your production, staging and local environments with Craft CMS"
date: 2024-06-12T09:22:00-04:00
author: John Morton
canonical_url: "https://supergeekery.com/blog/never-mistake-your-production-staging-and-local-environments-with-craft-cms"
section: Blog
---
# Never mistake your production, staging and local environments with Craft CMS

*June 12, 2024* by John Morton

*Audio narration available for this post.*

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**](https://plugins.craftcms.com/cp-css?craft5), 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.
![Sample of local control panel](https://static.supergeekery.com/site-assets/sample-of-local-control-panel.png)
![Sample of staging control panel](https://static.supergeekery.com/site-assets/sample-of-staging-control-panel.png)
![Sample of production control panel](https://static.supergeekery.com/site-assets/sample-of-production-control-panel.png)
*Screenshots of local, staging, and production Craft CMS control panels.*
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](https://github.com/johnfmorton/never-update-the-wrong-craftcms-environment-again). The essential CSS and image files are in the `static` directory.

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

```plaintext
/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:

```plaintext
CP_CSS_PATH=/static/css/cp_dev.css
```

In your staging `.env` file do the same update.

```plaintext
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**](https://plugins.craftcms.com/cp-css?craft5). In the plugin's settings page, set the CSS File path to the `$CP_CSS_PATH` you created above.
![The Control Panel CSS settings screen](https://static.supergeekery.com/site-assets/2024-06-12_10-30-31.png)
*Customize the Control Panel CSS settings to use your .env variable.*
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](https://www.threads.net/@johnfmorton). I'd love to see your designs!

---

**Tags:** craftcms

## Related Posts

- [Customizing the CKEditor in Craft CMS](https://supergeekery.com/blog/customizing-the-ckeditor-in-craft-cms)
- [The HTML email template in Craft CMS](https://supergeekery.com/blog/craftcms-html-email-template-missing-documenation)
- [Configuring Craft CMS with Redis for use on Heroku](https://supergeekery.com/blog/heroku-redis-sll-configuration)