Easily differentiate Kentico environments
Technical | Kentico
Drazen Janjicek

By Drazen Janjicek | Principal Consultant 14.09.2018.

Easily differentiate Kentico environments

In a fast-moving world where things often need to happen quickly, multi-tasking has become more and more common. We constantly switch between tasks and try to keep the focus on all of them as much as possible. All modern web browsers support multi-tasking by offering multiple tabs in which we can work on different websites at the same time, and switch from one to another easily. Constantly you see web developers having opened maybe 10 or more tabs simultaneously, while the same applies to other types of individuals - like content editors.

Both developers and content editors frequently work on different environments of a website at the same time. Think of comparing content or configurations between environments, modifying content on a production environment, while troubleshooting issues on a staging environment. Basically, every task that might span multiple environment fits this need to keep focus on where things are actually happening.

And how often have we seen that we opened the wrong tab by accident and performed some change on the wrong environment?

I've seen a few web content management systems that help with that by providing some sort of differentiation between environments. Often some visual indication that tells the user where he is currently working. With Kentico this is not possible out-of-the-box, unfortunately. But like with everything else, this can be changed very easily. Last year Bryan Soltis has published a blog post about 'Modifying the Dashboard Styling in Kentico 10' which is exactly what I am talking about. Simply overriding a few CSS classes can provide that kind of clarification, on which environment things are happening. Thanks Bryan for that!

At EXLRT we have done this a couple of times, and while doing the same thing over and over again for different projects, we decided to create a simple Kentico module in which a few things can be configured and applied to a specific Kentico driven website. In our module (we call it Environment Theme), we can configure the look & feel of the top header section of the Kentico administration interface through the Kentico Settings application. Supported modifications are:

  • Applying a custom header background color
  • Applying a custom header foreground color
  • Displaying a custom name for the current environment
Look & feel customization applied through a couple of settings Look & feel customization applied through a couple of settings

And of course, as with all other settings, these modifications can vary between websites living in Kentico. After entering a value for the provided settings and refreshing the browser, the visual changes are directly visible in the administration interface.

Identify the current environment easily Identify the current environment easily

By creating this module, we don't lose time for each project to set up things from scratch, and we want to share this module with you. You can download it on the well-known Kentico marketplace for free. Currently Kentico 11 is supported, but the logic behind this will most likely work with other Kentico versions as well. You just need to update the cms_info.xml.export file within the installation package, to match your desired version of Kentico and then you should be able to install it. Of course, unless namespaces have changed between versions.

Want to try our module? Click the link below and download it from the marketplace.
https://devnet.kentico.com/marketplace/utilities/environment-theme

Note: This extension does not support website projects. Only Kentico installations of type web application are supported. ASP.NET website projects by nature don't support the concept of partial classes which we use for adding the desired functionality.

Drazen Janjicek

By Drazen Janjicek | Principal Consultant 14.09.2018.