[IMP] website: correct page hierarchy for comparison snippet
[odoo/odoo.git] / addons / website / views / snippets.xml
index 163a61f..f065bb9 100644 (file)
     </ul>
     <div class="tab-content">
 
-<div id="snippet_structure" class="tab-pane fade in active">
+<div id="snippet_structure" class="tab-pane active">
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_banner.png"/>
-            <span class="oe_snippet_thumbnail_title">Banner</span>
-        </div>
-        <div id="myCarousel" class="oe_snippet_body carousel slide mb32" style="height: 320px;">
+    <div name="Banner" class="o_block_banner">
+        <div id="myCarousel" class="carousel slide mb32" data-interval="10000" style="height: 320px;">
             <!-- Indicators -->
             <ol class="carousel-indicators hidden">
                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
             </ol>
             <div class="carousel-inner">
-                <div class="item image_text active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
+                <div class="item active" style="background-image: url('/website/static/src/img/banner/color_splash.jpg')">
                     <div class="container">
-                        <div class="carousel-caption content">
-                            <div>
-                                <h2>Your Banner Title</h2>
-                                <h3>Click to customize this text</h3>
-                                <p>
-                                    <a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a>
-                                </p>
+                        <div class="row content">
+                            <div class="carousel-content col-md-6 col-sm-12">
+                                    <h2>Your Banner Title</h2>
+                                    <h3>Click to customize this text</h3>
+                                    <p>
+                                        <a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a>
+                                    </p>
+                            </div>
+                            <div class="carousel-img col-md-6 hidden-sm hidden-xs">
+                                <img class="img-responsive" src="/website/static/src/img/banner/banner_picture.png" alt="Banner Odoo Image"/>
                             </div>
                         </div>
-                        <img class="carousel-image hidden-xs" src="/website/static/src/img/banner/banner_picture.png" alt="Banner OpenERP Image"/>
                     </div>
                 </div>
             </div>
-            <a class="carousel-control left hidden" href="#myCarousel" data-slide="prev" style="width: 10%"><span class="glyphicon glyphicon-chevron-left"><span class="hidden">.</span></span></a>
-            <a class="carousel-control right hidden" href="#myCarousel" data-slide="next" style="width: 10%"><span class="glyphicon glyphicon-chevron-right"><span class="hidden">.</span></span></a>
+            <div class="carousel-control left hidden" data-target="#myCarousel" data-slide="prev" style="width: 10%"><i class="fa fa-chevron-left"></i></div>
+            <div class="carousel-control right hidden" data-target="#myCarousel" data-slide="next" style="width: 10%"><i class="fa fa-chevron-right"></i></div>
         </div>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
-            <span class="oe_snippet_thumbnail_title">Text-Image</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="Text-Image" class="o_block_text_image">
+        <section>
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 mt16">
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_text.png"/>
-            <span class="oe_snippet_thumbnail_title">Image-Text</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="Image-Text" class="o_block_image_text">
+        <section>
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 mt16">
         </section>
     </div>
 
-
-    <div>
+    <div name="Image-Text" class="o_block_image_float">
         <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_jumbotron.png"/>
-            <span class="oe_snippet_thumbnail_title">Big Message</span>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
+            <span class="oe_snippet_thumbnail_title">Image-Floating</span>
         </div>
-        <section class="oe_snippet_body jumbotron mt16 mb16">
+        <section class="oe_snippet_body para_large">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12 mb16 mt16">
+                        <div class="o_image_floating o_margin_l pull-right">
+                            <div class="o_container">
+                                <img class="img img-rounded img-responsive" src="/website/static/src/img/odoo.jpg"/>
+                                <mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
+                            </div>
+                            <div class="o_footer">
+                                <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
+                            </div>
+                        </div>
+                        <h3>What a day it was yesterday - such a big day for us!</h3>
+                        <p style="text-align: justify;">
+                            In case you still feel a bit puzzled about all
+                            of our yesterday's announcements, here is a little
+                            summary for you. <br/>
+                            We have decided to change the
+                            name because <b>"OpenERP"</b> didn't reflect the offering
+                            of the company anymore. With our newest apps, such
+                            as Website Builder, PoS or eCommerce, we have
+                            moved beyond the ERP territory. <br/>
+                            But <u>don't worry</u>, <b>Odoo</b> is and always will be
+                            fully open source. You can read more about the new name here.
+                            We have also prepared a short FAQ to explain all these changes
+                            to all of you. <br/>
+                        </p>
+                        <h3>Discover more about Odoo</h3>
+                        <p style="text-align: justify;">
+                            With Odoo's fully integrated software, you can easily manage your
+                            meetings, schedule business calls, create recurring meetings,
+                            synchronize your agenda and easily keep in touch with your colleagues,
+                            partners and other people involved in projects or business discussions.
+                            <br/><br/><a href="#">Check now and discover more today!</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <div name="Big Message" class="o_block_jumbotron">
+        <section class="jumbotron mt16 mb16">
             <div class="container">
                 <h1>Sell Online. Easily.</h1>
                 <p>
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_block.png"/>
-            <span class="oe_snippet_thumbnail_title">Text Block</span>
-        </div>
-        <section class="oe_snippet_body mt16 mb16">
+    <div name="Text Block" class="o_block_text_block">
+        <section class="mt16 mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center mt16 mb32">
                             A great way to catch your reader's attention is to tell a story.
                             Everything you consider writing can be told as a story.
                         </p><p>
-                            <b>Great stories have personality</b>. Consider telling
+                            <b>Great stories have personality.</b> Consider telling
                             a great story that provides personality. Writing a story
                             with personality for potential clients will asist with
                             making a relationship connection. This shows up in small
                             of view, not from someone else's experience.
                         </p><p>
                             <b>Great stories are for everyone even when only written for
-                            just one person</b>. If you try to write with a wide general
+                            just one person.</b> If you try to write with a wide general
                             audience in mind, your story will ring false and be bland.
                             No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.
                         </p>
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_title.png"/>
-            <span class="oe_snippet_thumbnail_title">Title</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="Title" class="o_block_title">
+        <section>
             <div class="container">
                 <div class="row">
                     <div class="col-md-12">
         </section>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_features.png"/>
-            <span class="oe_snippet_thumbnail_title">Features</span>
-        </div>
-        <section class="oe_snippet_body mb16">
+    <div name="Features" class="o_block_features">
+        <section class="mb16">
             <div class="container">
                 <div class="row mt16 mb16">
                     <div class="col-md-4 text-center">
         </section>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_big_picture.png"/>
-            <span class="oe_snippet_thumbnail_title">Big Picture</span>
-        </div>
-        <section class="oe_snippet_body oe_dark mt16 mb16">
+    <div name="Big Picture" class="o_block_big_picture">
+        <section class="oe_dark mt16 mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center mt32 mb32">
         </section>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_three_columns.png"/>
-            <span class="oe_snippet_thumbnail_title">Three Columns</span>
-        </div>
-        <section class="oe_snippet_body mt16 mb16">
+    <div name="Three Columns" class="o_block_three_columns">
+        <section class="mt16 mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-4">
 
 </div>
 
-<div id="snippet_content" class="tab-pane fade">
+<div id="snippet_content" class="tab-pane">
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_well.png"/>
-            <span class="oe_snippet_thumbnail_title">Well</span>
-        </div>
-        <div class="oe_snippet_body well">
+    <div name="Well" class="o_block_well">
+        <div class="well">
             Explain the benefits you offer. Don't write about products or
             services here, write about solutions.
         </div>
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quote.png"/>
-            <span class="oe_snippet_thumbnail_title">Quote</span>
-        </div>
-        <blockquote class="oe_snippet_body">
+    <div name="Quote" class="o_block_quote">
+        <blockquote>
             <p>
                 Write a quote here from one of your customers. Quotes are a
                 great way to build confidence in your products or services.
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_panel.png"/>
-            <span class="oe_snippet_thumbnail_title">Panel</span>
-        </div>
-        <div class="oe_snippet_body panel panel-default">
+    <div name="Panel" class="o_block_panel">
+        <div class="panel panel-default">
             <div class="panel-heading">
                 <h3 class="panel-title">Feature Title</h3>
             </div>
         </div>
     </div>
 
-
-    <div>
+    <div name="Image Floating" class="o_block_image_floating">
         <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_separator.png"/>
-            <span class="oe_snippet_thumbnail_title">Separator</span>
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
+            <span class="oe_snippet_thumbnail_title">Image Floating</span>
+        </div>
+        <div class="oe_snippet_body o_image_floating o_margin_l pull-right">
+            <div class="o_container">
+                <img class="img img-rounded img-responsive" src="/website/static/src/img/library/ipad.png"/>
+                <mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
+            </div>
+            <div class="o_footer">
+                <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
+            </div>
         </div>
-        <hr class="oe_snippet_body"/>
     </div>
 
+    <div name="Separator" class="o_block_separator">
+        <hr/>
+    </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_button.png"/>
-            <span class="oe_snippet_thumbnail_title">Share</span>
-        </div>
-        <div class="oe_snippet_body oe_share">
+
+    <div name="Share" class="o_block_button">
+        <div class="oe_share">
             <h3>
                 Share 
                 <a target="_Blank" class="oe_share_facebook" href="https://www.facebook.com/sharer/sharer.php?u={url}"><i class="fa fa-facebook-square"></i></a>
         </div>
     </div>
 
-</div>
-
-<div id="snippet_feature" class="tab-pane fade">
-
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_portfolio.png"/>
-            <span class="oe_snippet_thumbnail_title">Portfolio</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="Table" class="o_block_table">
+        <section class="oe_snippet_body mt16 mb16">
             <div class="container">
                 <div class="row">
-                    <div class="col-md-12 text-center mt16 mb32">
-                        <h2>Our Porfolio</h2>
-                        <h4 class="text-muted">More than 500 successful projects</h4>
-                    </div>
-                    <div class="col-md-4">
-                        <img class="img img-thumbnail img-responsive" src="/website/static/src/img/deers.jpg"/>
-                        <img class="img img-thumbnail img-responsive" src="/website/static/src/img/desert.jpg"/>
-                        <img class="img img-thumbnail img-responsive" src="/website/static/src/img/china.jpg"/>
-                    </div>
-                    <div class="col-md-4">
-                        <img class="img img-thumbnail img-responsive" src="/website/static/src/img/desert.jpg"/>
-                        <img class="img img-thumbnail img-responsive" src="/website/static/src/img/china.jpg"/>
-                        <img class="img img-thumbnail img-responsive" src="/website/static/src/img/deers.jpg"/>
+                    <div class="col-md-8">
+                        <table cellspacing="0" class="table_desc">
+                            <tbody>
+                                <tr><th class="table_heading" colspan="2">Description</th></tr>
+                                <tr>
+                                    <td></td>
+                                    <td>(Press Tab to add a new row)</td>
+                                </tr>
+                            </tbody>
+                        </table>
                     </div>
                     <div class="col-md-4">
-                        <img class="img img-thumbnail img-responsive" src="/website/static/src/img/landscape.jpg"/>
-                        <img class="img img-thumbnail img-responsive" src="/website/static/src/img/china.jpg"/>
-                        <img class="img img-thumbnail img-responsive" src="/website/static/src/img/desert.jpg"/>
+                        <img class="img img-rounded img-responsive" src="/website/static/src/img/library/ipad.png"/>
+                        <h4 class="mt16">Description</h4>
+                        <p>
+                            To add a related product list, reduce 
+                            the size of these three columns using 
+                            the right icon of each block.
+                        </p>
                     </div>
                 </div>
             </div>
         </section>
     </div>
+</div>
 
+<div id="snippet_feature" class="tab-pane">
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_image_gallery.png"/>
-            <span class="oe_snippet_thumbnail_title">Image Gallery</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="Image Gallery" class="o_block_image_gallery">
+        <section class="o_gallery o_nomode o_spc-none">
             <div class="container">
                 <div class="row">
-                    <div class="col-md-12 text-center mt16 mb32">
-                        <h2>Our Customer References</h2>
-                        <h4 class="text-muted">More than 500 successful projects</h4>
-                    </div>
                     <div class="col-md-6">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/desert.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/desert.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/china_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/china_thumb.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/deers_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/deers_thumb.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/desert_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/desert_thumb.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/china_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/china_thumb.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/deers_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/deers_thumb.jpg"/>
                     </div>
                     <div class="col-md-6">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/landscape.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/landscape.jpg"/>
                     </div>
                     <div class="col-md-3">
-                        <img class="img img-thumbnail img-responsive mb16" src="/website/static/src/img/china_thumb.jpg"/>
+                        <img class="img img-thumbnail img-responsive mb8 mt8" src="/website/static/src/img/china_thumb.jpg"/>
                     </div>
                 </div>
             </div>
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_comparison.png"/>
-            <span class="oe_snippet_thumbnail_title">Comparisons</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="Comparisons" class="o_block_comparison">
+        <section>
             <div class="container">
               <div class="row">
                 <div class="col-md-12 text-center mt16 mb32">
                     <div class="panel panel-info">
 
                       <div class="panel-heading text-center">
-                          <h2 style="margin: 0">Beginner</h2>
+                          <h3 style="margin: 0">Beginner</h3>
                           <p style="margin: 0" class="text-muted">
                               Starter package
                           </p>
                       </div>
                       <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
-                        <h2 style="margin: 0"><span>$</span><b style="font-size: 60px">450</b><small>.00</small></h2>
+                        <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">450</b><small>.00</small></h3>
                         <div>per month</div>
                       </div>
 
                     <div class="panel panel-primary">
 
                       <div class="panel-heading text-center">
-                          <h2 style="margin: 0">Professional</h2>
+                          <h3 style="margin: 0">Professional</h3>
                           <p style="margin: 0">
                               Enterprise package
                           </p>
                       </div>
                       <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
-                        <h2 style="margin: 0"><span>$</span><b style="font-size: 60px">590</b><small>.00</small></h2>
+                        <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">590</b><small>.00</small></h3>
                         <div>per month</div>
                       </div>
 
                     <div class="panel panel-info">
 
                       <div class="panel-heading text-center">
-                          <h2 style="margin: 0">Expert</h2>
+                          <h3 style="margin: 0">Expert</h3>
                           <p style="margin: 0" class="text-muted">
                               The top of the top
                           </p>
                       </div>
                       <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
-                        <h2 style="margin: 0"><span>$</span><b style="font-size: 60px">890</b><small>.00</small></h2>
+                        <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">890</b><small>.00</small></h3>
                         <div>per month</div>
                       </div>
 
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_button.png"/>
-            <span class="oe_snippet_thumbnail_title">Button</span>
-        </div>
-        <section class="oe_snippet_body oe_snippet_darken oe_dark mb32 mt32">
+    <div name="Button" class="o_block_button">
+        <section class="jumbotron">
             <div class="container">
-              <div class="row">
-                <div class="col-md-12 text-center mt16 mb16">
-                    <a href="/page/website.contactus" class="btn btn-primary btn-lg">Contact us</a>
+                <div class="row">
+                    <div class="col-md-9 text-muted">
+                        <p class="mb0">
+                            <strong>50,000+ companies run Odoo to grow their businesses.</strong>
+                        </p><p class="mb0">
+                            Join us and make your company a better place.
+                        </p>
+                    </div>
+                    <div class="col-md-3">
+                        <a href="/page/website.contactus" class="btn btn-primary btn-lg pull-right mt8">
+                            <i class="fa fa-arrow-right"></i>
+                            Contact Us Now
+                        </a>
+                    </div>
                 </div>
-              </div>
             </div>
         </section>
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_faq.png"/>
-            <span class="oe_snippet_thumbnail_title">FAQ</span>
-        </div>
-        <section class="oe_snippet_body">
+    <div name="FAQ" class="o_block_faq">
+        <section>
             <div class="container">
                 <h2 class="page-header">
                     Point of Sale Questions <small>v7</small>
                 </h2>
                 <h3>
-                    Which hardware does OpenERP POS support?
+                    Which hardware does Odoo POS support?
                 </h3>
                 <p>
-                    OpenERP's POS is a web application that can run on any device that
+                    Odoo's POS is a web application that can run on any device that
                     can display websites with little to no setup required.
                 </p><p>
                     The Point of Sale works perfectly on any kind of touch enabled
     </div>
 
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_references.png"/>
-            <span class="oe_snippet_thumbnail_title">References</span>
-        </div>
-        <section class="oe_snippet_body mb32 mt16">
+    <div name="References" class="o_block_references">
+        <section class="mb32 mt16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12">
                     <div class="col-md-4 col-md-offset-2 mt16 mb32">
                         <blockquote>
                             <p>
-                                OpenERP provides essential platform for our project management.
+                                Odoo provides essential platform for our project management.
                                 Things are better organized and more visible with it.
                             </p>
                             <small>John Doe, CEO</small>
         </section>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
-            <span class="oe_snippet_thumbnail_title">Quotes Slider</span>
-        </div>
-        <div id="myQuoteCarousel" class="oe_snippet_body carousel quotecarousel slide mb0">
+    <div name="Quotes Slider" class="o_block_quotes_slider">
+        <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
             <!-- Indicators -->
             <ol class="carousel-indicators mb0">
                 <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
                             <div class="row">
                                 <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
                                         <p>
-                                            OpenERP provides essential platform for our project management.
+                                            Odoo provides essential platform for our project management.
                                             Things are better organized and more visible with it.
                                         </p>
                                         <small>John Doe, CEO</small>
         </div>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_features.png"/>
-            <span class="oe_snippet_thumbnail_title">Feature Grid</span>
-        </div>
-        <section class="oe_snippet_body mb16">
+    <div name="Feature Grid" class="o_block_features">
+        <section class="mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-5 text-center">
 
 </div>
 
-<div id="snippet_effect" class="tab-pane fade">
+<div id="snippet_effect" class="tab-pane">
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_parallax.png"/>
-            <span class="oe_snippet_thumbnail_title">Parallax</span>
-        </div>
-        <section class="oe_snippet_body parallax"
+    <div name="Parallax" class="o_block_parallax">
+        <section class="parallax"
                 style="background-image: url('/website/static/src/img/banner/mountains.jpg')"
                 data-scroll-background-ratio="0.3">
                 <div><div class="oe_structure"/></div>
         </section>
     </div>
 
-    <div>
-        <div class="oe_snippet_thumbnail">
-            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_quotes_slider.png"/>
-            <span class="oe_snippet_thumbnail_title">Parallax Slider</span>
-        </div>
-        <section class="oe_snippet_body parallax"
+    <div name="Parallax Slider" class="o_block_quotes_slider">
+        <section class="parallax"
                  style="background-image: url('/website/static/src/img/parallax/quote.png')"
                 data-scroll-background-ratio="0.3">
             <div><div><div class="oe_structure">
-                    <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0">
+                    <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
                         <!-- Indicators -->
                         <ol class="carousel-indicators mb0">
                             <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
                                         <div class="row">
                                             <blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
                                                 <p>
-                                                    OpenERP provides essential platform for our project management.
+                                                    Odoo provides essential platform for our project management.
                                                     Things are better organized and more visible with it.
                                                 </p>
                                                 <small>John Doe, CEO</small>
 
 <template id="snippet_options">
 
-    <div data-snippet-option-id='blog-style'
-        data-selector="section:not(.carousel):not(.parallax)">
+    <div data-js='blog-style'
+        data-selector="section:not(.carousel):not(.parallax):not(.o_gallery)">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Style</a>
             <ul class="dropdown-menu">
-                <li data-value="readable"><a>Narrow</a></li>
+                <li data-toggle_class="para_large"><a>Bigger Text</a></li>
+                <li data-toggle_class="readable"><a>Narrow</a></li>
             </ul>
         </li>
     </div>
 
-    <div data-snippet-option-id='background'
-        data-selector="section, .carousel, .parallax">
-        <li class="dropdown-submenu" data-required="true">
+    <div data-js='background'
+        data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax">
+        <li class="dropdown-submenu" data-background="">
             <a tabindex="-1" href="#">Background</a>
             <ul class="dropdown-menu">
-                <li class="dropdown-submenu">
-                    <a tabindex="-2" href="#">Uniform Color</a>
-                    <ul class="dropdown-menu">
-                        <li data-value='oe_dark'><a>Darken</a></li>
-                        <li data-value='oe_green'><a>Green</a></li>
-                        <li data-value='oe_red'><a>Red</a></li>
-                        <li data-value='oe_blue_light'><a>Turquoise</a></li>
-                        <li data-value='oe_blue'><a>Dark Blue</a></li>
-                        <li data-value='oe_orange'><a>Orange</a></li>
-                        <li data-value='oe_purple'><a>Purple</a></li>
-                        <li data-value='oe_black'><a>Black</a></li>
-                    </ul>
-                </li>
-                <li class="dropdown-submenu">
-                    <a tabindex="-2" href="#">People</a>
-                    <ul class="dropdown-menu">
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/parallax/parallax_bg.jpg"><a>Sunflower</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
-                    </ul>
-                </li>
-                <li class="dropdown-submenu">
-                    <a tabindex="-2" href="#">Landscape</a>
-                    <ul class="dropdown-menu">
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/mountains.jpg"><a>Mountains</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
-                    </ul>
-                </li>
-                <li class="dropdown-submenu">
-                    <a tabindex="-2" href="#">Various</a>
-                    <ul class="dropdown-menu">
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/orange_red.jpg"><a>Orange Red</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
-                        <li data-value="oe_img_bg" data-src="/website/static/src/img/parallax/quote.png"><a>Quote</a></li>
-                    </ul>
-                </li>
-                <li data-value=""><a>None</a></li>
+                <li data-background="/website/static/src/img/parallax/parallax_bg.jpg"><a>Sunflower</a></li>
+                <li data-background="/website/static/src/img/banner/business_guy.jpg"><a>Business Guy</a></li>
+                <li data-background="/website/static/src/img/banner/flower_field.jpg"><a>Flowers Field</a></li>
+                <li data-background="/website/static/src/img/banner/landscape.jpg"><a>Landscape</a></li>
+                <li data-background="/website/static/src/img/banner/mountains.jpg"><a>Mountains</a></li>
+                <li data-background="/website/static/src/img/banner/greenfields.jpg"><a>Greenfields</a></li>
+                <li data-background="/website/static/src/img/banner/aqua.jpg"><a>Aqua</a></li>
+                <li data-background="/website/static/src/img/banner/baby_blue.jpg"><a>Baby Blue</a></li>
+                <li data-background="/website/static/src/img/banner/black.jpg"><a>Black</a></li>
+                <li data-background="/website/static/src/img/banner/color_splash.jpg"><a>Color Splash</a></li>
+                <li data-background="/website/static/src/img/banner/mango.jpg"><a>Mango</a></li>
+                <li data-background="/website/static/src/img/banner/orange_red.jpg"><a>Orange Red</a></li>
+                <li data-background="/website/static/src/img/banner/flower.jpg"><a>Purple</a></li>
+                <li data-background="/website/static/src/img/banner/velour.jpg"><a>Velour</a></li>
+                <li data-background="/website/static/src/img/banner/wood.jpg"><a>Wood</a></li>
+                <li data-background="/website/static/src/img/banner/yellow_green.jpg"><a>Yellow Green</a></li>
+                <li data-background="/website/static/src/img/parallax/quote.png"><a>Quote</a></li>
+                <li data-background=""><a>None</a></li>
                 <li><a style="background: none; padding: 5px; border-top: 1px solid #ddd;"></a></li>
-                <li class="oe_custom_bg" data-value="oe_img_bg"><a><b>Choose an image...</b></a></li>
+                <li data-choose_image="choose_image" data-background=""><a><b>Choose an image...</b></a></li>
             </ul>
         </li>
     </div>
+     
+    <div data-js='gallery' data-selector=".o_gallery">
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Mode</a>
+            
+            <ul class="dropdown-menu">
+                <li data-mode="nomode"   > <a>None</a></li>
+                <li data-mode="masonry"  > <a>Masonry</a> </li>
+                <li data-mode="grid"     > <a>Grid</a> </li>
+                <li data-mode="slideshow"> <a>Slideshow</a> </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Slideshow speed</a>
+            <ul class="dropdown-menu">
+                 <li data-interval="1000"> <a>1s</a> </li>
+                 <li data-interval="2000"> <a>2s</a> </li>
+                 <li data-interval="3000"> <a>3s</a> </li>
+                 <li data-interval="5000"> <a>5s</a> </li>
+                 <li data-interval="10000"> <a>10s</a></li>
+                 <li data-interval="0"   > <a>Disable autoplay</a> </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Columns</a>
+            
+            <ul class="dropdown-menu">
+                <li data-columns="1"  > <a>1</a> </li>
+                <li data-columns="2"  > <a>2</a> </li>
+                <li data-columns="3"  > <a>3</a> </li>
+                <li data-columns="4"  > <a>4</a> </li>
+                <li data-columns="6"  > <a>6</a> </li>
+                <li data-columns="12" > <a>12</a> </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Images spacing</a>
 
-    <div data-snippet-option-id='carousel-style'
-        data-selector=".carousel:not(.quotecarousel)">
-        <li class="dropdown-submenu" data-required="true">
-            <a tabindex="-1" href="#">Layout</a>
             <ul class="dropdown-menu">
-                <li data-value="text_only"><a>Text Only</a></li>
-                <li data-value="image_text"><a>Image - Text</a></li>
-                <li data-value="text_image"><a>Text - Image</a></li>
+                <li data-select_class="o_spc-none"  > <a>None</a>   </li>
+                <li data-select_class="o_spc-small" > <a>Small</a>  </li>
+                <li data-select_class="o_spc-medium"> <a>Medium</a> </li>
+                <li data-select_class="o_spc-big"   > <a>Big</a>    </li>
             </ul>
         </li>
+        <li class="dropdown-submenu">
+           <a tabindex="-2" href="#">Album</a>
+           
+           <ul class="dropdown-menu">
+               <li data-albumimages="images_add"> <a>Add images</a></li>
+               <li data-albumimages="images_rm"><a>Remove all images</a></li>
+           </ul>
+        </li>
+        <li class="dropdown-submenu">
+           <a tabindex="-2" href="#">Styling</a>
+           
+           <ul class="dropdown-menu">
+               <li data-styling="img-rounded"   ><a>Rounded corners</a></li>
+               <li data-styling="img-thumbnail" ><a>Thumbnails</a></li>
+               <li data-styling="img-circle"    ><a>Circle</a></li>
+               <li data-styling="shadow"        ><a>Shadows</a></li>
+               <li data-styling="fa-spin"       ><a>Spinning</a></li>
+           </ul>
+        </li>
     </div>
 
-    <div data-snippet-option-id='carousel'
-        data-selector=".carousel">
-        <li class="divider"></li>
-        <li>
-            <a href="#" class="button js_add">Add Slide</a>
+    <div data-js='colorpicker'
+        data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax">
+        <li class="dropdown-submenu">
+            <a tabindex="-1" href="#">Color</a>
+            <ul class="dropdown-menu">
+                <li></li>
+            </ul>
+        </li>
+    </div>
+     
+    <div data-js='gallery' data-selector=".gallery">
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Mode</a>
+            
+            <ul class="dropdown-menu">
+                <li data-mode="nomode"   > <a>None</a></li>
+                <li data-mode="masonry"  > <a>Masonry</a> </li>
+                <li data-mode="grid"     > <a>Grid</a> </li>
+                <li data-mode="slideshow"> <a>Slideshow</a> </li>
+            </ul>
         </li>
-        <li>
-            <a href="#" class="button js_remove">Remove Slide</a>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Slideshow speed</a>
+            <ul class="dropdown-menu">
+                 <li data-interval="1000"> <a>1s</a> </li>
+                 <li data-interval="2000"> <a>2s</a> </li>
+                 <li data-interval="3000"> <a>3s</a> </li>
+                 <li data-interval="5000"> <a>5s</a> </li>
+                 <li data-interval="10000"> <a>10s</a></li>
+                 <li data-interval="0"   > <a>Disable autoplay</a> </li>
+            </ul>
         </li>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Columns</a>
+            
+            <ul class="dropdown-menu">
+                <li data-columns="1"  > <a>1</a> </li>
+                <li data-columns="2"  > <a>2</a> </li>
+                <li data-columns="3"  > <a>3</a> </li>
+                <li data-columns="4"  > <a>4</a> </li>
+                <li data-columns="6"  > <a>6</a> </li>
+                <li data-columns="12" > <a>12</a> </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Images spacing</a>
+
+            <ul class="dropdown-menu">
+                <li data-select_class="spc-none"  > <a>None</a>   </li>
+                <li data-select_class="spc-small" > <a>Small</a>  </li>
+                <li data-select_class="spc-medium"> <a>Medium</a> </li>
+                <li data-select_class="spc-big"   > <a>Big</a>    </li>
+            </ul>
+        </li>
+        <li class="dropdown-submenu">
+           <a tabindex="-2" href="#">Album</a>
+           
+           <ul class="dropdown-menu">
+               <li data-albumimages="images_add"> <a>Add images</a></li>
+               <li data-albumimages="images_rm"><a>Remove all images</a></li>
+           </ul>
+        </li>
+        <li class="dropdown-submenu">
+           <a tabindex="-2" href="#">Styling</a>
+           
+           <ul class="dropdown-menu">
+               <li data-styling="img-rounded"   ><a>Rounded corners</a></li>
+               <li data-styling="img-thumbnail" ><a>Thumbnails</a></li>
+               <li data-styling="img-circle"    ><a>Circle</a></li>
+               <li data-styling="shadow"        ><a>Shadows</a></li>
+               <li data-styling="fa-spin"       ><a>Spinning</a></li>
+           </ul>
+        </li>
+    </div>
+
+    <div data-js='carousel'
+        data-selector=":not(.o_gallery > .container) > .carousel">
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Slideshow speed</a>
+            <ul class="dropdown-menu">
+                 <li data-interval="1000"> <a>1s</a> </li>
+                 <li data-interval="2000"> <a>2s</a> </li>
+                 <li data-interval="3000"> <a>3s</a> </li>
+                 <li data-interval="5000"> <a>5s</a> </li>
+                 <li data-interval="10000"> <a>10s</a></li>
+                 <li data-interval="0"   > <a>Disable autoplay</a> </li>
+            </ul>
+        </li>
+        <li class="divider"></li>
+        <li data-add_slide="true"> <a href="#">Add Slide</a> </li>
+        <li data-remove_slide="true"> <a href="#" >Remove Slide</a></li>
     </div>
 
-    <div data-snippet-option-id='margin-y'
-        data-selector="section, .row > [class*='col-md-'], .carousel, .parallax, hr">
+    <div data-js='margin-y'
+        data-selector="section, .row > [class*='col-md-'], :not(.o_gallery > .container) > .carousel, .parallax, hr">
     </div>
 
-    <div data-snippet-option-id='resize'
-        data-selector="section, .carousel, .parallax"
-        data-selector-children=".oe_structure, [data-oe-type=html]">
+    <div data-js='resize'
+        data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax"
+        data-drop-in=".oe_structure, [data-oe-type=html]">
     </div>
 
-    <div data-snippet-option-id='margin-x'
+    <div data-js='margin-x'
         data-selector=".row > [class*='col-md-']"
-        data-selector-vertical-children='.row'>
+        data-drop-near=".row > [class*='col-md-']">
+    </div>
+
+    <div data-js='content'
+        data-selector="blockquote, .well, .panel, .oe_share, .o_image_floating"
+        data-drop-near="p, h1, h2, h3, blockquote, .well, .panel, .oe_share"
+        data-drop-in=".content">
+    </div>
+
+    <div data-js='separator'
+        data-selector="hr"
+        data-drop-in=".oe_structure, [data-oe-type=html]">
+    </div>
+
+    <div data-snippet-option-id='image_floating_margin'
+        data-selector=".o_image_floating">
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Margin</a>
+            <ul class="dropdown-menu">
+                <li data-value="o_margin_xl"> <a>Extra-Large</a> </li>
+                <li data-value="o_margin_l"> <a>Large</a> </li>
+                <li data-value="o_margin_m"  > <a>Medium</a> </li>
+                <li data-value="o_margin_s"  > <a>Small</a></li>
+                <li data-value=""  > <a>None</a></li>
+            </ul>
+        </li>
+    </div>
+
+    <div data-snippet-option-id='image_floating_hidelink'
+        data-selector=".o_image_floating">
+        <li data-value="o_hide_link"><a>Hide link</a></li>
     </div>
 
-    <div data-snippet-option-id='content'
-        data-selector="blockquote, .well, .panel, .oe_share"
-        data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel, .oe_share"
-        data-selector-children=".content">
+    <div data-snippet-option-id='image_floating_side'
+         data-selector=".o_image_floating">
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Float</a>
+            <ul class="dropdown-menu">
+                <li data-value="pull-left"><a>Left</a></li>
+                <li data-value="pull-right"><a>Right</a></li>
+            </ul>
+        </li>
     </div>
 
-    <div data-snippet-option-id='parallax'
+    <div data-js='parallax'
         data-selector=".parallax">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Scroll Speed</a>
             <ul class="dropdown-menu" name="parallax-scroll">
-                <li data-value="0"><a>Static</a></li>
-                <li data-value="0.3"><a>Very Slow</a></li>
-                <li data-value="0.6"><a>Slow</a></li>
-                <li data-value="1"><a>Fixed</a></li>
-                <li data-value="1.4"><a>Fast</a></li>
-                <li data-value="1.7"><a>Very Fast</a></li>
+                <li data-scroll="0"><a>Static</a></li>
+                <li data-scroll="0.3"><a>Very Slow</a></li>
+                <li data-scroll="0.6"><a>Slow</a></li>
+                <li data-scroll="1"><a>Fixed</a></li>
+                <li data-scroll="1.4"><a>Fast</a></li>
+                <li data-scroll="1.7"><a>Very Fast</a></li>
             </ul>
         </li>
     </div>
 
-    <div data-snippet-option-id='media'
-        data-phantom="true"
+    <div data-js='media'
+        data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa, .glyphicon">
+        <li data-edition="edition"><a>Change...</a></li>
+    </div>
+
+    <div data-js='transform'
         data-selector="img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa">
-        <li><a href="#" class="edition">Change Media</a></li>
-        <li><a href="#" class="style">Style</a></li>
         <li class="dropdown-submenu">
-            <a href="#" tabindex="-1">Rotation</a>
-            <ul class="dropdown-menu">
-                <li data-value="fa-flip-horizontal"><a>Horizontal flip</a></li>
-                <li data-value="fa-flip-vertical"><a>Vertical flip</a></li>
-                <li data-value="fa-spin"><a>Spin</a></li>
+            <a tabindex="-1" href="#">Style</a>
+            <ul class="dropdown-menu" name="parallax-scroll">
+                <li data-select_class="img-rounded"><a>Rounded corners</a></li>
+                <li data-select_class="img-thumbnail"><a>Box</a></li>
+                <li data-select_class="img-circle"><a>Circle</a></li>
+                <li data-select_class="shadow"><a>Shadow</a></li>
+                <li data-select_class="fa-spin"><a>Spin</a></li>
             </ul>
         </li>
-        <li><a href="#" class="clear-style">Clear Style</a></li>
+        <li data-style=""><a>Transform</a></li>
+        <li data-clear_style=""><a>Reset Transformation</a></li>
     </div>
 
 </template>
 
 
 </data>
-</openerp>
\ No newline at end of file
+</openerp>