Tips to Easily Know the CMS Environment You Are Working In

Having both a Development/Test and Production environment is great, but if you work in both environments often, you constantly find yourself checking the URL to confirm which environment you are in. Or even worse, your staff logs into what they believe is Production and starts their day, only to realize they are working in Dev. There are a few options that we have helped customers implement to quickly determine which environment they are working in, so thought it would be great to share with everyone.

CMS Login Screen Changes

The default login screen of Ticketure, while pretty doesn't do much to tell me which environment you are signing into. 

A year+ ago we introduced a configuration item within Portal/Settings called 'CMS Log In screen appearance'. This configuration allows you to change the background of the CMS log in screen, as well as the background color. For my demo environment, my login screen is the following.

For Production, we often see clients deciding to put an image of their building or something related to their organization as the background to provide some branding of Ticketure for the organization.

In addition, we often suggest that for the dev environments at a minimum change the background color of the login to give a stark contrast that the environment is different, and the user can quickly notice/confirm at the time of login they are in the right spot. 

CMS - Stylish Extension Changing Page Elements

While the tip above is great for the login screen, after you have logged in, all the pages look the same -- until now. Enter the Stylish browser extension. Now you can change your CMS coloring based on your environment. Ex: Make the banner red when logged into Dev/Prod.

Stylish allows for a different CSS to be applied when you visit a certain site - in this case, a Production (or Dev) Ticketure instance. By leveraging Stylish, you can change your Production/Dev CMS instance to have a different color banner based on the environment that you are logged into. For example, I wanted to ensure that any Production environment I logged into had a bright red banner so with a quick configuration, I went from the standard banner to easily knowing when I am in Production environments. 

Default Color

Grab the Stylish Extension 

There are 2 different styles that are available based upon which environment you want to have the header red.

Dev (d1tix.com; f1tix.co.uk; ticketuretest.com) - for those who want their Development/Test environment to have the red header/footer

Prod (ticketure.com; ticketure.co.uk; ticketure.net) - for those who want their Production/Live environment to have the red header/footer

As always ads are everywhere, so don't click the big green 'Download' button, click the 'Install Style' option as shown in the image below. 

Note

Stylish will request that you create an account so apologies for that. We are evaluating rolling the ability to change header/banner into our CMS Appearance config item to accomplish the below, so hopefully in the future you will be able to do this through the CMS. 

If you don't have the Stylish extension already installed, you will be prompted to enable the extension, just click 'Get The Extension', 

Add it to Chrome and finally, enable for browser and agree to the user agreements with Stylish.

 

 

Once complete, you notice the red banner for the header and footer for the environment you selected.

Don't like the red? - You can tweak this style to adjust it to your liking by clicking on the 'Extensions' manager in the upper right of the Chrome browser and clicking the 'Stylish' extension.

Click the 'My Styles' option, you should see the Style in the list of Current Websites. Click the 'Open in Editor' option. 

From there, you will see the CSS that is being applied to the page and you are welcome to modify the CSS to your liking.


Was this article helpful?
0 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.