Liquid has been using Umbraco (“the Friendly CMS”) for quite a while now. If you haven’t downloaded the latest Umbraco version (8.10 as of this writing) you really should take advantage of some of the great features of this major upgrade like Infinite Editing, Language Variants, Content Apps, and Block List Editing (learn more about Umbraco 8).
The first thing you may notice when logging in to the Umbraco backoffice is the odd selection of colors chosen for this version. Specifically the salmon color that seems to be very prominent. It is in the main navigation, sub-navigation, Users and especially in Nested Content and Block List editors.
2020colours.com (http://www.2020colours.com/f5c1bc) identifies the culprit as “Faux-Spanish Pink”. The last sentence says it all.
If the new color scheme triggers you as much as it does everyone I’ve talked to, then you will definitely want to change it to something more friendly and familiar, along the lines of what it was in Umbraco 7. Here’s how.
First, create a new folder (BackofficeStyles in our case) under App_Plugins. Then add backoffice.css and package.manifest files.
The backoffice.css file contains the styles that you want to override the default styles with. These were obtained by inspecting the html elements of the backoffice to see what styles to target.
The package.manifest file contains a reference to the CSS file containing the overriding styles used.
After our changes, Umbraco backoffice now looks similar to how it did in Version 7.
Liquid has created a package that installs the CSS and manifest files for you. Once installed, you can enjoy the salmon-less theme, or tailor the colors to match your company’s or client’s branding. It’s also easy to add new elements you want to update.
Installing a package is simple. First, download the Liquid Backoffice Styles package here (Backoffice_Styles_-_v8_1.0.0.zip) and save it locally. Then login to your Umbraco backoffice and navigate to the Packages section from the main navigation. Click “Install local” on the top right.
Then simply drag and drop the downloaded Zip file where indicated on the page, accept the terms of use and click the Install Package button. Once the page refreshes you will see the new backoffice colors.
If you enjoyed this content, check out our blog for more!