[IMP] website snippet: add group for styles snippets, add custom picture with style...
authorChristophe Matthieu <chm@openerp.com>
Wed, 20 Nov 2013 11:52:50 +0000 (12:52 +0100)
committerChristophe Matthieu <chm@openerp.com>
Wed, 20 Nov 2013 11:52:50 +0000 (12:52 +0100)
bzr revid: chm@openerp.com-20131120115250-etqv5ofqguze0zsj

addons/website/static/src/css/website.css
addons/website/static/src/css/website.sass
addons/website/static/src/js/website.editor.js
addons/website/static/src/js/website.snippets.editor.js
addons/website/views/snippets.xml
addons/website_blog/data/website_blog_demo.xml
addons/website_event/data/event_demo.xml
addons/website_hr_recruitment/data/website_hr_recruitment_demo.xml
addons/website_hr_recruitment/views/website_hr_recruitment.xml
addons/website_sale/website_sale_demo.xml

index 99ba04e..41c04e6 100644 (file)
@@ -257,6 +257,73 @@ footer {
   margin-bottom: 0px;
 }
 
+/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
+.nav-hierarchy {
+  padding-left: 16px;
+}
+
+#themes-list .well {
+  padding: 0 0 20px 0;
+}
+
+/* -- Hack for removing double scrollbar from mobile preview -- */
+div#mobile-preview.modal {
+  overflow: hidden;
+  overflow-y: hidden;
+}
+
+ul.nav-stacked > li > a {
+  padding: 2px 15px;
+}
+
+#customize-menu .dropdown-header {
+  text-transform: uppercase;
+}
+
+/* ---- PUBLISH ---- */
+.css_unpublish, .css_publish {
+  display: none;
+}
+
+.css_published .css_unpublish, .css_unpublished .css_publish {
+  display: block;
+}
+
+[data-publish='off'] {
+  opacity: 0.5;
+}
+
+/* ---- END of PUBLISH ---- */
+::selection {
+  background: rgba(150, 150, 220, 0.3);
+}
+
+.logo-img {
+  width: 220px;
+}
+
+.oe_demo {
+  position: relative;
+}
+.oe_demo img {
+  width: 100%;
+}
+.oe_demo div {
+  position: absolute;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  opacity: 0.85;
+  bottom: 0px;
+  width: 100%;
+  padding: 7px;
+  color: white;
+  font-weight: bold;
+}
+.oe_demo div a {
+  color: white;
+}
+
+/* ---- SNIPPETS --- */
 .carousel-inner .item {
   height: 100%;
   background-size: 100%;
@@ -331,23 +398,6 @@ footer {
   right: 10px;
 }
 
-/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
-.dark {
-  background: #eff8f8;
-  background: rgba(100, 200, 200, 0.14);
-  -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
-  -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
-  box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
-}
-
-.nav-hierarchy {
-  padding-left: 16px;
-}
-
-#themes-list .well {
-  padding: 0 0 20px 0;
-}
-
 /* Parallax Theme */
 .parallax_quote {
   background: url("/website/static/src/img/parallax/quote.png") center center no-repeat fixed;
@@ -374,59 +424,32 @@ footer {
   height: 450px;
 }
 
-/* -- Hack for removing double scrollbar from mobile preview -- */
-div#mobile-preview.modal {
-  overflow: hidden;
-  overflow-y: hidden;
-}
-
-ul.nav-stacked > li > a {
-  padding: 2px 15px;
-}
-
-#customize-menu .dropdown-header {
-  text-transform: uppercase;
-}
-
-/* ---- PUBLISH ---- */
-.css_unpublish, .css_publish {
-  display: none;
-}
-
-.css_published .css_unpublish, .css_unpublished .css_publish {
-  display: block;
+/* Background */
+.oe_dark {
+  background: #eff8f8;
+  background: rgba(100, 200, 200, 0.14);
+  -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
+  -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
+  box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
+  background-image: none !important;
 }
 
-[data-publish='off'] {
-  opacity: 0.5;
+.oe_black {
+  background-color: rgba(0, 0, 0, 0.9);
+  background-image: none !important;
 }
 
-/* ---- END of PUBLISH ---- */
-::selection {
-  background: rgba(150, 150, 220, 0.3);
+.oe_green {
+  background-color: rgba(0, 128, 0, 0.8);
+  background-image: none !important;
 }
 
-.logo-img {
-  width: 220px;
+.oe_red {
+  background-color: rgba(255, 0, 0, 0.8);
+  background-image: none !important;
 }
 
-.oe_demo {
-  position: relative;
-}
-.oe_demo img {
-  width: 100%;
-}
-.oe_demo div {
-  position: absolute;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  opacity: 0.85;
-  bottom: 0px;
-  width: 100%;
-  padding: 7px;
-  color: white;
-  font-weight: bold;
-}
-.oe_demo div a {
-  color: white;
+.oe_custom_bg {
+  height: 100%;
+  background-size: 100%;
 }
index f947a16..cd1c99d 100644 (file)
@@ -186,6 +186,65 @@ footer
 // .nav > li  a
 //     display: block
 
+/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
+
+.nav-hierarchy
+    padding-left: 16px
+
+#themes-list .well
+    padding: 0 0 20px 0
+
+/* -- Hack for removing double scrollbar from mobile preview -- */
+div#mobile-preview.modal
+    overflow: hidden
+    overflow-y: hidden
+
+ul.nav-stacked > li > a
+    padding: 2px 15px
+
+#customize-menu .dropdown-header
+    text-transform: uppercase
+
+/* ---- PUBLISH ---- */
+.css_unpublish, .css_publish
+    display: none
+.css_published .css_unpublish, .css_unpublished .css_publish
+    display: block
+
+[data-publish='off']
+    opacity: 0.5
+
+/* ---- END of PUBLISH ---- */
+
+
+
+::selection
+    background: rgba(150, 150, 220, 0.3)
+
+.logo-img
+    width: 220px
+
+
+.oe_demo
+    position: relative
+    img
+        width: 100%
+    div
+        position: absolute
+        left: 0
+        background-color: rgba(0,0,0,0.4)
+        opacity: 0.85
+        bottom: 0px
+        width: 100%
+        padding: 7px
+        color: white
+        font-weight: bold
+        a
+            color: white
+
+
+/* ---- SNIPPETS --- */
+
 .carousel-inner .item
     height: 100%
     background-size: 100%
@@ -249,20 +308,6 @@ footer
         &.right span
             right: 10px
 
-/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */
-
-.dark
-    background: #eff8f8
-    background: rgba(100, 200, 200, 0.14)
-    -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
-    -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
-    box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
-
-.nav-hierarchy
-    padding-left: 16px
-
-#themes-list .well
-    padding: 0 0 20px 0
 
 /* Parallax Theme */
 
@@ -284,50 +329,25 @@ footer
         height: 300px
     &.oe_big
         height: 450px
-/* -- Hack for removing double scrollbar from mobile preview -- */
-div#mobile-preview.modal
-    overflow: hidden
-    overflow-y: hidden
-
-ul.nav-stacked > li > a
-    padding: 2px 15px
-
-#customize-menu .dropdown-header
-    text-transform: uppercase
-
-/* ---- PUBLISH ---- */
-.css_unpublish, .css_publish
-    display: none
-.css_published .css_unpublish, .css_unpublished .css_publish
-    display: block
-
-[data-publish='off']
-    opacity: 0.5
-
-/* ---- END of PUBLISH ---- */
-
 
-
-::selection
-    background: rgba(150, 150, 220, 0.3)
-
-.logo-img
-    width: 220px
-
-
-.oe_demo
-    position: relative
-    img
-        width: 100%
-    div
-        position: absolute
-        left: 0
-        background-color: rgba(0,0,0,0.4)
-        opacity: 0.85
-        bottom: 0px
-        width: 100%
-        padding: 7px
-        color: white
-        font-weight: bold
-        a
-            color: white
+/* Background */
+.oe_dark
+    background: #eff8f8
+    background: rgba(100, 200, 200, 0.14)
+    -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
+    -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
+    box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset
+    background-image: none !important
+.oe_black
+    background-color: rgba(0, 0, 0, 0.9)
+    background-image: none !important
+.oe_green
+    background-color: rgba(0, 128, 0, 0.8)
+    background-image: none !important
+.oe_red
+    background-color: rgba(255, 0, 0, 0.8)
+    background-image: none !important
+.oe_custom_bg
+    height: 100%
+    background-size: 100%
index 895bc88..feb8e40 100644 (file)
         events: {
             'hidden.bs.modal': 'destroy',
             'click button.save': 'save',
+            'click button[data-dismiss="modal"]': 'cancel',
         },
         init: function (editor) {
             this._super();
         save: function () {
             this.close();
         },
+        cancel: function () {
+        },
         close: function () {
             this.$el.modal('hide');
         },
             });
             return this._super();
         },
+        cancel: function () {
+            this.trigger('cancel');
+        },
 
         /**
          * Sets the provided image url as the dialog's value-to-save and
index 2523c53..7d7aade 100644 (file)
                         self.style_templates[snipped_id] = {
                             'snipped-id' : snipped_id,
                             'selector': $style.data('selector'),
-                            'class': $style.find(".oe_snippet_class").text(),
-                            'label': $style.find(".oe_snippet_label").text()
+                            'class': $style.data("class"),
+                            'label': $style.find(".oe_snippet_label").text(),
+                            'group': $style.find(".oe_snippet_group").text()
                         };
                     });
-                    $styles.remove();
+                    $styles.addClass("hidden");
 
                     self.$snippets = $html.find(".tab-content > div > div").addClass("oe_snippet");
                     self.$el.append($html);
 
     website.snippet.editorRegistry = {};
     website.snippet.Editor = openerp.Class.extend({
-        init: function (parent, dom) {
+        init: function (parent, dom, force_snippet_id) {
             this.parent = parent;
             this.$target = $(dom);
             this.$overlay = this.$target.data('overlay');
-            this.snippet_id = this.$target.data("snippet-id");
+            this.snippet_id = force_snippet_id || this.$target.data("snippet-id");
             this._readXMLData();
             this.load_style_options();
             this.get_parent_block();
         },
 
         load_style_options: function () {
+            if (this.$target.data('snippetStyles')) {
+                return;
+            }
+
             var self = this;
             var $styles = this.$overlay.find('.oe_options');
             var $ul = $styles.find('ul:first');
                 }
                 var $li = $("<li class='oe_style'/>").data(val);
                 $li.append($('<a/>').text(val.label));
-                $ul.append($li);
-                if (self.$target.hasClass( "oe_snippet_" + $li.data("snipped-id") )) {
+                if (self.$target.hasClass( val.class )) {
                     $li.addClass("active");
                 }
-                $styles.removeClass("hidden");
+
+                if (val.group.length) {
+                    var $group = $ul.find("li.dropdown-submenu").filter(function () {
+                        return $("a:first", this).text() === val.group;
+                    });
+                    if (!$group.length) {
+                        $group = $('<li class="dropdown-submenu"><a href="#" tabindex="-1"/><ul class="dropdown-menu"/></li>');
+                        $group.find("a").text(val.group);
+                        $ul.append($group);
+                    }
+                    $group.find("ul").append($li);
+                } else {
+                    $ul.append($li);
+                }
             });
-            $styles.on('click', 'li.oe_style a', _.bind(this.change_style, this));
-        },
-        change_style: function (event) {
-            var $li = $(event.currentTarget).parent();
-            var snipped_id = $li.data("snipped-id");
-            var active = $li.hasClass("active");
-
-            if (website.snippet.editorRegistry[snipped_id]) {
-                var snippet = new website.snippet.editorRegistry[snipped_id](this, this.$target);
-                snippet.drop_and_build_snippet(this.$target);
-            }
-            var _class = "oe_snippet_" + snipped_id + " " + ($li.data("class") || "");
-            if (active) {
-                this.$target.removeClass(_class);
-            } else {
-                this.$target.addClass(_class);
+            
+            if ($ul.find("li").length) {
+                $styles.removeClass("hidden");
+                // il they are only one group, display in flat mode
+                var $groups = $ul.find("li.dropdown-submenu");
+                if ($groups.length === 1) {
+                    $ul.append($groups.find("ul li"));
+                    $groups.remove();
+                }
             }
-            $li.toggleClass("active");
+
+            this.$target.data('snippetStyles', $styles);
+            this.change_style();
+        },
+        change_style: function () {
+            var self = this;
+
+            this.$overlay.find('.oe_options li.oe_style a')
+                .on('click', function (event) {
+                    var $li = $(event.currentTarget).parent();
+                    var active = $li.hasClass("active");
+
+                    if ($li.hasClass("active")) {
+                        self.$target.removeClass($li.data('class'));
+                    } else {
+                        var $prev = $li.parent("ul").find("li.active").removeClass("active");
+                        if ($prev.length) {
+                            self.$target.removeClass($prev.data('class'));
+                            // active snippet after remove class
+                            if (website.snippet.editorRegistry[$prev.data("snipped-id")]) {
+                                new website.snippet.editorRegistry[$prev.data("snipped-id")](self.parent, self.$target, $prev.data("snipped-id"))
+                                    .drop_and_build_snippet(self.$target);
+                            }
+                        }
+                        self.$target.addClass($li.data('class'));
+                    }
+
+                    // active snippet after add or remove class
+                    if (website.snippet.editorRegistry[$li.data("snipped-id")]) {
+                        new website.snippet.editorRegistry[$li.data("snipped-id")](self.parent, self.$target, $li.data("snipped-id"))
+                            .drop_and_build_snippet(self.$target);
+                    }
+                    
+                    $li.toggleClass("active");
+                })
+                .on('mouseover', function (event) {
+                    self.$target.removeClass(self.$overlay.find('.oe_options li.oe_style.active').data('class') || "");
+                    self.$target.addClass($(event.currentTarget).parent().data('class') || "");
+                })
+                .on('mouseout', function (event) {
+                    self.$target.removeClass($(event.currentTarget).parent().data('class') || "");
+                    self.$target.addClass(self.$overlay.find('.oe_options li.oe_style.active').data('class') || "");
+                });
         },
 
         get_parent_block: function () {
 
         set_options_background: function (bg, ul_options) {
             var $ul = this.$editor.find(ul_options);
-            var bg_value = (typeof bg === 'string' ? this.$target.find(bg) : $(bg)).css("background-image").replace(/url\(['"]*|['"]*\)/g, "");
+            var bg_value = (typeof bg === 'string' ? this.$target.find(bg) : $(bg)).css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
 
             // select in ul options
             $ul.find("li").removeClass("active");
         }
     });
 
+    website.snippet.editorRegistry.custom_background = website.snippet.Editor.extend({
+        drop_and_build_snippet: function() {
+            var self = this;
+            var active = this.$target.hasClass(this.$el.data("class"));
+            if (active) {
+                var bg_value = this.$target.css("background-image").replace(/url\(['"]*|['"]*\)|^none$/g, "");
+                var editor = new website.editor.ImageDialog();
+                editor.on('start', self, function (o) {o.url = bg_value;});
+                editor.on('save', self, function (o) {
+                    self.$target.css("background-image", "url(" + o.url + ")");
+                });
+                editor.on('cancel', self, function () {
+                    if (bg_value === "") {
+                        self.$target.data("snippetStyles").find(".oe_style").filter(function () {
+                            return $(this).data('snipped-id') === 'custom_background';
+                        }).removeClass('active');
+                        self.$target.removeClass(self.$el.data("class"));
+                    }
+                });
+                editor.appendTo($('body'));
+            } else {
+                this.$target.css("background-image", "");
+            }
+        }
+    });
+
     /*
     * data-snippet-id automatically setted
     * Don't need to add data-snippet-id="..." into the views
index 1003ec8..af417a5 100644 (file)
             <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 dark mt16 mb16">
+        <section class="oe_snippet_body oe_dark mt16 mb16">
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center mt32 mb32">
             <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 dark">
+        <section class="oe_snippet_body oe_snippet_darken oe_dark">
             <div class="container">
               <div class="row">
                 <div class="col-md-12 text-center mt16 mb16">
 </div>
 
 <div id="snippet_styles" class="hidden">
-
-    <div data-snippet-id='darken' data-selector='section'>
-        <div class='oe_snippet_label'>Enlight Background</div>
-        <div class='oe_snippet_class'>dark</div>
+    <div data-snippet-id='darken' data-selector='section' data-class="oe_dark">
+        <div class='oe_snippet_label'>Darken</div>
+        <div class='oe_snippet_group'>Background</div>
+    </div>
+    <div data-snippet-id='green' data-selector='section' data-class="oe_green">
+        <div class='oe_snippet_label'>Green</div>
+        <div class='oe_snippet_group'>Background</div>
+    </div>
+    <div data-snippet-id='red' data-selector='section' data-class="oe_red">
+        <div class='oe_snippet_label'>Red</div>
+        <div class='oe_snippet_group'>Background</div>
+    </div>
+    <div data-snippet-id='black' data-selector='section' data-class="oe_black">
+        <div class='oe_snippet_label'>Black</div>
+        <div class='oe_snippet_group'>Background</div>
+    </div>
+    <div data-snippet-id='custom_background' data-selector='section' data-class="oe_custom_bg">
+        <div class='oe_snippet_label'>Custom Picture...</div>
+        <div class='oe_snippet_group'>Background</div>
     </div>
-
 </div>
 
     </div>
index 41f272c..13687fd 100644 (file)
@@ -73,7 +73,7 @@
                 </div>
             </div>
         </section>
-        <section class="dark mt16 mb16" data-snippet-id='big-picture'>
+        <section class="oe_dark mt16 mb16" data-snippet-id='big-picture'>
             <div class="container">
                 <div class="row">
                     <div class="col-md-12 text-center mt32 mb32">
index 35654f0..4da5b93 100644 (file)
 </div>
 
 
-<div class="container dark">
+<div class="container oe_dark">
 <div class="row">
 <div class="col-md-12" data-snippet-id="colmd">
 <h1 class="text-center">A great content...</h1>
 </div>
 
 
-<div class="container dark">
+<div class="container oe_dark">
 <div class="row">
 <div class="col-md-12" data-snippet-id="colmd">
 <h1 class="text-center">A great content...</h1>
 </div>
 
 
-<div class="container dark">
+<div class="container oe_dark">
 <div class="row">
 <div class="col-md-12" data-snippet-id="colmd">
 <h1 class="text-center">A great content...</h1>
index e2a64d5..c65d4a0 100644 (file)
@@ -5,7 +5,7 @@
     <record id="hr.job_marketing" model="hr.job">
         <field name="website_published">True</field>
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 dark">
+<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
     <record id="hr.job_developer" model="hr.job">
         <field name="website_published">True</field>
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 dark">
+<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
     <record id="hr.job_consultant" model="hr.job">
         <field name="website_published">True</field>
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 dark">
+<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
 
     <record id="hr.job_ceo" model="hr.job">
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 dark">
+<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
 
     <record id="hr.job_cto" model="hr.job">
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 dark">
+<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
 
     <record id="hr.job_trainee" model="hr.job">
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 dark">
+<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
 
     <record id="hr.job_hrm" model="hr.job">
         <field name="website_description" type="html">
-<section data-snippet-id="text-block" class="mt16 mb16 dark">
+<section data-snippet-id="text-block" class="mt16 mb16 oe_dark">
     <div class="container">
         <div class="row">
             <div class="col-md-offset-1 col-md-10 mb16 mt16">
index 03b0454..aee5995 100644 (file)
@@ -86,7 +86,7 @@
                     </div>
 
                     <div class="oe_structure">
-                        <section data-snippet-id="cta" class="darken">
+                        <section data-snippet-id="cta" class="oe_dark">
                             <div class="container">
                                 <div class="row">
                                     <div class="col-md-12 text-center mt16 mb16">
                                 we will get back to you soon.
                             </p>
                         </div>
-                        <section data-snippet-id="cta" class="darken">
+                        <section data-snippet-id="cta" class="oe_dark">
                             <div class="container">
                                 <div class="row">
                                     <div class="col-md-12 text-center mt16 mb16">
index ef47ae7..981d66a 100644 (file)
@@ -13,7 +13,7 @@
             <field name="website_sequence">5</field>
             <field name="website_style_ids" eval="[(6,0,[ref('website_sale.image_full')])]"/>
             <field name="website_description" type="html">
-                <section data-snippet-id="text-image" class="mt16 mb16 dark">
+                <section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt64">
@@ -97,7 +97,7 @@
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="text-image" class="mt16 mb16 dark">
+                <section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt16">
@@ -175,7 +175,7 @@ Ultrafast wireless
 iOS7
             </field>
             <field name="website_description" type="html">
-                <section data-snippet-id="text-image" class="mt16 mb16 dark">
+                <section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt64">
@@ -213,7 +213,7 @@ iOS7
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="text-image" class="mb16 dark">
+                <section data-snippet-id="text-image" class="mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt32">
@@ -251,7 +251,7 @@ iOS7
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="text-image" class="mt16 mb16 dark">
+                <section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt64">
@@ -358,7 +358,7 @@ Weight: 0.4 ounce
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="text-image" class="mb16 dark">
+                <section data-snippet-id="text-image" class="mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="text-center col-md-8 col-md-offset-2 mt16">
@@ -450,7 +450,7 @@ Weight: 1.1 ounces</field>
                         </div>
                     </div>
                 </section>
-                <section data-snippet-id="text-image" class="mt16 mb16 dark">
+                <section data-snippet-id="text-image" class="mt16 mb16 oe_dark">
                     <div class="container">
                         <div class="row">
                             <div class="col-md-5 col-md-offset-1 mt64">