addons/website/static/src/xml/website.theme.xml

   1 <?xml version="1.0" encoding="utf-8"?>
   2 <templates id="template" xml:space="preserve">
   3
   4 <!--
   5     Customize Themes
   6
   7     Use INPUT type 'checkbox' or 'radio' or use OPTION in select box
   8     'data-xmlid' (optional) xml id of the template to add if the input is checked.
   9         You can set a list of xml id separate by comma (all template is enable or
  10         disable in same time)
  11     'data-enable' (optional) to checked one or more HTML ids, or list separate by comma
  12     'data-disable' (optional) to unchecked one or more HTML ids, or list separate by comma
  13     'data-reload="/"' (optional) force the reloading of the page if the url match with
  14         the string ( = regexp).
  15         Otherwise, only the '/web/css/website.assets_frontend' is reloaded
  16
  17     For the sets (data-enable and/or data-disable without data-xmlid), the set is
  18     automatically checked if:
  19     - all related fields are enabled for data-enable
  20     - all related fields are disabled for data-disable
  21     else unchecked
  22
  23     HTML apply classes:
  24     - 'checked': on the parent label when input is checked
  25     - 'in': on the container (e.g.: bootstrap modal) after added in DOM (removed together
  26        out is added)
  27     - 'out': on the container 1 second before removed from ths DOM
  28     - 'loading': on the container/modal when the new css is loading
  29 -->
  30
  31 <t t-name="website.theme_customize">
  32   <div id="theme_customize_modal" class="modal fade">
  33       <div class="modal-dialog">
  34           <div class="modal-content">
  35               <div class="loading_backdrop"></div>
  36               <div class="modal-header">
  37                   <button type="button" class="close">×</button>
  38                   <h4 class="modal-title" id="mySmallModalLabel">Customize your theme</h4>
  39               </div>
  40               <div class="modal-body">
  41                   <h5 class="modal-h5">LAYOUT</h5>
  42                   <table name="layout">
  43                       <tr>
  44                           <td class=" text-center" width="50%">
  45                               <label class=" center-block">
  46                                   <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>
  47                                   <input name="layoutvar" type="radio" data-xmlid="" />
  48                               </label>
  49                           </td>
  50                           <td class=" text-center">
  51                               <label class=" center-block">
  52                                  <div class="text-center" style="background-image: url(/website/static/src/img/theme/layout-boxed.gif); background-size: 100%; line-height: 40px;">BOXED</div>
  53                                   <input name="layoutvar" type="radio" data-xmlid="website.option_layout_boxed"/>
  54                               </label>
  55                           </td>
  56                       </tr>
  57                   </table>
  58
  59                   <h5 class="modal-h5">MAIN COLOR</h5>
  60                   <table name="color">
  61                       <tr>
  62                           <td>
  63                               <label class="chd-color-combi">
  64                                   <img src="/website/static/src/img/theme/variant-stone.gif" alt="Stone" class="chd-color-combi-img"/>
  65                                   <input name="colorvar" type="radio" data-xmlid="" />
  66                               </label>
  67                           </td>
  68                           <td>
  69                               <label class="chd-color-combi">
  70                                   <img src="/website/static/src/img/theme/variant-emerald.gif" alt="Emerald" class="chd-color-combi-img"/>
  71                                   <input name="colorvar" type="radio" data-xmlid="website.option_color_emerald" />
  72                               </label>
  73                           </td>
  74                           <td>
  75                               <label class="chd-color-combi">
  76                                   <img src="/website/static/src/img/theme/variant-cobalt.gif" alt="Cobalt" class="chd-color-combi-img"/>
  77                                   <input name="colorvar" type="radio" data-xmlid="website.option_color_cobalt" />
  78                               </label>
  79                           </td>
  80                           <td>
  81                               <label class="chd-color-combi">
  82                                   <img src="/website/static/src/img/theme/variant-amethyst.gif" alt="Amethyst" class="chd-color-combi-img"/>
  83                                   <input name="colorvar" type="radio" data-xmlid="website.option_color_amethyst" />
  84                               </label>
  85                           </td>
  86                           <td>
  87                               <label class="chd-color-combi">
  88                                   <img src="/website/static/src/img/theme/variant-ruby.gif" alt="Blue" class="chd-color-combi-img"/>
  89                                   <input name="colorvar" type="radio" data-xmlid="website.option_color_ruby" />
  90                               </label>
  91                           </td>
  92                           <td>
  93                               <label class="chd-color-combi">
  94                                   <img src="/website/static/src/img/theme/variant-gold.gif" alt="Gold" class="chd-color-combi-img"/>
  95                                   <input name="colorvar" type="radio" data-xmlid="website.option_color_gold" />
  96                               </label>
  97                           </td>
  98                       </tr>
  99                   </table>
 100
 101                   <h5 class="modal-h5">FONTS COMBINATIONS</h5>
 102                   <table name="font">
 103                       <tr>
 104                           <td width="50%">
 105                               <label>
 106                                   <div>
 107                                       <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">Helvetica</span>
 108                                       <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >/ Georgia</span>
 109                                   </div>
 110                                   <input name="theme" type="radio" data-xmlid=""/>
 111                               </label>
 112                           </td>
 113                           <td width="50%">
 114                               <label>
 115                                   <div>
 116                                       <span style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px" >Georgia</span>
 117                                       <span style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px">/ Helvetica</span>
 118                                     <input name="theme" type="radio" data-xmlid="website.option_font"/>
 119                                   </div>
 120                               </label>
 121                           </td>
 122                       </tr>
 123                   </table>
 124               </div>
 125           </div>
 126       </div>
 127   </div>
 128 </t>
 129
 130 <!-- color-picker -->
 131 <!-- HTML class to hide option for one mode : only-text, only-bg -->
 132
 133 <t t-name="website.colorpicker">
 134     <table class="colorpicker">
 135         <tr>
 136             <td><button class="automatic-color" title="Automatic Color"/></td>
 137             <td><button class="bg-primary" title="Primary Color"/></td>
 138             <td><button class="bg-success" title="Success Color"/></td>
 139             <td><button class="bg-info" title="Info Color"/></td>
 140             <td><button class="bg-warning" title="Warning Color"/></td>
 141             <td><button class="bg-danger" title="Danger Color"/></td>
 142         </tr>
 143         <tr><td colspan="8"><hr style="width: 100%; height: 1px;"/></td></tr>
 144         <tr>
 145             <td><button class="bg-blue"/></td>
 146             <td><button class="bg-turquoise"/></td>
 147             <td><button class="bg-green"/></td>
 148             <td><button class="bg-yellow"/></td>
 149             <td><button class="bg-red"/></td>
 150             <td><button class="bg-pink"/></td>
 151             <td><button class="bg-purple"/></td>
 152             <td><button class="bg-brown"/></td>
 153         </tr>
 154     </table>
 155 </t>
 156
 157 </templates>