[IMP] website: extract default website customize options into new theme_default module

25 files changed, 237 insertions, 231 deletions

diff --git a/addons/theme_bootswatch/views/theme.xml b/addons/theme_bootswatch/views/theme.xml
index 292bcecc94a..11b0066438b 100644
--- a/addons/theme_bootswatch/views/theme.xml
+++ b/addons/theme_bootswatch/views/theme.xml
@@ -2,13 +2,6 @@
 <openerp>

 <data>

 

-<!-- Deactivate default website options before adding the theme ones -->

-<template id="reset_default_options" inherit_id="website.default_options">

-  <xpath expr="//t[@id='default_options']" position="attributes">

-    <attribute name="t-if">False</attribute>

-  </xpath>

-</template>

-

 <template id="theme_customize" inherit_id="website.theme_customize" name="theme_customize Bootswatch">

     <xpath expr="div" position="replace">

 

diff --git a/addons/theme_default/__init__.py b/addons/theme_default/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/addons/theme_default/__init__.py
diff --git a/addons/theme_default/__openerp__.py b/addons/theme_default/__openerp__.py
new file mode 100644
index 00000000000..243f1cb0c25
--- /dev/null
+++ b/addons/theme_default/__openerp__.py
@@ -0,0 +1,13 @@
+{
+    'name': 'Default Website Theme',
+    'description': 'Default website theme to showcase customization possibilities.',
+    'category': 'Theme/Hidden',
+    'version': '1.0',
+    'author': 'Odoo S.A.',
+    'depends': ['website'],
+    'data': [
+        'views/templates.xml',
+    ],
+    'application': False,
+    'auto_install': True,
+}
diff --git a/addons/theme_default/static/description/icon.png b/addons/theme_default/static/description/icon.png
new file mode 100644
index 00000000000..2ff68dd1789
--- /dev/null
+++ b/addons/theme_default/static/description/icon.png
diff --git a/addons/website/static/src/img/theme/layout-boxed.gif b/addons/theme_default/static/src/img/theme/layout-boxed.gif
index 57e41958208..57e41958208 100644
--- a/addons/website/static/src/img/theme/layout-boxed.gif
+++ b/addons/theme_default/static/src/img/theme/layout-boxed.gif
diff --git a/addons/website/static/src/img/theme/layout-full.gif b/addons/theme_default/static/src/img/theme/layout-full.gif
index 7b7cdf73919..7b7cdf73919 100644
--- a/addons/website/static/src/img/theme/layout-full.gif
+++ b/addons/theme_default/static/src/img/theme/layout-full.gif
diff --git a/addons/website/static/src/img/theme/variant-amethyst.gif b/addons/theme_default/static/src/img/theme/variant-amethyst.gif
index 42dd89f4f34..42dd89f4f34 100644
--- a/addons/website/static/src/img/theme/variant-amethyst.gif
+++ b/addons/theme_default/static/src/img/theme/variant-amethyst.gif
diff --git a/addons/website/static/src/img/theme/variant-cobalt.gif b/addons/theme_default/static/src/img/theme/variant-cobalt.gif
index c7237049e18..c7237049e18 100644
--- a/addons/website/static/src/img/theme/variant-cobalt.gif
+++ b/addons/theme_default/static/src/img/theme/variant-cobalt.gif
diff --git a/addons/website/static/src/img/theme/variant-emerald.gif b/addons/theme_default/static/src/img/theme/variant-emerald.gif
index 6ca27b08e36..6ca27b08e36 100644
--- a/addons/website/static/src/img/theme/variant-emerald.gif
+++ b/addons/theme_default/static/src/img/theme/variant-emerald.gif
diff --git a/addons/website/static/src/img/theme/variant-gold.gif b/addons/theme_default/static/src/img/theme/variant-gold.gif
index b9a2782c051..b9a2782c051 100644
--- a/addons/website/static/src/img/theme/variant-gold.gif
+++ b/addons/theme_default/static/src/img/theme/variant-gold.gif
diff --git a/addons/website/static/src/img/theme/variant-ruby.gif b/addons/theme_default/static/src/img/theme/variant-ruby.gif
index b6a06a60cb7..b6a06a60cb7 100644
--- a/addons/website/static/src/img/theme/variant-ruby.gif
+++ b/addons/theme_default/static/src/img/theme/variant-ruby.gif
diff --git a/addons/website/static/src/img/theme/variant-stone.gif b/addons/theme_default/static/src/img/theme/variant-stone.gif
index 6ae3a649a6c..6ae3a649a6c 100644
--- a/addons/website/static/src/img/theme/variant-stone.gif
+++ b/addons/theme_default/static/src/img/theme/variant-stone.gif
diff --git a/addons/website/static/src/less/colors.less b/addons/theme_default/static/src/less/colors.less
index fbfa3d35269..fbfa3d35269 100644
--- a/addons/website/static/src/less/colors.less
+++ b/addons/theme_default/static/src/less/colors.less
diff --git a/addons/website/static/src/less/option_color_amethyst.less b/addons/theme_default/static/src/less/option_color_amethyst.less
index ef509d6325d..ef509d6325d 100644
--- a/addons/website/static/src/less/option_color_amethyst.less
+++ b/addons/theme_default/static/src/less/option_color_amethyst.less
diff --git a/addons/website/static/src/less/option_color_cobalt.less b/addons/theme_default/static/src/less/option_color_cobalt.less
index a7e90b26be1..a7e90b26be1 100644
--- a/addons/website/static/src/less/option_color_cobalt.less
+++ b/addons/theme_default/static/src/less/option_color_cobalt.less
diff --git a/addons/website/static/src/less/option_color_emerald.less b/addons/theme_default/static/src/less/option_color_emerald.less
index 69df3204fcc..69df3204fcc 100644
--- a/addons/website/static/src/less/option_color_emerald.less
+++ b/addons/theme_default/static/src/less/option_color_emerald.less
diff --git a/addons/website/static/src/less/option_color_gold.less b/addons/theme_default/static/src/less/option_color_gold.less
index 77fe9a683df..77fe9a683df 100644
--- a/addons/website/static/src/less/option_color_gold.less
+++ b/addons/theme_default/static/src/less/option_color_gold.less
diff --git a/addons/website/static/src/less/option_color_ruby.less b/addons/theme_default/static/src/less/option_color_ruby.less
index 63bca9ecc92..63bca9ecc92 100644
--- a/addons/website/static/src/less/option_color_ruby.less
+++ b/addons/theme_default/static/src/less/option_color_ruby.less
diff --git a/addons/website/static/src/less/option_color_stone.less b/addons/theme_default/static/src/less/option_color_stone.less
index e3a217f14a2..e3a217f14a2 100644
--- a/addons/website/static/src/less/option_color_stone.less
+++ b/addons/theme_default/static/src/less/option_color_stone.less
diff --git a/addons/website/static/src/less/option_font.less b/addons/theme_default/static/src/less/option_font.less
index 2ce3b03e62c..2ce3b03e62c 100644
--- a/addons/website/static/src/less/option_font.less
+++ b/addons/theme_default/static/src/less/option_font.less
diff --git a/addons/website/static/src/less/option_layout_boxed.less b/addons/theme_default/static/src/less/option_layout_boxed.less
index db449d79b4d..db449d79b4d 100644
--- a/addons/website/static/src/less/option_layout_boxed.less
+++ b/addons/theme_default/static/src/less/option_layout_boxed.less
diff --git a/addons/theme_default/views/templates.xml b/addons/theme_default/views/templates.xml
new file mode 100644
index 00000000000..b1866c81844
--- /dev/null
+++ b/addons/theme_default/views/templates.xml
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+<data>
+
+<template id="customize_modal" inherit_id="website.theme_customize" name="treehouse Customize Modal" priority="1">
+  <xpath expr="div" position="replace">
+    <div id="theme_customize_modal" class="modal fade">
+      <div class="modal-dialog">
+          <div class="modal-content">
+
+              <div class="loading_backdrop"></div>
+              <div class="modal-header text-center">
+                  <button type="button" class="close">×</button>
+                  <!-- <a class="btn btn-primary" href="/web#return_label=Website&amp;action=website.action_module_theme">Click here to change theme</a> -->
+                  <hr style="margin: 20px -10px 10px -10px;"/>
+                  <h4 class="modal-title">Customize this default theme</h4>
+              </div>
+              <div class="modal-body">
+                  <h5 class="modal-h5">LAYOUT</h5>
+                  <table name="layout">
+                      <tr>
+                          <td class=" text-center" width="50%">
+                              <label class=" center-block">
+                                  <div class="text-center" style="background-image: url(/theme_default/static/src/img/theme/layout-full.gif); background-size: 100%; line-height: 40px;">FULL WIDTH</div>
+                                  <input name="layoutvar" type="radio" data-xmlid=""/>
+                              </label>
+                          </td>
+                          <td class=" text-center">
+                              <label class=" center-block">
+                                 <div class="text-center" style="background-image: url(/theme_default/static/src/img/theme/layout-boxed.gif); background-size: 100%; line-height: 40px;">BOXED</div>
+                                  <input name="layoutvar" type="radio" data-xmlid="theme_default.option_layout_boxed"/>
+                              </label>
+                          </td>
+                      </tr>
+                  </table>
+
+                  <h5 class="modal-h5">MAIN COLOR</h5>
+                  <table name="color">
+                      <tr>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/theme_default/static/src/img/theme/variant-stone.gif" alt="Stone" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid=""/>
+                              </label>
+                          </td>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/theme_default/static/src/img/theme/variant-emerald.gif" alt="Emerald" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_emerald"/>
+                              </label>
+                          </td>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/theme_default/static/src/img/theme/variant-cobalt.gif" alt="Cobalt" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_cobalt"/>
+                              </label>
+                          </td>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/theme_default/static/src/img/theme/variant-amethyst.gif" alt="Amethyst" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_amethyst"/>
+                              </label>
+                          </td>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/theme_default/static/src/img/theme/variant-ruby.gif" alt="Blue" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_ruby"/>
+                              </label>
+                          </td>
+                          <td>
+                              <label class="chd-color-combi">
+                                  <img src="/theme_default/static/src/img/theme/variant-gold.gif" alt="Gold" class="chd-color-combi-img"/>
+                                  <input name="colorvar" type="radio" data-xmlid="theme_default.option_color_gold"/>
+                              </label>
+                          </td>
+                      </tr>
+                  </table>
+
+                  <h5 class="modal-h5">FONTS COMBINATIONS</h5>
+                  <table name="font">
+                      <tr>
+                          <td width="50%">
+                              <label>
+                                  <div>
+                                      <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">Helvetica</span>
+                                      <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >/ Georgia</span>
+                                  </div>
+                                  <input name="theme" type="radio" data-xmlid=""/>
+                              </label>
+                          </td>
+                          <td width="50%">
+                              <label>
+                                  <div>
+                                      <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >Georgia</span>
+                                      <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">/ Helvetica</span>
+                                    <input name="theme" type="radio" data-xmlid="theme_default.option_font"/>
+                                  </div>
+                              </label>
+                          </td>
+                      </tr>
+                  </table>
+              </div>
+          </div>
+      </div>
+  </div>
+  </xpath>
+</template>
+
+<template id="colors" name="Colors" inherit_id="website.assets_frontend">
+  <xpath expr="." position="inside">
+    <link rel="stylesheet" href='/theme_default/static/src/less/colors.less'/>
+  </xpath>
+</template>
+
+<!-- Option layout -->
+
+<template id="option_layout_boxed" name="option_layout_boxed" inherit_id="website.assets_frontend" active="False" customize_show="False">
+  <xpath expr="." position="inside">
+      <link href="/theme_default/static/src/less/option_layout_boxed.less" rel="stylesheet" type="text/less"/>
+  </xpath>
+</template>
+
+<!-- Option color -->
+
+<template id="option_color_stone" name="option_color_stone" inherit_id="website.assets_frontend" active="False" customize_show="False">
+  <xpath expr="." position="inside">
+    <link href="/theme_default/static/src/less/option_color_stone.less" rel="stylesheet" type="text/less"/>
+  </xpath>
+</template>
+
+<template id="option_color_emerald" name="option_color_emerald" inherit_id="website.assets_frontend" active="False" customize_show="False">
+  <xpath expr="." position="inside">
+    <link href="/theme_default/static/src/less/option_color_emerald.less" rel="stylesheet" type="text/less"/>
+  </xpath>
+</template>
+
+<template id="option_color_cobalt" name="option_color_cobalt" inherit_id="website.assets_frontend" active="False" customize_show="False">
+  <xpath expr="." position="inside">
+    <link href="/theme_default/static/src/less/option_color_cobalt.less" rel="stylesheet" type="text/less"/>
+  </xpath>
+</template>
+
+<template id="option_color_amethyst" name="option_color_amethyst" inherit_id="website.assets_frontend" active="False" customize_show="False">
+  <xpath expr="." position="inside">
+    <link href="/theme_default/static/src/less/option_color_amethyst.less" rel="stylesheet" type="text/less"/>
+  </xpath>
+</template>
+
+<template id="option_color_ruby" name="option_color_ruby" inherit_id="website.assets_frontend" active="False" customize_show="False">
+  <xpath expr="." position="inside">
+    <link href="/theme_default/static/src/less/option_color_ruby.less" rel="stylesheet" type="text/less"/>
+  </xpath>
+</template>
+
+<template id="option_color_gold" name="option_color_gold" inherit_id="website.assets_frontend" active="False" customize_show="False">
+  <xpath expr="." position="inside">
+    <link href="/theme_default/static/src/less/option_color_gold.less" rel="stylesheet" type="text/less"/>
+  </xpath>
+</template>
+
+<!-- Option font -->
+
+<template id="option_font" name="option_font" inherit_id="website.assets_frontend" active="False" customize_show="False">
+  <xpath expr="." position="inside">
+    <link href="/theme_default/static/src/less/option_font.less" rel="stylesheet" type="text/less"/>
+  </xpath>
+</template>
+
+</data>
+</openerp>
diff --git a/addons/website/__openerp__.py b/addons/website/__openerp__.py
index efaa43efbcf..8c29c63cf43 100644
--- a/addons/website/__openerp__.py
+++ b/addons/website/__openerp__.py
@@ -21,7 +21,6 @@ OpenERP Website CMS
         'views/website.backend.xml',
         'views/website_views.xml',
         'views/snippets.xml',
-        'views/themes.xml',
         'views/res_config.xml',
         'views/ir_actions.xml',
         'views/website_backend_navbar.xml',
diff --git a/addons/website/views/themes.xml b/addons/website/views/themes.xml
deleted file mode 100644
index da53c83dfd6..00000000000
--- a/addons/website/views/themes.xml
+++ /dev/null
@@ -1,221 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<openerp>
-<data>
-
-
-<!--
-    Customize Themes
-
-    Use INPUT type 'checkbox' or 'radio' or use OPTION in select box
-    'data-xmlid' (optional) xml id of the template to add if the input is checked.
-        You can set a list of xml id separate by comma (all template is enable or
-        disable in same time)
-    'data-enable' (optional) to checked one or more HTML ids, or list separate by comma
-    'data-disable' (optional) to unchecked one or more HTML ids, or list separate by comma
-    'data-reload="/"' (optional) force the reloading of the page if the url match with
-        the string ( = regexp).
-        Otherwise, only the '/web/css/website.assets_frontend' is reloaded
-
-    For the sets (data-enable and/or data-disable without data-xmlid), the set is
-    automatically checked if:
-    - all related fields are enabled for data-enable
-    - all related fields are disabled for data-disable
-    else unchecked
-
-    HTML apply classes:
-    - 'checked': on the parent label when input is checked
-    - 'in': on the container (e.g.: bootstrap modal) after added in DOM (removed together
-       out is added)
-    - 'out': on the container 1 second before removed from ths DOM
-    - 'loading': on the container/modal when the new css is loading
--->
-
-<template id="website.theme_customize" name="Theme Modal for Customization">
-  <div id="theme_customize_modal" class="modal fade">
-      <div class="modal-dialog">
-          <div class="modal-content">
-              <input id="less" type="checkbox" data-xmlid="website.option_bootstrap_less" style="display: none;"/>
-
-              <div class="loading_backdrop"></div>
-              <div class="modal-header text-center">
-                  <button type="button" class="close">×</button>
-                  <a class="btn btn-primary" href="/web#return_label=Website&amp;action=website.action_module_theme">Click here to change theme</a>
-                  <hr style="margin: 20px -10px 10px -10px;"/>
-                  <h4 class="modal-title">Customize this default theme</h4>
-              </div>
-              <div class="modal-body">
-                  <h5 class="modal-h5">LAYOUT</h5>
-                  <table name="layout">
-                      <tr>
-                          <td class=" text-center" width="50%">
-                              <label class=" center-block">
-                                  <div class="text-center" style="background-image: url(/website/static/src/img/theme/layout-full.gif); background-size: 100%; line-height: 40px;">FULL WIDTH</div>
-                                  <input name="layoutvar" type="radio" data-xmlid=""/>
-                              </label>
-                          </td>
-                          <td class=" text-center">
-                              <label class=" center-block">
-                                 <div class="text-center" style="background-image: url(/website/static/src/img/theme/layout-boxed.gif); background-size: 100%; line-height: 40px;">BOXED</div>
-                                  <input name="layoutvar" type="radio" data-xmlid="website.option_layout_boxed" data-enable="less"/>
-                              </label>
-                          </td>
-                      </tr>
-                  </table>
-
-                  <h5 class="modal-h5">MAIN COLOR</h5>
-                  <table name="color">
-                      <tr>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-stone.gif" alt="Stone" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="" data-disable="less"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-emerald.gif" alt="Emerald" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_emerald" data-enable="less"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-cobalt.gif" alt="Cobalt" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_cobalt" data-enable="less"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-amethyst.gif" alt="Amethyst" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_amethyst" data-enable="less"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-ruby.gif" alt="Blue" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_ruby" data-enable="less"/>
-                              </label>
-                          </td>
-                          <td>
-                              <label class="chd-color-combi">
-                                  <img src="/website/static/src/img/theme/variant-gold.gif" alt="Gold" class="chd-color-combi-img"/>
-                                  <input name="colorvar" type="radio" data-xmlid="website.option_color_gold" data-enable="less"/>
-                              </label>
-                          </td>
-                      </tr>
-                  </table>
-
-                  <h5 class="modal-h5">FONTS COMBINATIONS</h5>
-                  <table name="font">
-                      <tr>
-                          <td width="50%">
-                              <label>
-                                  <div>
-                                      <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">Helvetica</span>
-                                      <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >/ Georgia</span>
-                                  </div>
-                                  <input name="theme" type="radio" data-xmlid=""/>
-                              </label>
-                          </td>
-                          <td width="50%">
-                              <label>
-                                  <div>
-                                      <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >Georgia</span>
-                                      <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">/ Helvetica</span>
-                                    <input name="theme" type="radio" data-xmlid="website.option_font" data-enable="less"/>
-                                  </div>
-                              </label>
-                          </td>
-                      </tr>
-                  </table>
-              </div>
-          </div>
-      </div>
-  </div>
-</template>
-
-<!-- color-picker -->
-<!-- HTML class to hide option for one mode : only-text, only-bg -->
-
-<template id="website.colorpicker" name="Color-Picker">
-    <table class="colorpicker">
-        <tr>
-            <td><button class="bg-primary" title="Primary Color"/></td>
-            <td><button class="bg-success" title="Success Color"/></td>
-            <td><button class="bg-info" title="Info Color"/></td>
-            <td><button class="bg-warning" title="Warning Color"/></td>
-            <td><button class="bg-danger" title="Danger Color"/></td>
-        </tr>
-    </table>
-</template>
-
-<!-- Theme -->
-
-<!--
-  Group all option inside a t-if True named default_options, other theme will
-  set the t-if to False to disable all website options
-
--->
-
-<template id="default_options" name="Default Customize Options" inherit_id="website.assets_frontend">
-  <xpath expr="//link[last()]" position="after">
-    <!-- Default options inherit from this view so we can easily disable it to reset all options -->
-    <t id="default_options" t-if="True"></t>
-  </xpath>
-</template>
-
-<!-- Option layout -->
-
-<template id="option_layout_boxed" name="option_layout_boxed" inherit_id="website.default_options" active="False" customize_show="False">
-  <xpath expr="//t[@id='default_options']" position="inside">
-      <link href="/website/static/src/less/option_layout_boxed.less" rel="stylesheet" type="text/less"/>
-  </xpath>
-</template>
-
-<!-- Option color -->
-
-<template id="option_color_stone" name="option_color_stone" inherit_id="website.default_options" active="False" customize_show="False">
-  <xpath expr="//t[@id='default_options']" position="inside">
-    <link href="/website/static/src/less/option_color_stone.less" rel="stylesheet" type="text/less"/>
-  </xpath>
-</template>
-
-<template id="option_color_emerald" name="option_color_emerald" inherit_id="website.default_options" active="False" customize_show="False">
-  <xpath expr="//t[@id='default_options']" position="inside">
-    <link href="/website/static/src/less/option_color_emerald.less" rel="stylesheet" type="text/less"/>
-  </xpath>
-</template>
-
-<template id="option_color_cobalt" name="option_color_cobalt" inherit_id="website.default_options" active="False" customize_show="False">
-  <xpath expr="//t[@id='default_options']" position="inside">
-    <link href="/website/static/src/less/option_color_cobalt.less" rel="stylesheet" type="text/less"/>
-  </xpath>
-</template>
-
-<template id="option_color_amethyst" name="option_color_amethyst" inherit_id="website.default_options" active="False" customize_show="False">
-  <xpath expr="//t[@id='default_options']" position="inside">
-    <link href="/website/static/src/less/option_color_amethyst.less" rel="stylesheet" type="text/less"/>
-  </xpath>
-</template>
-
-<template id="option_color_ruby" name="option_color_ruby" inherit_id="website.default_options" active="False" customize_show="False">
-  <xpath expr="//t[@id='default_options']" position="inside">
-    <link href="/website/static/src/less/option_color_ruby.less" rel="stylesheet" type="text/less"/>
-  </xpath>
-</template>
-
-<template id="option_color_gold" name="option_color_gold" inherit_id="website.default_options" active="False" customize_show="False">
-  <xpath expr="//t[@id='default_options']" position="inside">
-    <link href="/website/static/src/less/option_color_gold.less" rel="stylesheet" type="text/less"/>
-  </xpath>
-</template>
-
-<!-- Option font -->
-
-<template id="option_font" name="option_font" inherit_id="website.default_options" active="False" customize_show="False">
-  <xpath expr="//t[@id='default_options']" position="inside">
-    <link href="/website/static/src/less/option_font.less" rel="stylesheet" type="text/less"/>
-  </xpath>
-</template>
-
-</data>
-</openerp>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 2dd7b30c3a6..5f317ba401a 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -71,9 +71,7 @@
 </template>
 
 <template id="assets_frontend" name="Website assets">
-    <!-- Boostrap Fallback if server can't compute less files -->
     <link id="bootstrap_css" rel="stylesheet" href='/website/static/src/less/import_bootstrap.less'/>
-    <link rel="stylesheet" href='/website/static/src/less/colors.less'/>
 
     <link rel="stylesheet" href='/website/static/src/css/website.css'/>
 
@@ -469,6 +467,60 @@
     </ul>
 </template>
 
+<!--
+    Customize Themes
+
+    Use INPUT type 'checkbox' or 'radio' or use OPTION in select box
+    'data-xmlid' (optional) xml id of the template to add if the input is checked.
+        You can set a list of xml id separate by comma (all template is enable or
+        disable in same time)
+    'data-enable' (optional) to checked one or more HTML ids, or list separate by comma
+    'data-disable' (optional) to unchecked one or more HTML ids, or list separate by comma
+    'data-reload="/"' (optional) force the reloading of the page if the url match with
+        the string ( = regexp).
+        Otherwise, only the '/web/css/website.assets_frontend' is reloaded
+
+    For the sets (data-enable and/or data-disable without data-xmlid), the set is
+    automatically checked if:
+    - all related fields are enabled for data-enable
+    - all related fields are disabled for data-disable
+    else unchecked
+
+    HTML apply classes:
+    - 'checked': on the parent label when input is checked
+    - 'in': on the container (e.g.: bootstrap modal) after added in DOM (removed together
+       out is added)
+    - 'out': on the container 1 second before removed from ths DOM
+    - 'loading': on the container/modal when the new css is loading
+-->
+
+<template id="website.theme_customize" name="Theme Modal for Customization">
+  <div id="theme_customize_modal" class="modal fade">
+      <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header text-center">
+                <h4 class="modal-title">Please install a theme in order to customize your website.</h4>
+            </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<!-- color-picker -->
+<!-- HTML class to hide option for one mode : only-text, only-bg -->
+
+<template id="website.colorpicker" name="Color-Picker">
+    <table class="colorpicker">
+        <tr>
+            <td><button class="bg-primary" title="Primary Color"/></td>
+            <td><button class="bg-success" title="Success Color"/></td>
+            <td><button class="bg-info" title="Info Color"/></td>
+            <td><button class="bg-warning" title="Warning Color"/></td>
+            <td><button class="bg-danger" title="Danger Color"/></td>
+        </tr>
+    </table>
+</template>
+
 <template id="kanban">
     <t t-set="step"><t t-esc="step or 0"/></t>
     <t t-set="scope"><t t-esc="scope or 0"/></t>