Readme.md wibox for battery widget example (#33)

* Use wibox for battery widget example

* mention color gradient/margin

Author: kressi

README.md

@@ -628,16 +628,34 @@ argument
 
 **Battery widget**
 
-```Lua
-    batwidget = awful.widget.progressbar()
-    batwidget:set_width(8)
-    batwidget:set_height(10)
-    batwidget:set_vertical(true)
-    batwidget:set_background_color("#494B4F")
-    batwidget:set_border_color(nil)
-    batwidget:set_color("#AECF96")
-    batwidget:set_color({ type = "linear", from = { 0, 0 }, to = { 0, 10 },
-      stops = {{ 0, "#AECF96" }, { 0.5, "#88A175" }, { 1, "#FF5656" }}})
+```lua
+    batwidget = wibox.widget.progressbar()
+
+    -- Create wibox with batwidget
+    batbox = wibox.widget {
+      {
+        max_value     = 1,
+        widget        = batwidget,
+        border_width  = 0.5,
+        border_color  = "#000000",
+        color         = {
+          type = "linear",
+          from = { 0, 0 },
+          to = { 0, 30 },
+          stops = {
+            { 0, "#AECF96" },
+            { 1, "#FF5656" }
+          }
+       }
+      },
+      forced_height = 10,
+      forced_width  = 8,
+      direction     = 'east',
+      color         = beautiful.fg_widget,
+      layout        = wibox.container.rotate,
+    }
+    batbox = wibox.layout.margin(batbox, 1, 1, 3, 3)
+    -- Register battery widget
     vicious.register(batwidget, vicious.widgets.bat, "$2", 61, "BAT0")
 ```
 updated every 61 seconds, requests the current battery charge