Dashboard Styling for Different Environments

Rakitha Dharmasena asked on August 9, 2018 07:32

Hi guys,

I need to style the dashboard of Kentico admin with different colors for different environments. I found the following article that explains how to style a particular instance of Kentico :

https://devnet.kentico.com/articles/modifying-the-dashboard-styling-in-kentico-10

But in my case , the customer has 3 environments ( Staging , UAT and Live ) for which they want different colors for different environments.

i.e - Staging environment admin dashboard should be green
UAT environment admin dashboard should be red
Live environment admin dashboard should be blue

How to achieve this in a proper manner ? I can add a unique class on the PortalTemplate.aspx file of each environment and achieve this but that would be troublesome with managing deliveries and updates.

kentico 10 dashboard styles

Recent Answers

Brenden Kehren answered on August 9, 2018 08:06

Like the article states use different styling for the UI. You could add 3 different head html webparts to your master page and simply set the visibility by checking the URL with a macro. Each of the webparts would have unique styling to it to set the header of the UI to the color you want.

Another option is to limit the editors from production.

0 votesVote for this answer Mark as a Correct answer

Zach Perry answered on August 9, 2018 16:13 (last edited on December 10, 2019 02:31)

For the live site I used a setting then just a macro in the CSS: {%Settings["EnvBGcolor"]|(identity)GlobalAdministrator%}

This doesn't work for the dashboard/admin. The way I used to do it for the dashboard was just having different branches for each environment, and i would change the CSS per branch and never merge those changes together. Like you said it became a hassle and I just removed it during the last upgrade.

Reading that article it mentions using grunt.js to compile less. This article looks like you can configure grunt to do string replacements per environment.

0 votesVote for this answer Mark as a Correct answer