diff --git a/src/css/app_standalone_material.less b/src/css/app_standalone_material.less
index 173f0e98f..c848e83be 100644
--- a/src/css/app_standalone_material.less
+++ b/src/css/app_standalone_material.less
@@ -329,10 +329,13 @@
     }
   }
 
+  .mo .propInput .data-color .color-text {
+    float: none;
+  }
   .mo .propInput .data-color input[type=text] {
-    margin-left: 35px;
+    margin-left: 10px;
     &:hover, &:focus {
-      margin-left: 35px;
+      margin-left: 10px;
     }
   }
 
diff --git a/src/css/style_mosaico_tools.less b/src/css/style_mosaico_tools.less
index 7539a36a5..25d9015fc 100644
--- a/src/css/style_mosaico_tools.less
+++ b/src/css/style_mosaico_tools.less
@@ -362,12 +362,22 @@
     padding-right: 30px;
   }
 
+  .propInput .data-color .color-select,
+  .propInput .data-color .color-text {
+    display: inline-block;
+  }
+
+  .propInput .data-color color-text {
+    float: right;
+  }
   .propInput .data-color input[type=text] {
     font-size: 90%;
     font-family: monospace;
-    width: 5.5em;
+    // width: 5.5em;
+    width: 8em;
     margin: 0;
-    margin-left: 85px;
+    // margin-left: 85px;
+    margin-left: 60px;
     background-color: transparent;
     border-color: fade(@mosaico-button-border-color, 20%);
     box-shadow: none;
@@ -378,9 +388,11 @@
 
       font-size: 90%;
       font-family: monospace;
-      width: 5.5em;
+      // width: 5.5em;
+      width: 8em;
       margin: 0;
-      margin-left: 85px;
+      // margin-left: 85px;
+      margin-left: 60px;
       /*
       background: none #e4dfcf;
       border-radius: 5px;
@@ -434,6 +446,7 @@
       margin: 0;
 
     }
+
   }
 
   .objEdit input[type=checkbox] {
@@ -519,6 +532,24 @@
    * COLOR PICKER
    ***************/
   
+    // this is default but our code above takes precedence
+  .propInput .evo-pointer.evo-transparent,
+  .evo-transparent {
+    @checkersize: 6px;
+    @checkerdark: #BBBBBB;
+    @checkerlight: #F8F8F8;
+    // background-image: repeating-linear-gradient(135deg,black,black 1px,white 1px,white 3px);
+    background-color: @checkerlight;
+    background-image: linear-gradient(45deg, @checkerdark 25%, transparent 25%), linear-gradient(-45deg, @checkerdark 25%, transparent 25%), linear-gradient(45deg, transparent 75%, @checkerdark 75%), linear-gradient(-45deg, transparent 75%, @checkerdark 75%);
+    background-size: (@checkersize * 2) (@checkersize * 2);
+    background-position: 0 0, 0 @checkersize, @checkersize -@checkersize, -@checkersize 0px;
+  }
+
+  // prevent 1px misalignment on firefox
+  .evo-cp-wrap {
+    padding: 0 !important;
+  }
+
   .evo-pop {
     right: 0;
     width: auto;
@@ -526,6 +557,17 @@
     border-width: 0;
     padding: 3px;
 
+    .ui-widget-content {
+      position: relative;
+
+      .evo-tr-box {
+        position: absolute;
+        top: 4px;
+        padding: 11px;
+        right: 0;
+      }
+    }
+
     .evo-palette td {
       padding: 12px;
       border: none;
diff --git a/src/js/bindings/colorpicker.js b/src/js/bindings/colorpicker.js
index eac8e627a..27f9c2e97 100644
--- a/src/js/bindings/colorpicker.js
+++ b/src/js/bindings/colorpicker.js
@@ -17,19 +17,29 @@ ColorPicker.prototype.constructor = ColorPicker;
 ColorPicker.prototype.init = function(element, valueAccessor, allBindings) {
   var va = valueAccessor();
   var value = va.color;
+  // check Colorpicker source
+  var transColor='#0000ffff';
 
   // In order to have a correct dependency tracking in "ifSubs" we have to ensure we use a single "computed" for each editable
   // property. Given this binding needs 2 of them, we create a new wrapping computed so to "proxy" the dependencies.
   var newDO = ko.computed({
-    read: value,
-    write: value,
+    read: function() {
+      var val = value();
+      return (val == 'transparent') ? transColor : val;
+      // return (val == transColor) ? 'transparent' : val;
+    },
+    write: function(newVal) {
+      return value(newVal == transColor ? 'transparent' : newVal);
+      // return value(newVal == 'transparent' ? transColor : newVal);
+    },
     disposeWhenNodeIsRemoved: element
   });
   var newVA = function() {
     return newDO;
   };
 
-  ko.bindingHandlers.value.init(element, newVA, allBindings);
+  // Do we need this anymore?
+  // ko.bindingHandlers.value.init(element, newVA, allBindings);
 
   var changePropagator = function(event, color) {
     if (typeof color !== 'undefined') newDO(color);
diff --git a/src/js/widgets/color.js b/src/js/widgets/color.js
index 643f08902..44b34f992 100644
--- a/src/js/widgets/color.js
+++ b/src/js/widgets/color.js
@@ -5,8 +5,17 @@ var widgetPlugin = {
   widget: function($, ko, kojqui) {
     return {
       widget: 'color',
+      parameters: { transparent: true },
       html: function(propAccessor, onfocusbinding, parameters) {
-        return '<input size="7" type="text" data-bind="colorpicker: { color: ' + propAccessor + ', strings: $root.t(\'Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet.\') }, ' + onfocusbinding + '" />';
+        var transBinding = typeof parameters.transparent !== 'undefined' && parameters.transparent ? ', transparentColor: true' : '';
+        var html = '<!-- ko letproxy: { prop: ' + propAccessor + ' } -->';
+        html += '<div class="color-select">';
+        html += '<input size="7" type="text" style="width: 0; padding: 0; visibility: hidden;" data-bind="colorpicker: { color: prop' + transBinding + ', strings: $root.t(\'Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet.\') }, ' + onfocusbinding + '" />';
+        html += '</div><div class="color-text">';
+        html += '<input size="15" type="text" data-bind="value: prop, ' + onfocusbinding + '" />';
+        html += '</div>';
+        html += '<!-- /ko -->';
+        return html;
       }
     };
   },