Posted in EPiServer

EPiServer’s new design: like or dislike?

Let me be frank with you: I don’t only dislike it, I shudder at the sight of it.

episerver_com

I loathe the new blue color theme and my first thought was:

.mainColor{
   background-color: blue;
}

Still I have to visit the website more than once a week. So I came up with a little fix to lessen the burden to my eyes.

I downloaded Tampermonkey for Chrome and started hacking the blue away:

// ==UserScript==
// @name         EPiPrettifier
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Get rid of the blue!
// @author       Esatto
// @match        http://www.episerver.com/*
// @grant        none
// ==/UserScript==
/* jshint -W097 */
'use strict';

// Header
$('.app-bar').css('background-color', "#e57e14");
$('.navdrawer-container ul li a').css('color', 'white'); 
$('.app-bar button').css('color', 'white'); 
$('.flaticon-arrow-down').css('color', 'white'); 
$('.sub-nav > ul').css('background-color', "#e57e14");

// Buttons
$('.button--primary').css('background-color', '#e57e14');
$('.button--primary-inverted').attr('style', 'color:#e57e14 !important;border-color:#e57e14');
$('.button--primary-inverted').mouseover(function() {this.style.color='white !important';this.style.backgroundColor='#e57e14';});
$('.button--primary-inverted').mouseout(function() {this.style.color='#e57e14 !important';this.style.backgroundColor='white';});

// Footer
$('#site-footer').css('background-color', '#e57e14');
$('#site-footer .heading').css('color', 'white');
$('#site-footer .heading a').css('color', 'white');
$('#site-footer a').css('color', 'white');
$('#site-footer input[type="text"]').css('background-color', 'white');
$('#site-footer input[type="text"]').css('border-color', 'white');
$('#site-footer hr').css('border-color', 'white');

The result is much more pleasing:

episerver_com_fresh

Be nice to your eyes and do it as well! If you use Firefox you should be able to do the same with Greasemonkey.

Leave a Reply