diff --git a/src/main/webapp/WEB-INF/liferay-look-and-feel.xml b/src/main/webapp/WEB-INF/liferay-look-and-feel.xml
index 8ae52d0..6dd7e2c 100644
--- a/src/main/webapp/WEB-INF/liferay-look-and-feel.xml
+++ b/src/main/webapp/WEB-INF/liferay-look-and-feel.xml
@@ -7,18 +7,211 @@
 	</compatibility>
 	<theme id="generic-configurable" name="generic-configurable-theme">
 		<settings>
-			<setting configurable="true" key="background-image-name" type="text" />
-			<setting configurable="true" key="portlet-topper-css-attributes" type="text"  />
-			<setting configurable="true" key="navbar-background-color" type="text"  />
-			<setting configurable="true" key="navbar-tabselected-color" type="text"  />
-			<setting configurable="true" key="navbar-tabhover-color" type="text"  />
-			<setting configurable="true" key="login-button-color" type="text"  />
-			<setting configurable="true" key="footer-background-color" type="text"  value="#555"/>
-			<setting configurable="true" key="footer-website-name" type="text"  />
-			<setting configurable="true" key="footer-website-url" type="text"  />
-			<setting configurable="true" key="footer-website-name" type="text"  />
-			<setting configurable="true" key="footer-text-about" type="text"  />
-			<setting configurable="true" key="show-eu-flag" type="checkbox" value="true"/>
+			<setting configurable="true" key="show-powered-d4science" type="checkbox" value="false" />
+			<setting configurable="true" key="show-eu-flag" type="checkbox"	value="true" />
+			<setting configurable="true" key="header-background-css-attributes"	type="textarea" />
+			<setting configurable="true" key="div-wrapper-css-attributes"	type="textarea" />
+			<setting configurable="true" key="div-wrapper-image-name" type="text" />
+			<setting configurable="true" key="portlet-topper-css-attributes" type="textarea" />
+			<setting configurable="true" key="footer-website-name" type="text" />
+			<setting configurable="true" key="footer-website-url" type="text" />
+			<setting configurable="true" key="footer-website-name" type="text" />
+			<setting configurable="true" key="footer-text-about" type="text" />	
+			<setting configurable="true" key="body-background-color">
+   					<![CDATA[
+					AUI().ready(
+						'aui-color-picker-popover',
+						function(A) {
+							var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
+							AllControls.setStyle('marginBottom', '5px');
+
+							var nodePicker = A.one("#[@NAMESPACE@]body-background-color");
+
+							nodePicker.ancestor().setStyle('float', 'left');
+							nodePicker.ancestor().setStyle('marginRight', '10px');
+
+							nodePicker.setStyle('width', '74px');
+							nodePicker.setStyle('borderLeftWidth', '30px');
+							nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
+							
+
+							var colorPicker = new A.ColorPickerPopover({
+						        trigger: nodePicker,
+						        zIndex: 99
+							}).render();
+
+							colorPicker.on('select', function(event) {
+								var color = event.color;
+								event.trigger.set('value', color);
+								nodePicker.setStyle('borderLeftColor', color);
+							});
+						}
+					);
+				]]>
+   			</setting>
+			<setting configurable="true" key="navbar-background-color"
+				type="text">
+						<![CDATA[
+					AUI().ready(
+						'aui-color-picker-popover',
+						function(A) {
+							var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
+							AllControls.setStyle('marginBottom', '5px');
+
+							var nodePicker = A.one("#[@NAMESPACE@]navbar-background-color");
+
+							nodePicker.ancestor().setStyle('float', 'left');
+							nodePicker.ancestor().setStyle('marginRight', '10px');
+
+							nodePicker.setStyle('width', '74px');
+							nodePicker.setStyle('borderLeftWidth', '30px');
+							nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
+							
+
+							var colorPicker = new A.ColorPickerPopover({
+						        trigger: nodePicker,
+						        zIndex: 99
+							}).render();
+
+							colorPicker.on('select', function(event) {
+								var color = event.color;
+								event.trigger.set('value', color);
+								nodePicker.setStyle('borderLeftColor', color);
+							});
+						}
+					);
+				]]>
+			</setting>
+			<setting configurable="true" key="navbar-tabselected-color"
+				type="text">
+				<![CDATA[
+					AUI().ready(
+						'aui-color-picker-popover',
+						function(A) {
+							var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
+							AllControls.setStyle('marginBottom', '5px');
+
+							var nodePicker = A.one("#[@NAMESPACE@]navbar-tabselected-color");
+
+							nodePicker.ancestor().setStyle('float', 'left');
+							nodePicker.ancestor().setStyle('marginRight', '10px');
+
+							nodePicker.setStyle('width', '74px');
+							nodePicker.setStyle('borderLeftWidth', '30px');
+							nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
+							
+
+							var colorPicker = new A.ColorPickerPopover({
+						        trigger: nodePicker,
+						        zIndex: 99
+							}).render();
+
+							colorPicker.on('select', function(event) {
+								var color = event.color;
+								event.trigger.set('value', color);
+								nodePicker.setStyle('borderLeftColor', color);
+							});
+						}
+					);
+				]]>
+			</setting>
+			<setting configurable="true" key="navbar-tabhover-color"
+				type="text">
+				<![CDATA[
+					AUI().ready(
+						'aui-color-picker-popover',
+						function(A) {
+							var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
+							AllControls.setStyle('marginBottom', '5px');
+
+							var nodePicker = A.one("#[@NAMESPACE@]navbar-tabhover-color");
+
+							nodePicker.ancestor().setStyle('float', 'left');
+							nodePicker.ancestor().setStyle('marginRight', '10px');
+
+							nodePicker.setStyle('width', '74px');
+							nodePicker.setStyle('borderLeftWidth', '30px');
+							nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
+							
+
+							var colorPicker = new A.ColorPickerPopover({
+						        trigger: nodePicker,
+						        zIndex: 99
+							}).render();
+
+							colorPicker.on('select', function(event) {
+								var color = event.color;
+								event.trigger.set('value', color);
+								nodePicker.setStyle('borderLeftColor', color);
+							});
+						}
+					);
+				]]>
+			</setting>
+			<setting configurable="true" key="login-button-color" type="text">
+			<![CDATA[
+					AUI().ready(
+						'aui-color-picker-popover',
+						function(A) {
+							var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
+							AllControls.setStyle('marginBottom', '5px');
+
+							var nodePicker = A.one("#[@NAMESPACE@]login-button-color");
+
+							nodePicker.ancestor().setStyle('float', 'left');
+							nodePicker.ancestor().setStyle('marginRight', '10px');
+
+							nodePicker.setStyle('width', '74px');
+							nodePicker.setStyle('borderLeftWidth', '30px');
+							nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
+							
+
+							var colorPicker = new A.ColorPickerPopover({
+						        trigger: nodePicker,
+						        zIndex: 99
+							}).render();
+
+							colorPicker.on('select', function(event) {
+								var color = event.color;
+								event.trigger.set('value', color);
+								nodePicker.setStyle('borderLeftColor', color);
+							});
+						}
+					);
+				]]>
+			</setting>
+			<setting configurable="true" key="footer-background-color"	type="text" value="#555">
+			<![CDATA[
+					AUI().ready(
+						'aui-color-picker-popover',
+						function(A) {
+							var AllControls = A.all("#regularlayoutsAdminLookAndFeelSettingsPanelContent .control-group");
+							AllControls.setStyle('marginBottom', '5px');
+
+							var nodePicker = A.one("#[@NAMESPACE@]footer-background-color");
+
+							nodePicker.ancestor().setStyle('float', 'left');
+							nodePicker.ancestor().setStyle('marginRight', '10px');
+
+							nodePicker.setStyle('width', '74px');
+							nodePicker.setStyle('borderLeftWidth', '30px');
+							nodePicker.setStyle('borderLeftColor', nodePicker.get('value'));
+							
+
+							var colorPicker = new A.ColorPickerPopover({
+						        trigger: nodePicker,
+						        zIndex: 99
+							}).render();
+
+							colorPicker.on('select', function(event) {
+								var color = event.color;
+								event.trigger.set('value', color);
+								nodePicker.setStyle('borderLeftColor', color);
+							});
+						}
+					);
+				]]>
+			</setting>			
 		</settings>
 	</theme>
 </look-and-feel>
\ No newline at end of file
diff --git a/src/main/webapp/css/custom.css b/src/main/webapp/css/custom.css
index b0dda24..8a0e5d3 100644
--- a/src/main/webapp/css/custom.css
+++ b/src/main/webapp/css/custom.css
@@ -85,7 +85,6 @@ div#wrapper {
 	@include respond-to(phone, tablet) {
 		padding-top: 2px;
 	}
-	/*background: #fff url(@theme_image_path@/custom/splash.jpg) center top no-repeat;*/
 	background-size: 100% 100%;
 	margin-top: -5px;
     min-height: 600px;
@@ -96,8 +95,8 @@ div#wrapper {
 	margin-left: 0;
 }
 
-header#banner {
-	background-color: transparent;
+.aui header#banner {
+	background: transparent;
 }
 
 .aui .btn {
@@ -190,7 +189,7 @@ footer {
 		margin-top: 0;
 		margin-bottom: 3px;
 		text-align: left;
-		padding: 15px 15px 0;
+		padding: 15px;
 	}
 }
 /* --- End Custom */
@@ -222,7 +221,7 @@ footer {
 	}
 	
 	.poweredBy-link {
-		margin-top: 16px;
+		margin-top: 25px;
 		float: right;
 		a:hover {
 			opacity: 0.7;
diff --git a/src/main/webapp/images/custom/PoweredByD4Science.png b/src/main/webapp/images/custom/PoweredByD4Science.png
deleted file mode 100644
index f75c218..0000000
Binary files a/src/main/webapp/images/custom/PoweredByD4Science.png and /dev/null differ
diff --git a/src/main/webapp/images/custom/powered-by-d4science.png b/src/main/webapp/images/custom/powered-by-d4science.png
new file mode 100644
index 0000000..ab1d281
Binary files /dev/null and b/src/main/webapp/images/custom/powered-by-d4science.png differ
diff --git a/src/main/webapp/templates/init_custom.vm b/src/main/webapp/templates/init_custom.vm
index fbe6a35..597322a 100644
--- a/src/main/webapp/templates/init_custom.vm
+++ b/src/main/webapp/templates/init_custom.vm
@@ -4,12 +4,9 @@
 
 *#
 
-#if ($theme.getSetting("background-image-name") !="")
-	#set ($background-image-name = $themeDisplay.getPathThemeImages() + "/custom/" + $theme.getSetting("background-image-name"))
+#if ($theme.getSetting("div-wrapper-image-name") !="")
+	#set ($div-wrapper-image-name = $themeDisplay.getPathThemeImages() + "/custom/" + $theme.getSetting("div-wrapper-image-name"))
 #else
-	#set ($background-image-name = $themeDisplay.getPathThemeImages() + "/custom/default_background.jpg") 
+	#set ($div-wrapper-image-name = $themeDisplay.getPathThemeImages() + "/custom/default_background.jpg") 
 #end
 
-#if ($theme.getSetting("portlet-topper-css-attributes") !="")
-	#set ($portlet-topper-css-attributes = $theme.getSetting("portlet-topper-css-attributes"))
-#end
diff --git a/src/main/webapp/templates/portal_normal.vm b/src/main/webapp/templates/portal_normal.vm
index cac0b48..b99f983 100644
--- a/src/main/webapp/templates/portal_normal.vm
+++ b/src/main/webapp/templates/portal_normal.vm
@@ -21,9 +21,25 @@
 	<style>
 	#if ($theme.getSetting("portlet-topper-css-attributes") !="")	
 		.aui .portlet-topper .portlet-title { 
-			$portlet-topper-css-attributes
+			$theme.getSetting("portlet-topper-css-attributes")
 		}
 	#end
+	#if ($theme.getSetting("body-background-color") !="")
+		.aui body {
+			background-color: $theme.getSetting("body-background-color");
+		}
+	#end
+	#if ($theme.getSetting("div-wrapper-css-attributes") !="")	
+		.aui div#wrapper { 
+			$theme.getSetting("div-wrapper-css-attributes")
+		}
+	#end
+
+	#if ($theme.getSetting("header-background-css-attributes") !="")
+		.aui header#banner {
+			$theme.getSetting("header-background-css-attributes");
+		}
+	#end	
 	#if ($theme.getSetting("navbar-background-color") !="")
 		.aui #navigation .navbar-inner {
 			background: $theme.getSetting("navbar-background-color");
@@ -92,11 +108,13 @@ $theme.include($body_top_include)
 #end
 
 <header id="banner" role="banner">
+#if ($theme.getSetting("show-powered-d4science") == "true")
 <div class="poweredBy-link">       				
 	<a href="http://www.d4science.org" target="_blank" class="$logo_css_class">
-		<img src="$themeDisplay.getPathThemeImages()/custom/PoweredByD4Science.png" alt="D4Science Infrastructure" hspace="5" />
+		<img src="$themeDisplay.getPathThemeImages()/custom/powered-by-d4science.png" alt="D4Science Infrastructure" hspace="5" />
 		</a>
 </div>
+#end
 <div id="heading">
 	<h1 class="site-title">
 		<a class="$logo_css_class" href="$themeDisplay.getPortalURL()" title="#language_format ("go-to-x", ["D4Science Gateway"])">
@@ -115,7 +133,7 @@ $theme.include($body_top_include)
 #end
 
 </header>
-<div class="container-fluid" id="wrapper" style="background-image: url($background-image-name)" >
+<div class="container-fluid" id="wrapper" style="background-image: url($div-wrapper-image-name)" >
 
 	<div id="content">
 		<!-- nav id="breadcrumbs">#breadcrumbs()</nav -->