diff --git a/editable_backend_theme/editable_theme/__init__.py b/editable_backend_theme/editable_theme/__init__.py
new file mode 100644
index 000000000..2c4eac3f8
--- /dev/null
+++ b/editable_backend_theme/editable_theme/__init__.py
@@ -0,0 +1 @@
+import models
\ No newline at end of file
diff --git a/editable_backend_theme/editable_theme/__openerp__.py b/editable_backend_theme/editable_theme/__openerp__.py
new file mode 100644
index 000000000..1ac1d8e48
--- /dev/null
+++ b/editable_backend_theme/editable_theme/__openerp__.py
@@ -0,0 +1,23 @@
+{
+    'name': "Awesome Backend Theme",
+    'summary': """ You can simply edit font colour and background colour in this Theme.""",
+    'description': """ Your own colors on your interface.""",
+    'author': "Cybrosys Tachno Solutions",
+    'category': 'Theme',
+    'version': '1.0',
+
+
+    'depends': [
+        'base',
+        'web_widget_color', ],
+
+
+    'data': ['template/template.xml',
+             'views/theme_view.xml',
+             ],
+
+
+    'installable': True,
+    'auto_install': False,
+    'application': True,
+}
diff --git a/editable_backend_theme/editable_theme/models/__init__.py b/editable_backend_theme/editable_theme/models/__init__.py
new file mode 100644
index 000000000..8ace6a1f9
--- /dev/null
+++ b/editable_backend_theme/editable_theme/models/__init__.py
@@ -0,0 +1,2 @@
+import themes
+import play_with_js
\ No newline at end of file
diff --git a/editable_backend_theme/editable_theme/models/play_with_js.py b/editable_backend_theme/editable_theme/models/play_with_js.py
new file mode 100644
index 000000000..1c6031ae6
--- /dev/null
+++ b/editable_backend_theme/editable_theme/models/play_with_js.py
@@ -0,0 +1,64 @@
+from openerp import api, fields, models, http
+from openerp.http import request
+
+
+class BackendCss(http.Controller):
+
+    @http.route(['/get_css_selected/'], type='json', auth="public", website=True)
+    def action_get_css_selected(self):
+
+        sidebar_font_color = request.registry['menu.theme'].get_sidebar_font_color(request.cr, request.uid, []).get('sidebar_font_color')
+        sidebar_font_color_parent = request.registry['menu.theme'].get_sidebar_font_color_parent(request.cr, request.uid, []).get('sidebar_font_color_parent')
+        sidebar_image = request.registry['menu.theme'].get_sidebar_image(request.cr, request.uid, []).get('sidebar_image')
+        top_image = request.registry['menu.theme'].get_top_image(request.cr, request.uid, []).get('top_image')
+
+        top_font_color = request.registry['menu.theme'].get_top_font_color(request.cr, request.uid, []).get('top_font_color')
+        top_background_color = request.registry['menu.theme'].get_top_background_color(request.cr, request.uid, []).get('top_background_color')
+        sidebar_background_color = request.registry['menu.theme'].get_sidebar_background_color(request.cr, request.uid, []).get('sidebar_background_color')
+        font_common = request.registry['menu.theme'].get_font_common(request.cr, request.uid, []).get('font_common')
+
+        css_list = ''
+        # SIDE BAR IMAGE
+        if sidebar_image:
+            css_list += sidebar_image + '-->'
+        else:
+            css_list += 'none-->'
+        # TOP BAR IMAGE
+        if top_image:
+            css_list += top_image + '-->'
+        else:
+            css_list += 'none-->'
+        # SIDE BAR FONT COLOR CHILD
+        if sidebar_font_color:
+            css_list += sidebar_font_color + '-->'
+        else:
+            css_list += 'none-->'
+        # SIDE BAR FONT COLOR PARENT
+        if sidebar_font_color_parent:
+            css_list += sidebar_font_color_parent + '-->'
+        else:
+            css_list += 'none-->'
+        # TOP BAR FONT COLOR
+        if top_font_color:
+            css_list += top_font_color + '-->'
+        else:
+            css_list += 'none-->'
+        # TOP BAR BACKGROUND COLOR
+        if top_background_color:
+            css_list += top_background_color + '-->'
+        else:
+            css_list += 'none-->'
+        # SIDE BAR BACKGROUND COLOR
+        if sidebar_background_color:
+            css_list += sidebar_background_color + '-->'
+        else:
+            css_list += 'none-->'
+        # FONT STYLE
+        if font_common:
+            css_list += font_common + '-->'
+        else:
+            css_list += 'none-->'
+
+        return css_list
+
+
diff --git a/editable_backend_theme/editable_theme/models/themes.py b/editable_backend_theme/editable_theme/models/themes.py
new file mode 100644
index 000000000..7e7f72ce2
--- /dev/null
+++ b/editable_backend_theme/editable_theme/models/themes.py
@@ -0,0 +1,170 @@
+from openerp import models, fields, api, http, SUPERUSER_ID
+from openerp.http import request
+
+
+class MenuThemes(models.Model):
+    _name = 'menu.theme'
+    _inherit = 'res.config.settings'
+
+    sidebar_image = fields.Binary('Sidebar BackGround Image', help='You can set image at the left bar behind'
+                                                                   ' the font such as your company logo.'
+                                                                   'keep this field empty '
+                                                                   'if you need background colour.')
+    top_image = fields.Binary('Top BackGround Image')
+    sidebar_font_color = fields.Char('Font Colour of Sidebar Child Menu', default='#FFFFFF')
+    sidebar_font_color_parent = fields.Char('Font Colour of Sidebar Parent Menu', default='#FFDC63')
+
+    top_font_color = fields.Char('Font Colour of Top Menu', default='#FFFFFF')
+    top_background_color = fields.Char('BackGround Colour of Top Menu', default='#B71E17')
+    sidebar_background_color = fields.Char('BackGround Colour of Sidebar', default='#464746')
+
+    font_common = fields.Selection([('sans-serif', 'Sans-Serif'),
+                                   ('serif', 'Serif'),
+                                   ('monospace', 'Monospace'), ], default='monospace')
+
+    # SETTING
+    # FONT STYLE
+    def set_font_common(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        wizard = self.browse(cr, uid, ids)[0]
+        if wizard.font_common:
+            font_common = wizard.font_common
+            ir_values.set_default(cr, SUPERUSER_ID, 'menu.theme', 'font_common', font_common)
+        else:
+            font_common =  False
+            ir_values.set_default(cr, SUPERUSER_ID,'menu.theme', 'font_common', font_common)
+
+    # SIDEBAR BACKGROUND COLOR
+    def set_sidebar_background_color(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        wizard = self.browse(cr, uid, ids)[0]
+        if wizard.sidebar_background_color:
+            sidebar_background_color = wizard.sidebar_background_color
+            ir_values.set_default(cr, SUPERUSER_ID, 'menu.theme','sidebar_background_color', sidebar_background_color)
+        else:
+            sidebar_background_color =  False
+            ir_values.set_default(cr, SUPERUSER_ID,'menu.theme','sidebar_background_color', sidebar_background_color)
+
+    # SIDEBAR IMAGE
+    def set_sidebar_image(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        wizard = self.browse(cr, uid, ids)[0]
+        if wizard.sidebar_image:
+            sidebar_image = wizard.sidebar_image
+            ir_values.set_default(cr, SUPERUSER_ID, 'menu.theme','sidebar_image', sidebar_image)
+        else:
+            sidebar_image =  False
+            ir_values.set_default(cr, SUPERUSER_ID,'menu.theme','sidebar_image',sidebar_image)
+
+    # TOP BAR IMAGE
+    def set_top_image(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        wizard = self.browse(cr, uid, ids)[0]
+        if wizard.top_image:
+            top_image = wizard.top_image
+            ir_values.set_default(cr, SUPERUSER_ID, 'menu.theme','top_image', top_image)
+        else:
+            top_image =  False
+            ir_values.set_default(cr, SUPERUSER_ID,'menu.theme','top_image',top_image)
+
+    # FONT COLOUR CHILD
+    def set_sidebar_font_color(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        wizard = self.browse(cr, uid, ids)[0]
+        if wizard.sidebar_font_color:
+            sidebar_font_color = wizard.sidebar_font_color
+            ir_values.set_default(cr, SUPERUSER_ID, 'menu.theme','sidebar_font_color', sidebar_font_color)
+        else:
+            sidebar_font_color =  False
+            ir_values.set_default(cr, SUPERUSER_ID,'menu.theme','sidebar_font_color',sidebar_font_color)
+
+    # FONT COLOUR PARENT
+    def set_sidebar_font_color_parent(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        wizard = self.browse(cr, uid, ids)[0]
+        if wizard.sidebar_font_color_parent:
+            sidebar_font_color_parent = wizard.sidebar_font_color_parent
+            ir_values.set_default(cr, SUPERUSER_ID, 'menu.theme','sidebar_font_color_parent', sidebar_font_color_parent)
+        else:
+            sidebar_font_color_parent =  False
+            ir_values.set_default(cr, SUPERUSER_ID,'menu.theme','sidebar_font_color_parent',sidebar_font_color_parent)
+
+    # FONT COLOR TOP
+    def set_top_font_color(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        wizard = self.browse(cr, uid, ids)[0]
+        if wizard.top_font_color:
+            top_font_color = wizard.top_font_color
+            ir_values.set_default(cr, SUPERUSER_ID, 'menu.theme','top_font_color', top_font_color)
+        else:
+            top_font_color =  False
+            ir_values.set_default(cr, SUPERUSER_ID,'menu.theme','top_font_color',top_font_color)
+
+    # TOP BAR FONT COLOR
+    def set_top_background_color(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        wizard = self.browse(cr, uid, ids)[0]
+        if wizard.top_background_color:
+            top_background_color = wizard.top_background_color
+            ir_values.set_default(cr, SUPERUSER_ID, 'menu.theme','top_background_color', top_background_color)
+        else:
+            top_background_color =  False
+            ir_values.set_default(cr, SUPERUSER_ID,'menu.theme','top_background_color',top_background_color)
+
+    # GETTING
+    # FONT STYLE
+    def get_font_common(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        font_common = ir_values.get_default(cr, uid, 'menu.theme', 'font_common')
+        return {
+            'font_common': font_common, }
+
+    # SIDEBAR BACKGROUND COLOR
+    def get_sidebar_background_color(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        sidebar_background_color = ir_values.get_default(cr, uid, 'menu.theme', 'sidebar_background_color')
+        return {
+            'sidebar_background_color': sidebar_background_color, }
+
+    # SIDEBAR IMAGE
+    def get_sidebar_image(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        sidebar_image = ir_values.get_default(cr, uid, 'menu.theme', 'sidebar_image')
+        return {
+            'sidebar_image': sidebar_image, }
+
+    # TOP BAR IMAGE
+    def get_top_image(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        top_image = ir_values.get_default(cr, uid, 'menu.theme', 'top_image')
+        return {
+            'top_image': top_image, }
+
+    # FONT COLOUR CHILD
+    def get_sidebar_font_color(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        sidebar_font_color = ir_values.get_default(cr, uid, 'menu.theme', 'sidebar_font_color')
+        return {
+            'sidebar_font_color': sidebar_font_color, }
+
+    # FONT COLOUR PARENT
+    def get_sidebar_font_color_parent(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        sidebar_font_color_parent = ir_values.get_default(cr, uid, 'menu.theme', 'sidebar_font_color_parent')
+        return {
+            'sidebar_font_color_parent': sidebar_font_color_parent, }
+
+    # FONT COLOR TOP
+    def get_top_font_color(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        top_font_color = ir_values.get_default(cr, uid, 'menu.theme', 'top_font_color')
+        return {
+            'top_font_color': top_font_color, }
+
+    # TOP BAR FONT COLOR
+    def get_top_background_color(self, cr, uid, ids, context=None):
+        ir_values = self.pool.get('ir.values')
+        top_background_color = ir_values.get_default(cr, uid, 'menu.theme', 'top_background_color')
+        return {
+            'top_background_color': top_background_color, }
+
diff --git a/editable_backend_theme/editable_theme/static/css/backend_style.css b/editable_backend_theme/editable_theme/static/css/backend_style.css
new file mode 100644
index 000000000..6a1a457a7
--- /dev/null
+++ b/editable_backend_theme/editable_theme/static/css/backend_style.css
@@ -0,0 +1,27 @@
+#demo_sans_serif{color:#8A8C9C;font-family:sans-serif;}
+#demo_serif{color:#8A8C9C;font-family:serif;}
+#demo_monospace{color:#8A8C9C;font-family:monospace;}
+/*DEFAULT THEME*/
+/*
+.openerp .oe_menu_text{color:#FFFFFF;font-family:monospace;}
+.openerp .oe_secondary_menu_section{color:#FFDC63;font-family:monospace;}
+.navbar-inverse .navbar-nav > li > a{color:#FFFFFF}
+.navbar-collapse.collapse{background-color:#B71E17}
+.oe_leftbar{background-color:#464746;font-family:monospace;}
+a{font-family:monospace;}
+
+.oe_leftbar{background-color:#464746;font-family:monospace;}*/
+
+/*.oe_form_label{font-family:monospace;}*/
+/*
+.openerp .oe_form td.oe_form_group_cell_label {
+
+font-family:monospace;
+
+}*/
+/*label{font-family:monospace;}*/
+
+/*SIDE BAR IMAGE FULL SIZE*/
+.openerp .oe_leftbar {
+    background-size: 100% 100%;
+}
\ No newline at end of file
diff --git a/editable_backend_theme/editable_theme/static/description/icon.png b/editable_backend_theme/editable_theme/static/description/icon.png
new file mode 100644
index 000000000..025b24d08
Binary files /dev/null and b/editable_backend_theme/editable_theme/static/description/icon.png differ
diff --git a/editable_backend_theme/editable_theme/static/description/index.html b/editable_backend_theme/editable_theme/static/description/index.html
new file mode 100644
index 000000000..db45ef8c4
--- /dev/null
+++ b/editable_backend_theme/editable_theme/static/description/index.html
@@ -0,0 +1,112 @@
+<section class="oe_container">
+    <div class="oe_row oe_spaced">
+        <h2 class="oe_slogan">Awesome Backend Theme</h2>
+        <div class="oe_span6">
+            <div class="oe_demo oe_picture oe_screenshot">
+                <img src="editable_theme/static/description/index_img/img_0001.png">
+            </div>
+        </div>
+        <div class="oe_span6">
+            <div class="oe_demo oe_picture oe_screenshot">
+                <img src="editable_theme/static/description/index_img/img_0002.png">
+            </div>
+        </div>
+    </div>
+</section>
+
+
+<section class="oe_container">
+    <div class="oe_row oe_spaced">
+        <div class="oe_span6">
+            <div class="oe_demo oe_picture oe_screenshot">
+                <img src="editable_theme/static/description/index_img/img_0003.png">
+            </div>
+        </div>
+        <div class="oe_span6">
+             <br/><br/><br/>
+             <h3 class="oe_slogan">
+                 User defined colours for theme.
+             </h3>
+            <p class="oe_mt32">
+                Activate Technical Features.<br/>
+                 Then go to<br/>
+                 Settings <i class="fa fa-arrow-right" aria-hidden="true"/>
+                 Technical<i class="fa fa-arrow-right" aria-hidden="true"/>
+                 User Interface<i class="fa fa-arrow-right" aria-hidden="true"/>
+                 Theme Settings
+             </p>
+        </div>
+    </div>
+</section>
+
+
+<!--<section class="oe_container">-->
+    <!--<div class="oe_row oe_spaced">-->
+        <!--<h2 class="oe_slogan">Awesome Backend Theme</h2>-->
+        <!--<div class="oe_span6">-->
+            <!--<div class="oe_demo oe_picture oe_screenshot">-->
+                    <!--<img src="/editable_theme/static/description/index_img/theme0001.png">-->
+            <!--</div>-->
+        <!--</div>-->
+        <!--<div class="oe_span6">-->
+            <!--<br/><br/><br/>-->
+             <!--<h3 class="oe_slogan">-->
+                 <!--Your own images-->
+             <!--</h3>-->
+
+            <!--<h3 class="oe_slogan">-->
+                <!--at top and sidebar-->
+            <!--</h3>-->
+        <!--</div>-->
+    <!--</div>-->
+<!--</section>-->
+
+<!--<section class="oe_container">-->
+    <!--<div class="oe_row oe_spaced">-->
+        <!--<h2 class="oe_slogan"></h2>-->
+        <!--<div class="oe_span6">-->
+            <!--<br/><br/><br/><br/>-->
+            <!--<p class="oe_mt32">-->
+                <!--Activate Technical Features.<br/>-->
+                 <!--Then go to<br/>-->
+                 <!--Settings <i class="fa fa-arrow-right" aria-hidden="true"/>-->
+                 <!--Technical<i class="fa fa-arrow-right" aria-hidden="true"/>-->
+                 <!--User Interface<i class="fa fa-arrow-right" aria-hidden="true"/>-->
+                 <!--Theme Settings-->
+             <!--</p>-->
+            <!--<h3 class="oe_slogan">-->
+
+            <!--</h3>-->
+        <!--</div>-->
+        <!--<div class="oe_span6">-->
+            <!--<div class="oe_demo oe_picture oe_screenshot">-->
+                    <!--<img src="/editable_theme/static/description/index_img/theme0002.png">-->
+            <!--</div>-->
+
+        <!--</div>-->
+    <!--</div>-->
+<!--</section>-->
+
+<!--<section class="oe_container">-->
+    <!--<div class="oe_row oe_spaced">-->
+        <!--<h2 class="oe_slogan"></h2>-->
+        <!--<div class="oe_span6">-->
+            <!--<div class="oe_demo oe_picture oe_screenshot">-->
+                    <!--<img src="/editable_theme/static/description/index_img/theme0003.png">-->
+            <!--</div>-->
+
+        <!--</div>-->
+        <!--<div class="oe_span6">-->
+            <!--<br/><br/><br/><br/>-->
+            <!--<p class="oe_mt32">-->
+                <!--Edit Images and font colours.-->
+                <!--Save and Refresh the Page.-->
+
+             <!--</p>-->
+            <!--<h3 class="oe_slogan">-->
+
+            <!--</h3>-->
+        <!--</div>-->
+
+    <!--</div>-->
+<!--</section>-->
diff --git a/editable_backend_theme/editable_theme/static/description/index_img/img_0001.png b/editable_backend_theme/editable_theme/static/description/index_img/img_0001.png
new file mode 100644
index 000000000..4b9b420f5
Binary files /dev/null and b/editable_backend_theme/editable_theme/static/description/index_img/img_0001.png differ
diff --git a/editable_backend_theme/editable_theme/static/description/index_img/img_0002.png b/editable_backend_theme/editable_theme/static/description/index_img/img_0002.png
new file mode 100644
index 000000000..6ccfae328
Binary files /dev/null and b/editable_backend_theme/editable_theme/static/description/index_img/img_0002.png differ
diff --git a/editable_backend_theme/editable_theme/static/description/index_img/img_0003.png b/editable_backend_theme/editable_theme/static/description/index_img/img_0003.png
new file mode 100644
index 000000000..abad9abe6
Binary files /dev/null and b/editable_backend_theme/editable_theme/static/description/index_img/img_0003.png differ
diff --git a/editable_backend_theme/editable_theme/static/src/img/favicon.png b/editable_backend_theme/editable_theme/static/src/img/favicon.png
new file mode 100644
index 000000000..c6533dbb8
Binary files /dev/null and b/editable_backend_theme/editable_theme/static/src/img/favicon.png differ
diff --git a/editable_backend_theme/editable_theme/static/src/img/icons/icon_colours.jpg b/editable_backend_theme/editable_theme/static/src/img/icons/icon_colours.jpg
new file mode 100644
index 000000000..6f1a10949
Binary files /dev/null and b/editable_backend_theme/editable_theme/static/src/img/icons/icon_colours.jpg differ
diff --git a/editable_backend_theme/editable_theme/static/src/img/icons/icon_pictures.png b/editable_backend_theme/editable_theme/static/src/img/icons/icon_pictures.png
new file mode 100644
index 000000000..26e97a27a
Binary files /dev/null and b/editable_backend_theme/editable_theme/static/src/img/icons/icon_pictures.png differ
diff --git a/editable_backend_theme/editable_theme/static/src/img/themes/desert_with_sky.jpg b/editable_backend_theme/editable_theme/static/src/img/themes/desert_with_sky.jpg
new file mode 100644
index 000000000..d8bd8e58b
Binary files /dev/null and b/editable_backend_theme/editable_theme/static/src/img/themes/desert_with_sky.jpg differ
diff --git a/editable_backend_theme/editable_theme/static/src/img/themes/sky_at_top.jpg b/editable_backend_theme/editable_theme/static/src/img/themes/sky_at_top.jpg
new file mode 100644
index 000000000..3e957e0a4
Binary files /dev/null and b/editable_backend_theme/editable_theme/static/src/img/themes/sky_at_top.jpg differ
diff --git a/editable_backend_theme/editable_theme/static/src/js/js_role.js b/editable_backend_theme/editable_theme/static/src/js/js_role.js
new file mode 100644
index 000000000..ff9baa976
--- /dev/null
+++ b/editable_backend_theme/editable_theme/static/src/js/js_role.js
@@ -0,0 +1,62 @@
+$(document).ready(function () {
+$('.oe_view_manager_buttons').click(function(){alert()});
+    openerp.jsonRpc('/get_css_selected/', 'call', {}).then(function (css_list) {
+        /*CSS_LIST = SIDEBAR IMAGE --> TOP IMAGE --> SIDEBAR FONT --> SIDEBAR FONT - PARENT MENU -->
+                    TOP BAR FONT --> TOP BAR BACKGROUND COLOR --> SIDE BAR BACKGROUND COLOR -->
+        */
+//IMAGE
+        //SIDEBAR IMAGE
+        sidebarBg_IMG_CODED = css_list.substring(0,css_list.indexOf("-->"))
+        var sidebarBg_IMG_FORMAT = 'url("data:image/gif;base64,'+ sidebarBg_IMG_CODED +'")'
+        $(".oe_leftbar").css("background-image", sidebarBg_IMG_FORMAT);
+        //TOP IMAGE
+        str_afterFIRST = css_list.substring(css_list.indexOf("-->")+3)
+        topBg_IMG_CODED = str_afterFIRST.substring(0,str_afterFIRST.indexOf("-->"))
+        var topBg_IMG_FORMAT = 'url("data:image/gif;base64,'+ topBg_IMG_CODED +'")'
+        $(".navbar-collapse").css("background-image", topBg_IMG_FORMAT);
+//COLOR
+        //SIDEBAR FONT
+        str_afterSECOND = str_afterFIRST.substring(str_afterFIRST.indexOf("-->")+3)
+        sidebarFont_COLOR_CODE = str_afterSECOND.substring(0,str_afterSECOND.indexOf("-->"))
+        $(".openerp .oe_menu_text").css("color", sidebarFont_COLOR_CODE);
+        //SIDEBAR FONT - PARENT MENU
+        str_afterTHIRD = str_afterSECOND.substring(str_afterSECOND.indexOf("-->")+3)
+        sidebarFont_COLOR_CODE_parent = str_afterTHIRD.substring(0,str_afterTHIRD.indexOf("-->"))
+        $(".openerp .oe_secondary_menu_section").css("color", sidebarFont_COLOR_CODE_parent);
+        //TOP BAR FONT
+        str_afterFORTH = str_afterTHIRD.substring(str_afterTHIRD.indexOf("-->")+3)
+        topBar_Font_COLOR_CODE = str_afterFORTH.substring(0,str_afterFORTH.indexOf("-->"))
+        $(".navbar-inverse .navbar-nav > li > a").css("color", topBar_Font_COLOR_CODE);
+        //TOP BAR BACKGROUND COLOR
+        str_afterFIFTH = str_afterFORTH.substring(str_afterFORTH.indexOf("-->")+3)
+        topBar_background_COLOR_CODE = str_afterFIFTH.substring(0,str_afterFIFTH.indexOf("-->"))
+        $(".navbar-collapse.collapse").css("background-color", topBar_background_COLOR_CODE);
+        //SIDE BAR BACKGROUND COLOR
+        str_afterSIXTH = str_afterFIFTH.substring(str_afterFIFTH.indexOf("-->")+3)
+        sideBar_background_COLOR_CODE = str_afterSIXTH.substring(0,str_afterSIXTH.indexOf("-->"))
+        $(".oe_leftbar").css("background-color", sideBar_background_COLOR_CODE);
+//FONT STYLE
+        str_afterSEVENTH = str_afterSIXTH.substring(str_afterSIXTH.indexOf("-->")+3)
+        sideBar_background_COLOR_CODE = str_afterSEVENTH.substring(0,str_afterSEVENTH.indexOf("-->"))
+        console.log(sideBar_background_COLOR_CODE)
+        //SIDE
+        $(".oe_leftbar").css("font-family", sideBar_background_COLOR_CODE);
+        $("a").css("font-family", sideBar_background_COLOR_CODE);
+
+
+
+
+
+
+//        $("table > body").css("font-family", sideBar_background_COLOR_CODE);
+
+//        .oe_form .oe_form_label[for] {
+//    white-space: nowrap;
+//    padding-right: 8px;
+//    font-family: monospace;
+//}
+
+
+
+    });
+})
\ No newline at end of file
diff --git a/editable_backend_theme/editable_theme/template/template.xml b/editable_backend_theme/editable_theme/template/template.xml
new file mode 100644
index 000000000..1298acb79
--- /dev/null
+++ b/editable_backend_theme/editable_theme/template/template.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+    <data>
+
+        <template id="assets_backend" name="load desert js and css assets" inherit_id="web.assets_backend">
+            <xpath expr="." position="inside">
+                <link rel="stylesheet" href="/editable_theme/static/css/backend_style.css"/>
+                <script type="text/javascript" src="/editable_theme/static/src/js/js_role.js"></script>
+            </xpath>
+        </template>
+
+    </data>
+</openerp>
\ No newline at end of file
diff --git a/editable_backend_theme/editable_theme/views/theme_view.xml b/editable_backend_theme/editable_theme/views/theme_view.xml
new file mode 100644
index 000000000..294c3ef0d
--- /dev/null
+++ b/editable_backend_theme/editable_theme/views/theme_view.xml
@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+    <data>
+
+        <record id="form_dfadsfdasfdsdsthemes" model="menu.theme">
+            <field name="font_common">serif</field>
+        </record>
+
+
+
+        <!--FORM [THEMES]-->
+        <record id="form_themes" model="ir.ui.view">
+            <field name="name">menu.theme.form</field>
+            <field name="model">menu.theme</field>
+            <field name="arch" type="xml">
+
+                 <form string="Theme Settings" class="oe_form_configuration">
+                    <header>
+                        <button string="Apply" type="object" name="execute" class="oe_highlight"/>
+                        or
+                        <button string="Cancel" type="object" name="cancel" class="oe_link"/>
+                    </header>
+                    <separator string="Theme Settings"/>
+
+
+                     <!--<group>-->
+                        <!--<label for="top_image" string="Topbar Image"/>-->
+                        <!--<div>-->
+                            <!--<div>-->
+                                <!--<field name="top_image" widget="image" class="oe_avatar oe_left oe_inline"/>-->
+                            <!--</div>-->
+                        <!--</div>-->
+                     <!--</group>-->
+
+                     <group>
+                        <label for="font_common" string="Font Style"/>
+                        <div>
+                            <div>
+                                <field name="font_common" class="oe_inline" />
+
+                                <p id="demo_sans_serif"
+                                   attrs="{'invisible': [('font_common','!=','sans-serif')]}">ABCXyz123</p>
+                                <p id="demo_serif" attrs="{'invisible': [('font_common','!=','serif')]}">ABCXyz123</p>
+                                <p id="demo_monospace" attrs="{'invisible': [('font_common','!=','monospace')]}">ABCXyz123</p>
+
+                            </div>
+                        </div>
+                    </group>
+
+                     <group>
+                        <label for="sidebar_background_color" string="Background Colour for Sidebar"/>
+                        <div>
+                            <div>
+                                <field name="sidebar_background_color" class="oe_inline" widget="color"/>
+                            </div>
+                        </div>
+                    </group>
+
+                     <group>
+                        <label for="sidebar_font_color_parent" string="Font Colour for Sidebar Parent menu"/>
+                        <div>
+                            <div>
+                                <field name="sidebar_font_color_parent" class="oe_inline" widget="color"/>
+                            </div>
+                        </div>
+                    </group>
+
+                     <group>
+                        <label for="sidebar_font_color" string="Font Colour for Sidebar Child menu"/>
+                        <div>
+                            <div>
+                                <field name="sidebar_font_color" class="oe_inline"  widget="color"/>
+                            </div>
+                        </div>
+                    </group>
+
+                     <group>
+                        <label for="top_font_color" string="Font Colour Top Bar"/>
+                        <div>
+                            <div>
+                                <field name="top_font_color" class="oe_inline"  widget="color"/>
+                            </div>
+                        </div>
+                    </group>
+
+                     <group>
+                        <label for="top_background_color" string="BackGround Colour of Top Menu"/>
+                        <div>
+                            <div>
+                                <field name="top_background_color" class="oe_inline"  widget="color"/>
+                            </div>
+                        </div>
+                    </group>
+
+
+                     <group>
+                        <label for="sidebar_image" string="Sidebar Image"/>
+                        <div>
+                            <div>
+                                <field name="sidebar_image" widget="image" class="oe_avatar oe_left oe_inline"/>
+                            </div>
+                        </div>
+                     </group>
+
+                </form>
+            </field>
+        </record>
+        <!--ACTION [THEMES]-->
+        <!--<record id="action_themes" model="ir.actions.act_window">-->
+            <!--<field name="name">Theme Settings</field>-->
+            <!--<field name="res_model">menu.theme</field>-->
+            <!--<field name="view_type">form</field>-->
+            <!--<field name="view_mode">kanban,form</field>-->
+        <!--</record>-->
+
+
+
+        <record id="action_themes_setup" model="ir.actions.act_window">
+            <field name="name">Themes Settings</field>
+            <field name="res_model">menu.theme</field>
+            <field name="view_mode">form</field>
+            <field name="target">inline</field>
+        </record>
+        <!--MENU [THEME SETTINGS]-->
+        <menuitem action="action_themes_setup" id="menu_themes" parent="base.next_id_2" sequence="-5"/>
+    </data>
+</openerp>
\ No newline at end of file
diff --git a/editable_backend_theme/web_widget_color/README.rst b/editable_backend_theme/web_widget_color/README.rst
new file mode 100644
index 000000000..a163f899e
--- /dev/null
+++ b/editable_backend_theme/web_widget_color/README.rst
@@ -0,0 +1,104 @@
+Color widget for Odoo web client
+================================
+
+This module aims to add a color picker to Odoo.
+
+It's a `jsColor <http://jscolor.com/>`_ lib integration.
+
+
+Features
+========
+
+* The picker allow the user to quickly select a color on edit mode
+
+  |picker|
+
+  .. note::
+
+      Notice how html code and the background color is updating when selecting a color.
+
+
+* Display the color on form view when you are not editing it
+
+  |formview|
+
+* Display the color on list view to quickly find what's wrong!
+
+  |listview|
+
+
+Requirements
+============
+
+This module has been ported to 8.0
+
+
+Usage
+=====
+
+You need to declare a char field of at least size 7::
+
+    _columns = {
+        'color': fields.char(
+            u"Couleur",
+            help=u"Toutes couleur valid css, exemple blue ou #f57900"
+        ),
+    }
+
+    OR
+
+    color = fields.Char(
+        string="Color",
+        help="Choose your color"
+    )
+
+
+In the view declaration, put widget='color' attribute in the field tag::
+
+    ...
+    <field name="arch" type="xml">
+        <tree string="View name">
+            ...
+            <field name="name"/>
+            <field name="color" widget="color"/>
+            ...
+        </tree>
+    </field>
+    ...
+
+.. |picker| image:: ./images/picker.png
+.. |formview| image:: ./images/form_view.png
+.. |listview| image:: ./images/list_view.png
+
+
+Bug Tracker
+===========
+
+Bugs are tracked on `GitHub Issues <https://github.com/OCA/web/issues>`_.
+In case of trouble, please check there if your issue has already been reported.
+If you spotted it first, help us smashing it by providing a detailed and welcomed feedback
+`here <https://github.com/OCA/web/issues/new?body=module:%20web_widget_color%0Aversion:%208.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+
+
+Credits
+=======
+
+Contributors
+------------
+
+* Adil Houmadi <adil.houmadi@gmail.com>
+
+Maintainer
+----------
+
+.. image:: http://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+   :target: http://odoo-community.org
+
+This module is maintained by the OCA.
+
+OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.
+
+To contribute to this module, please visit http://odoo-community.org.
diff --git a/editable_backend_theme/web_widget_color/__init__.py b/editable_backend_theme/web_widget_color/__init__.py
new file mode 100644
index 000000000..c18661e9c
--- /dev/null
+++ b/editable_backend_theme/web_widget_color/__init__.py
@@ -0,0 +1,25 @@
+# -*- encoding: utf-8 -*-
+############################################################################
+#
+# Odoo, Open Source Web Color
+# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>).
+# Copyright (C) 2014 Anybox <http://anybox.fr>
+# Copyright (C) 2015 Taktik SA <http://taktik.be>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com>
+# @author Adil Houmadi <ah@taktik.be>
+#
+##############################################################################
diff --git a/editable_backend_theme/web_widget_color/__openerp__.py b/editable_backend_theme/web_widget_color/__openerp__.py
new file mode 100644
index 000000000..c73b6e007
--- /dev/null
+++ b/editable_backend_theme/web_widget_color/__openerp__.py
@@ -0,0 +1,44 @@
+# -*- encoding: utf-8 -*-
+############################################################################
+#
+# Odoo, Open Source Web Widget Color
+# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>).
+# Copyright (C) 2014 Anybox <http://anybox.fr>
+# Copyright (C) 2015 Taktik SA <http://taktik.be>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com>
+# @author Adil Houmadi <ah@taktik.be>
+#
+##############################################################################
+{
+    'name': "Web Widget Color",
+    'category': "web",
+    'version': "1.0",
+    "author": "Savoir-faire Linux, "
+              "Anybox, "
+              "Taktik SA, "
+              "Odoo Community Association (OCA)",
+    'depends': ['base', 'web'],
+    'data': [
+        'view/web_widget_color_view.xml'
+    ],
+    'qweb': [
+        'static/src/xml/widget.xml',
+    ],
+    'auto_install': False,
+    'installable': True,
+    'web_preload': True,
+}
diff --git a/editable_backend_theme/web_widget_color/images/form_view.png b/editable_backend_theme/web_widget_color/images/form_view.png
new file mode 100644
index 000000000..db1026b94
Binary files /dev/null and b/editable_backend_theme/web_widget_color/images/form_view.png differ
diff --git a/editable_backend_theme/web_widget_color/images/list_view.png b/editable_backend_theme/web_widget_color/images/list_view.png
new file mode 100644
index 000000000..f4965fd5e
Binary files /dev/null and b/editable_backend_theme/web_widget_color/images/list_view.png differ
diff --git a/editable_backend_theme/web_widget_color/images/picker.png b/editable_backend_theme/web_widget_color/images/picker.png
new file mode 100644
index 000000000..4c3f5e079
Binary files /dev/null and b/editable_backend_theme/web_widget_color/images/picker.png differ
diff --git a/editable_backend_theme/web_widget_color/static/description/icon.png b/editable_backend_theme/web_widget_color/static/description/icon.png
new file mode 100644
index 000000000..540f72db9
Binary files /dev/null and b/editable_backend_theme/web_widget_color/static/description/icon.png differ
diff --git a/editable_backend_theme/web_widget_color/static/src/css/widget.css b/editable_backend_theme/web_widget_color/static/src/css/widget.css
new file mode 100644
index 000000000..06201af13
--- /dev/null
+++ b/editable_backend_theme/web_widget_color/static/src/css/widget.css
@@ -0,0 +1,23 @@
+.openerp .oe_form .oe_form_field_color input {
+    width: 100%;
+}
+
+.openerp .oe_form .oe_form_field_color div {
+    border: 1px solid;
+    display: inline-block;
+    height: 14px;
+    margin-right: 10px;
+    position: relative;
+    top: 3px;
+    width: 40px;
+}
+
+.oe_list_field_color div {
+    border: 1px solid;
+    display: inline-block;
+    height: 14px;
+    margin-right: 10px;
+    position: relative;
+    top: 3px;
+    width: 40px;
+}
diff --git a/editable_backend_theme/web_widget_color/static/src/js/widget.js b/editable_backend_theme/web_widget_color/static/src/js/widget.js
new file mode 100644
index 000000000..442997529
--- /dev/null
+++ b/editable_backend_theme/web_widget_color/static/src/js/widget.js
@@ -0,0 +1,59 @@
+openerp.web_widget_color = function (instance) {
+
+    var _super_getDir = jscolor.getDir.prototype;
+    jscolor.getDir = function () {
+        var dir = _super_getDir.constructor();
+        if (dir.indexOf('web_widget_color') === -1) {
+            jscolor.dir = 'web_widget_color/static/lib/jscolor/';
+        }
+        return jscolor.dir;
+    };
+
+    instance.web.form.widgets.add('color', 'instance.web.form.FieldColor');
+
+    instance.web.search.fields.add('color', 'instance.web.search.CharField');
+
+    instance.web.form.FieldColor = instance.web.form.FieldChar.extend({
+        template: 'FieldColor',
+        widget_class: 'oe_form_field_color',
+        is_syntax_valid: function () {
+            var $input = this.$('input');
+            if (!this.get("effective_readonly") && $input.size() > 0) {
+                var val = $input.val();
+                var isOk = /^#[0-9A-F]{6}$/i.test(val);
+                if (!isOk) {
+                    return false;
+                }
+                try {
+                    this.parse_value(this.$('input').val(), '');
+                    return true;
+                } catch (e) {
+                    return false;
+                }
+            }
+            return true;
+        },
+        render_value: function () {
+            var show_value = this.format_value(this.get('value'), '');
+            if (!this.get("effective_readonly")) {
+                var $input = this.$el.find('input');
+                $input.val(show_value);
+                $input.css("background-color", show_value)
+                jscolor.init(this.$el[0]);
+            } else {
+                this.$(".oe_form_char_content").text(show_value);
+                this.$('div').css("background-color", show_value)
+            }
+        }
+    });
+
+    /*
+     * Init jscolor for each editable mode on view form
+     */
+    instance.web.FormView.include({
+        to_edit_mode: function () {
+            this._super();
+            jscolor.init(this.$el[0]);
+        }
+    });
+};
diff --git a/editable_backend_theme/web_widget_color/static/src/xml/widget.xml b/editable_backend_theme/web_widget_color/static/src/xml/widget.xml
new file mode 100644
index 000000000..c62ae1cf7
--- /dev/null
+++ b/editable_backend_theme/web_widget_color/static/src/xml/widget.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <t t-name="FieldColor">
+        <span t-att-class="'oe_form_field '+widget.widget_class" t-att-style="widget.node.attrs.style">
+            <t t-if="!widget.get('effective_readonly')">
+                <input type="text"
+                       t-att-id="widget.id_for_label"
+                       t-att-tabindex="widget.node.attrs.tabindex"
+                       t-att-autofocus="widget.node.attrs.autofocus"
+                       t-att-placeholder="widget.node.attrs.placeholder"
+                       t-att-maxlength="widget.field.size"
+                       class="color {hash:true}"
+                        />
+            </t>
+            <t t-if="widget.get('effective_readonly')">
+                <div/>
+                <span class="oe_form_char_content"></span>
+            </t>
+        </span>
+    </t>
+    <tr t-extend="ListView.row">
+        <t t-jquery="t td t" t-operation="replace"><t t-if="column.widget =='color' || column.type == 'color'"><div t-att-style="'background-color:' + render_cell(record, column)"/></t><t t-raw="render_cell(record, column)"/></t>
+    </tr>
+</templates>
diff --git a/editable_backend_theme/web_widget_color/view/web_widget_color_view.xml b/editable_backend_theme/web_widget_color/view/web_widget_color_view.xml
new file mode 100644
index 000000000..7c2c8d0f0
--- /dev/null
+++ b/editable_backend_theme/web_widget_color/view/web_widget_color_view.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<openerp>
+    <data>
+        <template id="assets_backend" name="web_widget_color assets" inherit_id="web.assets_backend">
+            <xpath expr="." position="inside">
+                <link rel="stylesheet" href="/web_widget_color/static/src/css/widget.css"/>
+                <script type="text/javascript" src="/web_widget_color/static/lib/jscolor/jscolor.js"></script>
+                <script type="text/javascript" src="/web_widget_color/static/src/js/widget.js"></script>
+            </xpath>
+        </template>
+    </data>
+</openerp>
\ No newline at end of file
diff --git a/salon_operation/__openerp__.py b/salon_operation/__openerp__.py
index 9cbc01ae5..82d7c510e 100644
--- a/salon_operation/__openerp__.py
+++ b/salon_operation/__openerp__.py
@@ -2,8 +2,8 @@
     'name': 'Salon Booking',
     'summary': """   """,
     'description': """  """,
-    'author': '',
-    'website': 'http://www.example.com',
+    'author': 'Cybrosys Techno Solutions',
+    'website': 'http://www.cybrosys.com',
     'category': 'Test',
     'version': '0.1',