Partial implementation of styles

IPython/html/static/widgets/js/widget_bool.js

@@ -24,6 +24,11 @@ define([
             this.update(); // Set defaults.
         },
 
+        update_attr: function(name, value) {
+            // Set a css attr of the widget view.
+            this.$checkbox.css(name, value);
+        },
+
         handle_click: function() {
             // Handles when the checkbox is clicked.
 

IPython/html/static/widgets/js/widget_int.js

@@ -30,10 +30,30 @@ define([
                 .appendTo(this.$el)
                 .addClass('widget-hreadout')
                 .hide();
+
+            this.model.on('change:slider_color', function(sender, value) {
+                this.$slider.find('a').css('background', value);
+            }, this);
             
             // Set defaults.
             this.update();
         },
+
+        update_attr: function(name, value) {
+            // Set a css attr of the widget view.
+            if (name == 'color') {
+                this.$readout.css(name, value);
+            } else if (name.substring(0, 4) == 'font') {
+                this.$readout.css(name, value);
+            } else if (name.substring(0, 6) == 'border') {
+                this.$slider.find('a').css(name, value);
+                this.$slider_container.css(name, value);
+            } else if (name == 'width' || name == 'height' || name == 'background') {
+                this.$slider_container.css(name, value);
+            } else {
+                this.$slider.css(name, value);
+            }
+        },
         
         update : function(options){
             // Update the contents of this view
@@ -221,6 +241,11 @@ define([
             return IntTextView.__super__.update.apply(this);
         },
 
+        update_attr: function(name, value) {
+            // Set a css attr of the widget view.
+            this.$textbox.css(name, value);
+        },
+
         events: {
             // Dictionary of events and their handlers.
             "keyup input"  : "handleChanging",
@@ -320,6 +345,17 @@ define([
             }
             return ProgressView.__super__.update.apply(this);
         }, 
+
+        update_attr: function(name, value) {
+            // Set a css attr of the widget view.
+            if (name.substring(0, 6) == 'border' || name == 'width' || name == 'height' || name == 'background') {
+                this.$progress.css(name, value);
+            } else if (name == 'color') {                
+                this.$bar.css('background', value);
+            } else {
+                this.$bar.css(name, value);
+            }
+        },
     });
 
     return {

IPython/html/static/widgets/js/widget_selection.js

@@ -58,6 +58,8 @@ define([
                 var items = this.model.get('value_names');
                 var $replace_droplist = $('<ul />')
                     .addClass('dropdown-menu');
+                // Copy the style
+                $replace_droplist.attr('style', this.$droplist.attr('style'));
                 var that = this;
                 _.each(items, function(item, i) {
                     var item_button = $('<a href="#"/>')
@@ -94,6 +96,29 @@ define([
             return DropdownView.__super__.update.apply(this);
         },
 
+        update_attr: function(name, value) {
+            // Set a css attr of the widget view.
+            if (name.substring(0, 6) == 'border' || name == 'background' || name == 'color') {
+                this.$droplabel.css(name, value);
+                this.$dropbutton.css(name, value);
+                this.$droplist.css(name, value);
+            } if (name.substring(0, 4) == 'font') {
+                this.$droplabel.css(name, value);
+                this.$droplist.css(name, value);
+            } else if (name == 'width') {
+                this.$buttongroup.width(value);
+                var width = value - this.$dropbutton.width();
+                this.$droplist.css(name, width);
+                this.$droplabel.css(name, width);
+            } else if (name == 'height') {
+                this.$droplist.css(name, value);
+                this.$dropbutton.css(name, value);
+            } else {
+                this.$droplabel.css(name, value);
+                this.$droplist.css(name, value);
+            }
+        },
+
         handle_click: function (e) {
             // Handle when a value is clicked.
             

IPython/html/widgets/widget.py

@@ -18,8 +18,8 @@ import collections
 from IPython.core.getipython import get_ipython
 from IPython.kernel.comm import Comm
 from IPython.config import LoggingConfigurable
-from IPython.utils.traitlets import Unicode, Dict, Instance, Bool, List, 
-    CaselessStrEnum, Tuple, CTuple, CUnicode, Int, Set
+from IPython.utils.traitlets import Unicode, Dict, Instance, Bool, List, \
+    CaselessStrEnum, Tuple, CUnicode, Int, Set
 from IPython.utils.py3compat import string_types
 
 #-----------------------------------------------------------------------------
@@ -380,8 +380,8 @@ class Widget(LoggingConfigurable):
 
 class DOMWidget(Widget):
     visible = Bool(True, help="Whether the widget is visible.", sync=True)
-    _css = CTuple(sync=True, help="CSS property list: (selector, key, value)")
-    _dom_classes = CTuple(sync=True, help="DOM classes applied to widget.$el.")
+    _css = Tuple(sync=True, help="CSS property list: (selector, key, value)")
+    _dom_classes = Tuple(sync=True, help="DOM classes applied to widget.$el.")
     
     width = CUnicode(sync=True)
     height = CUnicode(sync=True)

IPython/html/widgets/widget_float.py

@@ -57,6 +57,7 @@ class FloatSlider(_BoundedFloat):
         help="Vertical or horizontal.", sync=True)
     _range = Bool(False, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
+    slider_color = Unicode(sync=True)
 
 
 class FloatProgress(_BoundedFloat):

IPython/html/widgets/widget_int.py

@@ -62,6 +62,7 @@ class IntSlider(_BoundedInt):
         help="Vertical or horizontal.", sync=True)
     _range = Bool(False, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
+    slider_color = Unicode(sync=True)
 
 
 class IntProgress(_BoundedInt):