diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 9be23979cf..61e058792d 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -2193,9 +2193,9 @@ body {
   padding: 0;
   height: 100%;
   width: 100%;
-  border-bottom: 0px solid #7E7E7E;
+  border: none;
   margin: 0;
-  background-color: #408dd2;
+  background-color: white;
 }
 #loginMainDiv #divAppIconBar {
   margin-left: auto;
@@ -2207,31 +2207,20 @@ body {
 #loginMainDiv #divAppIconBar #divLogo {
   position: relative;
   top: 1px;
-  background-color: #408dd2;
 }
 #loginMainDiv #divAppIconBar #divLogo img {
-  /*width: 70%;*/
-  /*margin-left: 15%;*/
   margin: 0 auto;
   max-width: 400px;
 }
 #loginMainDiv #divAppIconBar #divLogo img[src$="svg"] {
   width: 70%;
   max-width: 2560px;
-  background-color: #408dd2;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNDA4ZGQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNDA4ZGQyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
-  background-image: -moz-linear-gradient(top, #408dd2, #408dd2);
-  background-image: -ms-linear-gradient(top, #408dd2, #408dd2);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#408dd2), to(#408dd2));
-  background-image: -webkit-linear-gradient(top, #408dd2, #408dd2);
-  background-image: -o-linear-gradient(top, #408dd2, #408dd2);
-  background-image: linear-gradient(top, #408dd2, #408dd2);
-  background-repeat: repeat-x;
 }
 #loginMainDiv div#centerBox {
   margin: 0% auto;
   width: 57em;
-  background-color: #ffffff;
+  background-color: #cdcdcd;
+  border: none;
   z-index: 100;
   padding: 25px 10px 10px;
   -webkit-border-top-right-radius: 5px;
@@ -2247,20 +2236,6 @@ body {
   border-bottom-left-radius: 5px;
   border-top-left-radius: 50px;
   /*.background-clip(padding-box);*/
-  background-color: #4385c0;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
-  background-image: -moz-linear-gradient(top, #679fd2, #0c5da5);
-  background-image: -ms-linear-gradient(top, #679fd2, #0c5da5);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#679fd2), to(#0c5da5));
-  background-image: -webkit-linear-gradient(top, #679fd2, #0c5da5);
-  background-image: -o-linear-gradient(top, #679fd2, #0c5da5);
-  background-image: linear-gradient(top, #679fd2, #0c5da5);
-  background-repeat: repeat-x;
-  border-top: solid 1px #0c5da5;
-  border-left: solid 1px #0c5da5;
-  border-right: solid 1px #0c5da5;
-  border-bottom: solid 1px #679fd2;
-  border-width: 1px;
 }
 #loginMainDiv div#centerBox #loginScreenMessage {
   margin: 1em;
@@ -4176,7 +4151,6 @@ td.message span.message {
 #egw_fw_header {
   width: 100%;
   float: left;
-  background-color: #679fd2;
   /* Logo EGW or Company - left top*/
   /*  ###########################################################################################################################################
     Topmenu / Home / Einstellungen / Zugriff / Kategorien usw..
@@ -4253,11 +4227,11 @@ td.message span.message {
   text-decoration: none;
   height: 32px;
   /*font-size: 1.1em;*/
-  font-size: 12.1px;
+  font-size: 12.100000000000001px;
   line-height: 1.5em;
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
-  color: #e6e6e6;
+  /*color: @gray_10;*/
   border-color: #828282;
   text-decoration: none !important;
 }
@@ -4277,7 +4251,7 @@ td.message span.message {
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
   padding-right: 20px;
-  font-size: 12.1px;
+  font-size: 12.100000000000001px;
   content: " ";
   background-image: url(../images/topmenu_items/home.png);
   background-repeat: no-repeat;
@@ -4675,7 +4649,7 @@ td.message span.message {
   padding-left: 3em;
   color: #999999;
   /*font-size: 12px;*/
-  font-size: 12.1px;
+  font-size: 12.100000000000001px;
   line-height: 17px;
 }
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@@ -4846,7 +4820,7 @@ td.message span.message {
   margin: 5px 0px 3px 5px;
   padding: 0px 0px 0px 15px;
   line-height: 1em;
-  font-size: 12.1px;
+  font-size: 12.100000000000001px;
   background-image: url(../images/arrow_left.png);
   background-repeat: no-repeat;
   background-position: left center;
diff --git a/pixelegg/hook_settings.inc.php b/pixelegg/hook_settings.inc.php
index 46216e180a..f8d1efa2bc 100644
--- a/pixelegg/hook_settings.inc.php
+++ b/pixelegg/hook_settings.inc.php
@@ -104,6 +104,24 @@ $GLOBALS['settings'] = array(
 		'xmlrpc' => True,
 		'admin'  => False,
 	),
+	'sidebox_custom_color' => array(
+		'type' => 'color',
+		'label' => 'Custom sidebar menu active color, defaults to above color darkened',
+		'no_lang' => true,
+		'name' => 'sidebox_custom_color',
+		'help' => lang('Use eg. %1 or %2','#FF0000','orange'),
+		'xmlrpc' => True,
+		'admin'  => False,
+	),
+	'loginbox_custom_color' => array(
+		'type' => 'color',
+		'label' => 'Custom login box color, defaults to above color darkened',
+		'no_lang' => true,
+		'name' => 'loginbox_custom_color',
+		'help' => lang('Use eg. %1 or %2','#FF0000','orange'),
+		'xmlrpc' => True,
+		'admin'  => False,
+	),
 	'navbar_format' => false,	// not used in JDots (defined in common prefs)
 	'default_app' => false,		// not used in JDots, as we can have multiple tabs open ...
 );
diff --git a/pixelegg/inc/class.pixelegg_framework.inc.php b/pixelegg/inc/class.pixelegg_framework.inc.php
index 65020630eb..32d6ca02c2 100755
--- a/pixelegg/inc/class.pixelegg_framework.inc.php
+++ b/pixelegg/inc/class.pixelegg_framework.inc.php
@@ -37,7 +37,7 @@ class pixelegg_framework extends jdots_framework
 	 *
 	 * Overwritten to set own app/template name (parent can NOT use static::APP!)
 	 *
-	 * @param string $template='pixelegg' name of the template
+	 * @param string $template ='pixelegg' name of the template
 	 */
 	function __construct($template=self::APP)
 	{
@@ -70,25 +70,23 @@ class pixelegg_framework extends jdots_framework
 	 * @param int $percent int
 	 * @return string returns color hex format (for instance: #2b2b2b)
 	 */
-	function _color_shader($color, $percent) {
+	function _color_shader($color, $percent)
+	{
+		if ($color[0] == '#') $color = ltrim($color, '#');
 
 		$R = hexdec(substr($color,0,2));
 		$G = hexdec(substr($color,2,2));
 		$B = hexdec(substr($color,4,2));
 
-		$R = round($R * (100 + $percent) / 100);
-		$G = round($G * (100 + $percent) / 100);
-		$B = round($B * (100 + $percent) / 100);
+		$Rs = round($R * (100 + $percent) / 100);
+		$Gs = round($G * (100 + $percent) / 100);
+		$Bs = round($B * (100 + $percent) / 100);
 
-		$R = ($R<255)?$R:255;
-		$G = ($G<255)?$G:255;
-		$B = ($B<255)?$B:255;
+		if ($Rs > 255) $Rs = 255;
+		if ($Gs > 255) $Gs = 255;
+		if ($Bs > 255) $Bs = 255;
 
-		$RR = (strlen(dechex($R))==1?"0".dechex($R):dechex($R));
-		$GG = (strlen(dechex($G))==1?"0".dechex($G):dechex($G));
-		$BB = (strlen(dechex($B))==1?"0".dechex($B):dechex($B));
-
-		return '#'.$RR.$GG.$BB;
+		return '#'.sprintf('%02X%02X%02X', $Rs, $Gs, $Bs);
 	}
 
 	/**
@@ -103,13 +101,28 @@ class pixelegg_framework extends jdots_framework
 		// color to use
 		$color = str_replace('custom',$GLOBALS['egw_info']['user']['preferences']['common']['template_custom_color'],
 			$GLOBALS['egw_info']['user']['preferences']['common']['template_color']);
-		//The hex value of the color
-		$color_hex = ltrim($color, '#');
 
-		// Create a drak variant of the color
-		$color_hex_dark = $this->_color_shader($color_hex, 15);
-		// Create a draker variant of the color
-		$color_hex_darker = $this->_color_shader($color_hex, -30);
+		// Create a dark variant of the color
+		$color_darker = $this->_color_shader($color, -30);
+
+		if (preg_match('/^(#[0-9A-F]+|[A-Z]+)$/i', $GLOBALS['egw_info']['user']['preferences']['common']['sidebox_custom_color']))
+		{
+			$sidebox_color_hover = $GLOBALS['egw_info']['user']['preferences']['common']['sidebox_custom_color'];
+			$sidebox_color = $this->_color_shader($sidebox_color_hover, -30);
+		}
+		else
+		{
+			$sidebox_color_hover = $color;
+			$sidebox_color = $color_darker;
+		}
+		if (preg_match('/^(#[0-9A-F]+|[A-Z]+)$/i', $GLOBALS['egw_info']['user']['preferences']['common']['loginbox_custom_color']))
+		{
+			$loginbox_color = $GLOBALS['egw_info']['user']['preferences']['common']['loginbox_custom_color'];
+		}
+		else
+		{
+			$loginbox_color = $color_darker;
+		}
 
 		if (preg_match('/^(#[0-9A-F]+|[A-Z]+)$/i',$color))	// a little xss check
 		{
@@ -124,34 +137,26 @@ class pixelegg_framework extends jdots_framework
 -popup toolbar
 */
 div#egw_fw_header, div.egw_fw_ui_category:hover,#loginMainDiv,#loginMainDiv #divAppIconBar #divLogo,
-#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_category_active:hover,
 .dialogFooterToolbar, .et2_portlet .ui-widget-header{
 	background-color: $color !important;
 }
 
 /*Login background*/
 #loginMainDiv #divAppIconBar #divLogo img[src$='svg'] {
-	background-image: -webkit-linear-gradient(top, $color, $color);
-	background-image: -moz-linear-gradient(top, $color, $color);
-	background-image: -o-linear-gradient(top,$color, $color);
-	background-image: linear-gradient(to bottom, $color, $color);
+	background-color: $color;
 }
 
 /*Center box in login page*/
 #loginMainDiv div#centerBox {
-	background-image: -webkit-linear-gradient(top,$color_hex_dark,$color_hex_darker);
-	background-image: -moz-linear-gradient(top,$color_hex_dark,$color_hex_darker);
-	background-image: -o-linear-gradient(top,$color_hex_dark,$color_hex_darker);
-	background-image: linear-gradient(to bottom, $color_hex_dark,$color_hex_darker);
-	border-top: solid 1px $color_hex_darker;
-	border-left: solid 1px $color_hex_darker;
-	border-right: solid 1px $color_hex_darker;
-	border-bottom: solid 1px $color_hex_dark;
+	background-color: $loginbox_color;
 }
 
 /*Sidebar menu active category*/
+#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_category_active:hover{
+	background-color: $sidebox_color_hover !important;
+}
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_category_active{
-	background-color: $color_hex_darker !important;
+	background-color: $sidebox_color !important;
 }
 
 
diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less
index c025ca56f4..04a0d0c94b 100644
--- a/pixelegg/less/layout_loginPage.less
+++ b/pixelegg/less/layout_loginPage.less
@@ -35,9 +35,9 @@
     padding: 0;
     height: 100%;
     width: 100%;
-    border-bottom: 0px solid #7E7E7E;
+    border: none;
     margin: 0;
-    background-color: @egw_color_2_d;
+    background-color: white;
 
     // Logo Leiste
     #divAppIconBar{
@@ -51,12 +51,9 @@
         #divLogo {
             position: relative;
             top: 1px;
-            background-color: @egw_color_2_d;
 
             img {
-                /*width: 70%;*/
-                /*margin-left: 15%;*/
-                margin: 0 auto;
+               margin: 0 auto;
                 max-width: 400px;
             }
 
@@ -64,8 +61,7 @@
             img[src$="svg"]{
                     width: 70%;
                     max-width: 2560px;
-                    .gradient_vertical (@egw_color_2_d, @egw_color_2_d);
-                }
+                 }
         }
     }
 
@@ -74,24 +70,17 @@
     div#centerBox{
         margin: 0% auto;
         width: 57em;
-        background-color: @gray_0;
+        background-color: @gray_20;
+		border: none;
         z-index: 100;
         padding: 25px 10px 10px;
         .border_radius (5px, 5px, 5px, 50px);
-        .gradient_vertical (@egw_color_2_e, @egw_color_2_a);
-
-        .bordered (@egw_color_2_a, @egw_color_2_a, @egw_color_2_e, @egw_color_2_a );
-        border-width: 1px;
-
-
 
         // Meldung
         #loginScreenMessage{
             margin: 1em;
-
         }
 
-
         // Message
         #loginCdMessage{
 			margin: 1em;
@@ -105,25 +94,18 @@
 			font-weight: bold;
 		}
 
-
-
         // Formular
         form{
              margin: 1em;
 
-
             // Table
             table.divLoginbox {
 
                 background-color: transparent;
                 .border_radius_button_lefttop;
 
-
                 tr.divLoginboxHeader{}
 
-
-
-
                 // Passwort Image
                 div.LoginPasswordImage{
                     .gradient_vertical (@egw_color_1_a, @egw_color_2_d);
@@ -143,7 +125,6 @@
                                             }
                 }
 
-
                 td { padding: 0.5em; font-weight: bold; color: @egw_color_1_a}
 
                 select {
@@ -176,10 +157,6 @@
                     &:hover{.Complete_Button_select_hover; background-color: @color_positive_action !important;}
                     &:focus {.Complete_Button_input_focus;}
                 }
-
-
-
-
             }
 
         } // Formular
diff --git a/pixelegg/less/layout_raster_header.less b/pixelegg/less/layout_raster_header.less
index bd4b62fa97..b37e4e6382 100644
--- a/pixelegg/less/layout_raster_header.less
+++ b/pixelegg/less/layout_raster_header.less
@@ -19,12 +19,11 @@
 @import (reference) "definitions.less";
 
 
-// Header 
+// Header
 #egw_fw_header{
 
     width: 100%;
     float: left;
-    background-color: @egw_color_2_e;
 
     /* Logo EGW or Company - left top*/
     #egw_divLogo {
@@ -96,7 +95,7 @@
 
 
                         &:hover {
-                            color: @gray_10;
+                            /*color: @gray_10;*/
                             border-color: @gray_50;
                             text-decoration: none !important;
                         }
diff --git a/preferences/lang/egw_de.lang b/preferences/lang/egw_de.lang
index 8a11402ecb..ca2d5f274f 100644
--- a/preferences/lang/egw_de.lang
+++ b/preferences/lang/egw_de.lang
@@ -25,6 +25,8 @@ charset for the csv export/import	preferences	de	Zeichensatz
 click to select a color	preferences	de	Anklicken um eine Farbe auszuwählen
 color	preferences	de	Farbe
 country	preferences	de	Land
+custom login box color, defaults to above color darkened	preferences	de	Benutzerdefinierte Farbe der Anmeldemaske, Vorgabe obige Farbe abgedunkelt
+custom sidebar menu active color, defaults to above color darkened	preferences	de	Benuterdefinierte Farbe des Seitenmenü, Vorgabe obige Farbe abgedunkelt
 dark moono theme	preferences	de	Dunkles Moono Schema
 data exchange settings	preferences	de	Einstellungen für den Datenaustausch
 date format	preferences	de	Datumsformat
diff --git a/preferences/lang/egw_en.lang b/preferences/lang/egw_en.lang
index e508fbd903..20eea61f4d 100644
--- a/preferences/lang/egw_en.lang
+++ b/preferences/lang/egw_en.lang
@@ -10,6 +10,7 @@ acl grants have been updated	preferences	en	ACL grants have been updated.
 any listing in egw will show you this number of entries or lines per page.<br>to many slow down the page display, to less will cost you the overview.	preferences	en	Any listing in EGroupware will show this number of entries or lines per page. Too many slow down the page display, too less will cost you the overview.
 are you sure you want to delete this category ?	preferences	en	Are you sure you want to delete this category ?
 audio effect	preferences	en	Audio effect
+audio effect enables|disables sound effects used in the theme	preferences	en	Audio effect enables|disables sound effects used in the theme
 automatically start with this font	preferences	en	Automatically start with this font
 automatically start with this font size	preferences	en	Automatically start with this font size
 bootstrap theme for ckeditor	preferences	en	Bootstrap Theme for CKEditor
@@ -24,6 +25,8 @@ charset for the csv export/import	preferences	en	Character set
 click to select a color	preferences	en	Click to select a color
 color	preferences	en	Color
 country	preferences	en	Country
+custom login box color, defaults to above color darkened	preferences	en	Custom login box color, defaults to above color darkened
+custom sidebar menu active color, defaults to above color darkened	preferences	en	Custom sidebar menu active color, defaults to above color darkened
 dark moono theme	preferences	en	Dark Moono Theme
 data exchange settings	preferences	en	Data exchange settings
 date format	preferences	en	Date format