[IMP] website_blog : onboarding. The cover image of a blog post is editable (opacity, color, size, ...). Add a new tour, views improvements and new default images

24 files changed, 497 insertions, 239 deletions

diff --git a/addons/website/data/data.xml b/addons/website/data/data.xml
index 97342561caf..578f6992c89 100644
--- a/addons/website/data/data.xml
+++ b/addons/website/data/data.xml
@@ -106,14 +106,6 @@
         </record>
 
         <record model="ir.attachment">
-            <field name="name">business_hands</field>
-            <field name="datas_fname">business_hands.jpg</field>
-            <field name="res_model">ir.ui.view</field>
-            <field name="type">url</field>
-            <field name="url">/website/static/src/img/library/business_hands.jpg</field>
-        </record>
-
-        <record model="ir.attachment">
             <field name="name">business_stats</field>
             <field name="datas_fname">business_stats.jpg</field>
             <field name="res_model">ir.ui.view</field>
@@ -122,22 +114,6 @@
         </record>
 
         <record model="ir.attachment">
-            <field name="name">engineer</field>
-            <field name="datas_fname">engineer.jpg</field>
-            <field name="res_model">ir.ui.view</field>
-            <field name="type">url</field>
-            <field name="url">/website/static/src/img/library/engineer.jpg</field>
-        </record>
-
-        <record model="ir.attachment">
-            <field name="name">flight</field>
-            <field name="datas_fname">flight.jpg</field>
-            <field name="res_model">ir.ui.view</field>
-            <field name="type">url</field>
-            <field name="url">/website/static/src/img/library/flight.jpg</field>
-        </record>
-
-        <record model="ir.attachment">
             <field name="name">gears</field>
             <field name="datas_fname">gears.png</field>
             <field name="res_model">ir.ui.view</field>
@@ -186,11 +162,19 @@
         </record>
 
         <record model="ir.attachment">
-            <field name="name">school_kids</field>
-            <field name="datas_fname">school_kids.jpg</field>
+            <field name="name">world</field>
+            <field name="datas_fname">world.jpg</field>
             <field name="res_model">ir.ui.view</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/library/school_kids.jpg</field>
+            <field name="url">/website/static/src/img/library/world.jpg</field>
+        </record>
+
+        <record model="ir.attachment">
+            <field name="name">vegetables</field>
+            <field name="datas_fname">vegetables.png</field>
+            <field name="res_model">ir.ui.view</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/library/vegetables.png</field>
         </record>
 
         <record model="ir.attachment">
@@ -202,19 +186,35 @@
         </record>
 
         <record model="ir.attachment">
-            <field name="name">vegetables</field>
-            <field name="datas_fname">vegetables.png</field>
+            <field name="name">flight</field>
+            <field name="datas_fname">flight.jpg</field>
             <field name="res_model">ir.ui.view</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/library/vegetables.png</field>
+            <field name="url">/website/static/src/img/library/flight.jpg</field>
         </record>
 
         <record model="ir.attachment">
-            <field name="name">world</field>
-            <field name="datas_fname">world.jpg</field>
+            <field name="name">engineer</field>
+            <field name="datas_fname">engineer.jpg</field>
             <field name="res_model">ir.ui.view</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/library/world.jpg</field>
+            <field name="url">/website/static/src/img/library/engineer.jpg</field>
+        </record>
+
+        <record model="ir.attachment">
+            <field name="name">school_kids</field>
+            <field name="datas_fname">school_kids.jpg</field>
+            <field name="res_model">ir.ui.view</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/library/school_kids.jpg</field>
+        </record>
+
+        <record model="ir.attachment">
+            <field name="name">business_hands</field>
+            <field name="datas_fname">business_hands.jpg</field>
+            <field name="res_model">ir.ui.view</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/library/business_hands.jpg</field>
         </record>
 
     </data>
diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 8ec49889863..f1d77acdc0d 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -85,7 +85,11 @@
 .editor_enable [data-oe-readonly]:hover {
   cursor: default;
 }
-
+/* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */
+.o_editable[placeholder]:empty:not(:focus):before {
+    content: attr(placeholder);
+    opacity: 0.3;
+}
 /* Prevent the text contents of draggable elements from being selectable. */
 [draggable] {
   -moz-user-select: none;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 9110b4454cd..73c000f737a 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -78,6 +78,10 @@
     cursor: default
 
 // }}}
+/* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */
+.o_editable[placeholder]:empty:not(:focus):before
+    content: attr(placeholder)
+    opacity: 0.3
 
 /* Prevent the text contents of draggable elements from being selectable. */
 [draggable]
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 473ea32f268..faba9afc267 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -768,6 +768,18 @@ div.carousel div.carousel-content {
   color: #ddd;
 }
 
+.oe_none {
+  background-color: #FFFFFF;
+}
+
+.oe_yellow {
+  background-color: #A2A51B;
+}
+
+.oe_green {
+  background-color: #149F2C;
+}
+
 /* Misc */
 .texttop {
   vertical-align: top;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 85259178e15..45215c1cb3e 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -603,6 +603,15 @@ div.carousel
     .text-muted
         color: #ddd
 
+.oe_none
+  background-color: #FFFFFF
+
+.oe_yellow
+  background-color: #A2A51B
+
+.oe_green
+  background-color: #149F2C
+
 /* Misc */
 
 .texttop
diff --git a/addons/website/static/src/js/website.contentMenu.js b/addons/website/static/src/js/website.contentMenu.js
index ab85c061a12..bb91540b0b4 100644
--- a/addons/website/static/src/js/website.contentMenu.js
+++ b/addons/website/static/src/js/website.contentMenu.js
@@ -12,7 +12,10 @@
             self.$el.on('click', 'a[data-action]', function(ev) {
                 ev.preventDefault();
                 var $content_item = $(this);
-                self[$content_item.data('action')]();
+                var data_action = self[$content_item.data('action')];
+                if (data_action) {
+                    data_action();
+                }
             });
             return this._super();
         },
diff --git a/addons/website_blog/controllers/main.py b/addons/website_blog/controllers/main.py
index ddf899d90dd..68c99e24826 100644
--- a/addons/website_blog/controllers/main.py
+++ b/addons/website_blog/controllers/main.py
@@ -1,6 +1,7 @@
 # -*- coding: utf-8 -*-
 
 import datetime
+import json
 import urllib
 import werkzeug
 
@@ -225,10 +226,12 @@ class WebsiteBlog(http.Controller):
             'tag': tag,
             'blog': blog,
             'blog_post': blog_post,
+            'blog_post_cover_properties': json.loads(blog_post.cover_properties),
             'main_object': blog_post,
             'nav_list': self.nav_list(blog),
             'enable_editor': enable_editor,
             'next_post': next_post,
+            'next_post_cover_properties': json.loads(next_post.cover_properties) if next_post else {},
             'date': date_begin,
             'blog_url': blog_url,
             'pager': pager,
@@ -314,9 +317,6 @@ class WebsiteBlog(http.Controller):
         cr, uid, context = request.cr, request.uid, request.context
         new_blog_post_id = request.registry['blog.post'].create(cr, uid, {
             'blog_id': blog_id,
-            'name': _("Blog Post Title"),
-            'subtitle': _("Subtitle"),
-            'content': '',
             'website_published': False,
         }, context=context)
         new_blog_post = request.registry['blog.post'].browse(cr, uid, new_blog_post_id, context=context)
@@ -360,10 +360,10 @@ class WebsiteBlog(http.Controller):
         return ret
 
     @http.route('/blog/post_change_background', type='json', auth="public", website=True)
-    def change_bg(self, post_id=0, image=None, **post):
+    def change_bg(self, post_id=0, cover_properties={}, **post):
         if not post_id:
             return False
-        return request.registry['blog.post'].write(request.cr, request.uid, [int(post_id)], {'background_image': image}, request.context)
+        return request.registry['blog.post'].write(request.cr, request.uid, [int(post_id)], {'cover_properties': cover_properties}, request.context)
 
     @http.route('/blog/get_user/', type='json', auth="public", website=True)
     def get_user(self, **post):
diff --git a/addons/website_blog/data/website_blog_data.xml b/addons/website_blog/data/website_blog_data.xml
index a4bc8778bec..457110a8981 100644
--- a/addons/website_blog/data/website_blog_data.xml
+++ b/addons/website_blog/data/website_blog_data.xml
@@ -2,17 +2,59 @@
 <openerp>
     <data noupdate="1">
         <record id="blog_blog_1" model="blog.blog">
-            <field name="name">Our News</field>
-            <field name="subtitle">Sharing our evolution with passion</field>
+            <field name="name">Our Blog</field>
+            <field name="subtitle">Get in touch with us</field>
         </record>
-
         <record id="menu_news" model="website.menu">
-            <field name="name">News</field>
+            <field name="name">Blog</field>
             <field name="url" eval="'/blog/'+str(ref('website_blog.blog_blog_1'))"/>
             <field name="parent_id" ref="website.main_menu"/>
             <field name="sequence" type="int">40</field>
             <field name="website_id" ref="website.default_website"/>
         </record>
+
+        <!-- Pre loaded covers -->
+
+        <record model="ir.attachment">
+            <field name="name">Chain</field>
+            <field name="datas_fname">chain.jpg</field>
+            <field name="res_model">ir.ui.view</field>
+            <field name="type">url</field>
+            <field name="url">/website_blog/static/src/img/library/chain.jpg</field>
+        </record>
+
+        <record model="ir.attachment">
+            <field name="name">Wood Wall Texture</field>
+            <field name="datas_fname">woodtexture.jpg</field>
+            <field name="res_model">ir.ui.view</field>
+            <field name="type">url</field>
+            <field name="url">/website_blog/static/src/img/library/woodtexture.jpg</field>
+        </record>
+
+        <record model="ir.attachment">
+            <field name="name">Gauze Green Texture</field>
+            <field name="datas_fname">gauze-green-texture.jpg</field>
+            <field name="res_model">ir.ui.view</field>
+            <field name="type">url</field>
+            <field name="url">/website_blog/static/src/img/library/gauze-green-texture.jpg</field>
+        </record>
+
+        <record model="ir.attachment">
+            <field name="name">Special Flower Texture</field>
+            <field name="datas_fname">flower_texture.jpg</field>
+            <field name="res_model">ir.ui.view</field>
+            <field name="type">url</field>
+            <field name="url">/website_blog/static/src/img/library/flower_texture.jpg</field>
+        </record>
+
+        <record model="ir.attachment">
+            <field name="name">Sad Danbo</field>
+            <field name="datas_fname">sad_danbo.jpg</field>
+            <field name="res_model">ir.ui.view</field>
+            <field name="type">url</field>
+            <field name="url">/website_blog/static/src/img/library/sad_danbo.jpg</field>
+        </record>
+
     </data>
 
     <data>
diff --git a/addons/website_blog/data/website_blog_demo.xml b/addons/website_blog/data/website_blog_demo.xml
index 838d8d5a1ce..6b24cf1a9a2 100644
--- a/addons/website_blog/data/website_blog_demo.xml
+++ b/addons/website_blog/data/website_blog_demo.xml
@@ -20,9 +20,11 @@
             <field name="website_published" eval="True"/>
             <field name="website_meta_keywords">Odoo, email</field>
             <field name="website_meta_description">The Future of Emails</field>
-            <field name="background_image">/website_blog/static/src/img/post1.jpg</field>
+            <field name="cover_properties">{"background-image": "url(/website_blog/static/src/img/library/flower_texture.jpg)", "background-color": "oe_yellow" ,"opacity": "1.0", "resize_class": "cover container cover_narrow"}</field>
             <field name="content"><![CDATA[
+    <div class="container">
         <section class="mt16 mb16 readable">
+            <iframe width="100%" height="250" src="http://www.youtube.com/embed/EkbBFmIWoTE" frameborder="0" allowfullscreen></iframe>
             <p>
                 Emails are broken.
             </p><p>
@@ -110,6 +112,7 @@
                 </li>
             </ul>
         </section>
+    </div>
 ]]>
 </field>
         </record>
@@ -120,22 +123,20 @@
             <field name="blog_id" ref="blog_blog_1"/>
             <field name="website_published" eval="True"/>
             <field name="tag_ids" eval="[(6, 0, [ref('blog_tag_1'), ref('blog_tag_2')])]"/>
-            <field name="background_image">/website_blog/static/src/img/post2.jpg</field>
+            <field name="cover_properties">{"background-image": "url(/website/static/src/img/library/ship_sea.jpg)", "background-color": "oe_green" ,"opacity": "0.8", "resize_class": "cover cover_full"}</field>
             <field name="content">
-<![CDATA[<section class="row readable">
-            <div class="col-md-12 mb32">
-                <img class="img-responsive" src="/website_blog/static/src/img/CMS_WMS_screens.jpg"/>
-            </div>
-            <div class="col-md-6 col-md-offset-3 mb16 mt16">
-                <p class="text-center">
-                    New Features Launched
-                </p>
-                <p class="text-center">
-                    To add to an already comprehensive set of Odoo
+<![CDATA[<section><div class="container">
+            <div class="row">
+                <div class="col-md-6 mt16"><img class="img img-responsive mb16" src="/website_blog/static/src/img/CMS_WMS_screens.jpg" style=""></div>
+
+                <div class="col-md-6 mt16">
+                    <h3>New Features Launched</h3>
+
+                    <p data-chatter-id="counter_0/section/div/div/div">To add to an already comprehensive set of Odoo
                     features, a website content management system (CMS
                     or WMS) has been developed and a beta release is
-                    available from today, 31st January 2014.
-                </p>
+                    available from today, 31st January 2014.</p>
+                </div>
             </div>
         </section>
         <section class="readable">
diff --git a/addons/website_blog/models/website_blog.py b/addons/website_blog/models/website_blog.py
index b63a77ac5ac..96ce3746d85 100644
--- a/addons/website_blog/models/website_blog.py
+++ b/addons/website_blog/models/website_blog.py
@@ -81,11 +81,18 @@ class BlogPost(osv.Model):
             res[blog_post.id] = blog_post.visits * (0.5+random.random()) / max(3, age.days)
         return res
 
+    def _default_content(self, cr, uid, context=None):
+        return '''  <div class="container">
+                        <section class="mt16 mb16">
+                            <p class="o_default_snippet_text">''' + _("Start writing here...") + '''</p>
+                        </section>
+                    </div> '''
+
     _columns = {
         'name': fields.char('Title', required=True, translate=True),
         'subtitle': fields.char('Sub Title', translate=True),
         'author_id': fields.many2one('res.partner', 'Author'),
-        'background_image': fields.binary('Background Image', oldname='content_image'),
+        'cover_properties': fields.text('Cover Properties'),
         'blog_id': fields.many2one(
             'blog.blog', 'Blog',
             required=True, ondelete='cascade',
@@ -127,8 +134,9 @@ class BlogPost(osv.Model):
     }
 
     _defaults = {
-        'name': _('Blog Post Title'),
-        'subtitle': _('Subtitle'),
+        'name': '',
+        'content': _default_content,
+        'cover_properties': '{"background-image": "none", "background-color": "oe_none", "opacity": "0.6", "resize_class": ""}',
         'author_id': lambda self, cr, uid, ctx=None: self.pool['res.users'].browse(cr, uid, uid, context=ctx).partner_id.id,
     }
 
@@ -163,7 +171,7 @@ class BlogPost(osv.Model):
 
             old_attribute = node.get(attribute)
             new_attribute = old_attribute
-            if old_attribute in existing_attributes:
+            if not new_attribute or (old_attribute in existing_attributes):
                 if ancestor_tags:
                     ancestor_tags.pop()
                 counter = random.randint(10000, 99999)
diff --git a/addons/website_blog/static/src/css/website_blog.css b/addons/website_blog/static/src/css/website_blog.css
index a5de001e013..ffbab0908f2 100644
--- a/addons/website_blog/static/src/css/website_blog.css
+++ b/addons/website_blog/static/src/css/website_blog.css
@@ -15,6 +15,9 @@
   margin-right: auto;
 }
 
+.blog_content {
+  min-height: 350px !important;
+}
 .blog_content a.oe_mail_expand:after {
   content: " →";
 }
@@ -32,43 +35,50 @@ div#blog_angle_down a:hover {
 }
 
 .cover {
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-color: #546579;
   color: white;
   position: relative;
 }
 .cover .blog_title {
   position: absolute;
+}
+.blog_title {
   text-align: center;
+  margin-right: auto;
+  margin-left: auto;
   top: 20%;
   left: 0;
   right: 0;
 }
-.cover .blog_title h1 {
+.blog_title h1{
   font-weight: bold;
 }
 
-.cover_footer {
+.cover_full {
+  height: 100vh;
+}
+.cover_narrow {
+  height: 50vh;
+}
+.cover_footer_bg {
   min-height: 350px;
   height: 65vh;
-  cursor: pointer;
 }
 
 /* mobile preview: for blog h1,h2 font-size and cover-footer height of image overlapas */
 @media (max-width: 768px) {
-  .cover h1 {
+  .blog_title h1 {
     font-size: 26px;
   }
-  .cover h2 {
+  .blog_title h2 {
     font-size: 20px;
   }
-
-  .cover_footer {
+  .cover_narrow {
+    height: 65vh;
+  }
+  #title .blog_title {
+    top: 10%;
+  }
+  .cover_footer_bg {
     min-height: 280px;
     height: 50vh;
   }
@@ -164,10 +174,29 @@ div#blog_angle_down a:hover {
   font-weight: normal;
 }
 
-mark + .popover {
+mark + .popover, .cover_footer{
   cursor: pointer;
 }
 
 .discussion_scroll_post {
   overflow-x: auto;
 }
+
+.blog_publish_btn {
+  padding-top: 16px;
+}
+
+.cover_footer_bg[style*="background-image: none;"] {
+  background-color: #B8B8B8;
+}
+
+#js_blogcover {
+  background-blend-mode: multiply;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 100%;
+}
diff --git a/addons/website_blog/static/src/css/website_blog.sass b/addons/website_blog/static/src/css/website_blog.sass
index e29995ad9b4..b090ef55fe5 100644
--- a/addons/website_blog/static/src/css/website_blog.sass
+++ b/addons/website_blog/static/src/css/website_blog.sass
@@ -15,6 +15,7 @@
     margin-right: auto
 
 .blog_content
+    min-height: 350px !important
     a.oe_mail_expand:after
         content: " →"
     a.oe_mail_expand
@@ -29,39 +30,53 @@ div#blog_angle_down
         text-decoration: none
 
 .cover
-    -webkit-background-size: cover
-    -moz-background-size: cover
-    -o-background-size: cover
-    background-size: cover
-    background-position: center
-    background-repeat: no-repeat
-    background-color: #546579
-    color: #fff
+    color: white
     position: relative
     .blog_title
         position: absolute
+
+.blog_title
         text-align: center
         top: 20%
+        margin-right: auto
+        margin-left: auto
         left: 0
         right: 0
         h1
             font-weight: bold
 
-.cover_footer
-    min-height : 350px
+.cover_full
+    height: 100vh
+
+.cover_narrow
+    height: 50vh
+
+.cover_footer_bg
+    min-height: 350px
     height: 65vh
-    cursor: pointer
 
 /* mobile preview: for blog h1,h2 font-size and cover-footer height of image overlapas */
 @media (max-width: 768px)
-    .cover
+    .blog_title
         h1
             font-size: 26px
+
+    .blog_title
         h2
             font-size: 20px
+
+    .cover_narrow
+        height: 65vh
+
+    #title
+        .blog_title
+            top: 10%
+
     .cover_footer
         min-height: 280px
         height: 50vh
+
+    .cover_footer
         .blog_title
             top: 2%
 
@@ -145,8 +160,24 @@ div#blog_angle_down
     overflow: auto
     font-weight: normal
 
-mark + .popover
+mark + .popover, .cover_footer
     cursor: pointer
 
 .discussion_scroll_post
     overflow-x: auto
+
+.blog_publish_btn
+    padding-top: 16px
+
+.cover_footer_bg[style*="background-image: none;"]
+  background-color: #B8B8B8
+
+#js_blogcover
+    background-blend-mode: multiply
+    -webkit-background-size: cover
+    -moz-background-size: cover
+    -o-background-size: cover
+    background-size: cover
+    background-position: center
+    background-repeat: no-repeat
+    height: 100%
diff --git a/addons/website_blog/static/src/img/library/chain.jpg b/addons/website_blog/static/src/img/library/chain.jpg
new file mode 100644
index 00000000000..194937e94e3
--- /dev/null
+++ b/addons/website_blog/static/src/img/library/chain.jpg
diff --git a/addons/website_blog/static/src/img/library/flower_texture.jpg b/addons/website_blog/static/src/img/library/flower_texture.jpg
new file mode 100644
index 00000000000..d1e5ce2123f
--- /dev/null
+++ b/addons/website_blog/static/src/img/library/flower_texture.jpg
diff --git a/addons/website_blog/static/src/img/library/gauze-green-texture.jpg b/addons/website_blog/static/src/img/library/gauze-green-texture.jpg
new file mode 100644
index 00000000000..2a0db5157f9
--- /dev/null
+++ b/addons/website_blog/static/src/img/library/gauze-green-texture.jpg
diff --git a/addons/website_blog/static/src/img/library/sad_danbo.jpg b/addons/website_blog/static/src/img/library/sad_danbo.jpg
new file mode 100644
index 00000000000..85959accbd9
--- /dev/null
+++ b/addons/website_blog/static/src/img/library/sad_danbo.jpg
diff --git a/addons/website_blog/static/src/img/library/woodtexture.jpg b/addons/website_blog/static/src/img/library/woodtexture.jpg
new file mode 100644
index 00000000000..7001a64f14b
--- /dev/null
+++ b/addons/website_blog/static/src/img/library/woodtexture.jpg
diff --git a/addons/website_blog/static/src/js/website.tour.blog.js b/addons/website_blog/static/src/js/website.tour.blog.js
index f6ebfd7f21c..2e46b99c43e 100644
--- a/addons/website_blog/static/src/js/website.tour.blog.js
+++ b/addons/website_blog/static/src/js/website.tour.blog.js
@@ -28,12 +28,6 @@
                 popover:   { fixed: true },
             },
             {
-                element:   '.modal-dialog:has(#editor_new_blog) button.btn-primary',
-                placement: 'right',
-                title:     _t("Create Blog Post"),
-                content:   _t("Click <em>Continue</em> to create the blog post."),
-            },
-            {
                 waitFor:   '#o_scroll .oe_snippet',
                 title:     _t("Blog Post Created"),
                 content:   _t("This is your new blog post. Let's edit it."),
@@ -41,51 +35,87 @@
             },
             {
                 element:   'h1[data-oe-expression="blog_post.name"]',
-                placement: 'bottom',
-                sampleText: 'New Blog',
-                title:     _t("Set a Title"),
-                content:   _t("Click on this area and set a catchy title for your blog post."),
+                placement: 'top',
+                title:     _t("Post Headline"),
+                sampleText:'Blog Post Title',
+                content:   _t("Write a title, the subtitle is optional."),
+                popover:   { fixed: true },
             },
             {
-                waitNot:   '#wrap h1[data-oe-model="blog.post"]:contains("Blog Post Title")',
-                snippet:   '#snippet_structure .oe_snippet:eq(2)',
-                placement: 'bottom',
-                title:     _t("Drag & Drop a Block"),
-                content:   _t("Drag this block and drop it in your page."),
+                waitNot:   '#wrap h1[data-oe-expression="blog_post.name"]:'+'containsExact("")',
+                element:   '#oe_manipulators .oe_overlay.oe_active a.btn.btn-primary.btn-sm',
+                placement: 'left',
+                title:     _t("Customize Cover"),
+                content:   _t("Change and customize your blog post cover"),
                 popover:   { fixed: true },
             },
             {
-                snippet:   '#snippet_structure .oe_snippet:eq(4)',
-                placement: 'bottom',
-                title:     _t("Drag & Drop a block"),
-                content:   _t("Drag this block and drop it below the image block."),
+                element:   'a:'+ 'containsExact(' + _t("Change Cover")+ '):eq(1)',
+                placement: 'left',
+                title:     _t("Cover"),
+                content:   _t("Select this menu item to change blog cover."),
+                popover:   { fixed: true },
+            },
+            {
+                waitFor:   '.modal:has(.existing-attachment-cell:nth(1))',
+                element:   '.modal .existing-attachment-cell:nth(1) img',
+                placement: 'top',
+                title:     _t("Choose an image"),
+                content:   _t("Choose an image from the library."),
+                popover:   { fixed: true },
+            },
+            {
+                waitFor:   '.existing-attachment-cell.media_selected',
+                element:   '.modal-content button.save',
+                placement: 'top',
+                title:     _t("Save"),
+                content:   _t("Click on '<em>Save</em>' to set the picture as cover."),
                 popover:   { fixed: true },
             },
             {
-                element:   '.oe_active .oe_snippet_remove',
+                waitNot:   '.modal-content:visible',
+                element:   '.blog_content section.mt16',
                 placement: 'top',
-                title:     _t("Delete the block"),
-                content:   _t("From this toolbar you can move, duplicate or delete the selected zone. Click on the garbage can image to delete the block. Or click on the Title and delete it."),
+                title:     _t("Content"),
+                content:   _t("Start writing your story here. Click on save in the upper left corner when you are done."),
+                sampleText: ' ',
+                popover:   { fixed: true },
             },
             {
-                waitNot:   '.oe_active .oe_snippet_remove:visible',
+                waitNot:   '.blog_content section.mt16 p:'+'containsExact('+_t('Start writing here...')+')',
                 element:   'button[data-action=save]',
                 placement: 'right',
                 title:     _t("Save Your Blog"),
-                content:   _t("Click the <em>Save</em> button to record changes on the page."),
+                content:   _t("Click on '<em>Save</em>' button to record changes on the page."),
                 popover:   { fixed: true },
             },
             {
-                waitFor:   '#website-top-edit:hidden',
-                element:   'button.btn-danger.js_publish_btn',
+                waitFor:   'button[data-action=save]:not(:visible)',
+                element:   'a[data-action=show-mobile-preview]',
                 placement: 'bottom',
-                title:     _t("Publish Your Post"),
-                content:   _t("Your blog post is not yet published. You can update this draft version and publish it once you are ready."),
+                title:     _t("Mobile Preview"),
+                content:   _t("Click on the mobile icon to preview how your blog post will be displayed on a mobile device."),
+                popover:   { fixed: true },
+            },
+            {
+                element:   '.modal:has(#mobile-viewport) button[data-dismiss=modal]',
+                placement: 'right',
+                title:     _t("Check Mobile Preview"),
+                content:   _t("Scroll to check rendering and then close the mobile preview."),
+                popover:   { fixed: true },
+            },
+            {
+                waitFor:   '.modal:has(#mobile-viewport) button[data-dismiss=modal]:not(:visible)',
+                element:   'button.btn-danger.js_publish_btn',
+                placement: 'top',
+                title:     _t("Publishing status"),
+                content:   _t(" Click on this button to send your blog post online."),
+                popover:   { fixed: true },
             },
             {
                 waitFor:   '.js_publish_management button.js_publish_btn.btn-success:visible',
                 title:     "Thanks!",
-                content:   _t("This tutorial is finished. To discover more features, improve the content of this page and try the <em>Promote</em> button in the top right menu."),
+                content:   _t("This tutorial is over. To discover more features and improve the content of this page, go to the upper right customize menu. You can also add some cool content with your text by clicking on 'Insert Blocks' in the edit mode."),
                 popover:   { next: _t("Close Tutorial") },
             },
         ]
diff --git a/addons/website_blog/static/src/js/website_blog.editor.js b/addons/website_blog/static/src/js/website_blog.editor.js
index b173a7fa35a..af14bc2f5ea 100644
--- a/addons/website_blog/static/src/js/website_blog.editor.js
+++ b/addons/website_blog/static/src/js/website_blog.editor.js
@@ -5,17 +5,23 @@
     var _t = openerp._t;
 
     website.EditorBarContent.include({
-        new_blog_post: function() {
-            website.prompt({
-                id: "editor_new_blog",
-                window_title: _t("New Blog Post"),
-                select: "Select Blog",
-                init: function (field) {
-                    return website.session.model('blog.blog')
-                            .call('name_search', [], { context: website.get_context() });
-                },
-            }).then(function (cat_id) {
-                document.location = '/blog/' + cat_id + '/post/new';
+        new_blog_post: function () {
+            website.session.model('blog.blog').call('name_search', [], { context: website.get_context() })
+            .then(function (blog_ids) {
+                if (blog_ids.length == 1) {
+                    document.location = '/blog/' + blog_ids[0][0] + '/post/new';
+                } else if (blog_ids.length > 1) {
+                    website.prompt({
+                        id: "editor_new_blog",
+                        window_title: _t("New Blog Post"),
+                        select: "Select Blog",
+                        init: function (field) {
+                          return blog_ids;
+                        },
+                    }).then(function (blog_id) {
+                        document.location = '/blog/' + blog_id + '/post/new';
+                      });
+                }
             });
         },
     });
@@ -26,20 +32,32 @@
             edit: function () {
                 var self = this;
                 $('.popover').remove();
+                $('.cover_footer').off('click');
                 this._super();
-                var vHeight = $(window).height();
             },
-            save : function() {
-                var res = this._super();
-                if ($('.cover').length) {
+            save : function () {
+                var args = arguments;
+                var super_call = this._super;
+                var self = this;
+                if ($('#js_blogcover').length) {
+                    var properties = {
+                        "background-image": $('#js_blogcover').css("background-image").replace(/"/g, ''),
+                        "background-color": $('#js_blogcover').attr("class"),
+                        "opacity": $('#js_blogcover').css("opacity"),
+                        "resize_class": $('#title').attr('class'),
+                    };
                     openerp.jsonRpc("/blog/post_change_background", 'call', {
-                        'post_id' : $('#blog_post_name').attr('data-oe-id'),
-                        'image' : $('.cover').css('background-image').replace(/url\(|\)|"|'/g,''),
+                        'post_id' : $('h1[data-oe-expression="blog_post.name"]').attr('data-oe-id'),
+                        'cover_properties' : JSON.stringify(properties),
+                    }).always(function() {
+                        super_call.apply(self, args);
                     });
+                } else {
+                    super_call.apply(self, args);
                 }
-                return res;
             },
         });
+
         website.snippet.options.many2one.include({
             select_record: function (li) {
                 var self = this;
@@ -66,7 +84,8 @@
             clear : function(type, value, $li) {
                 if (type !== 'click') return;
                 this.src = null;
-                this.$target.css({"background-image": '', 'min-height': $(window).height()});
+                this.$target.find('#js_blogcover').css({"background-image": '', "opacity": "1.0"}).attr("class", "oe_none");
+                this.$target.attr("class", "");
                 this.$image.removeAttr("src");
             },
             change : function(type, value, $li) {
@@ -76,9 +95,33 @@
                 editor.appendTo('body');
                 editor.on('saved', self, function (event, img) {
                     var url = self.$image.attr('src');
-                    self.$target.css({"background-image": url ? 'url(' + url + ')' : "", 'min-height': $(window).height()});
+                    self.$target.find('#js_blogcover').css({"background-image": url ? 'url(' + url + ')' : ""});
+                    self.$target.attr("class","cover cover_full");
+                    this.$el.parent().find('.snippet-option-website_blog:not(li[data-change])').removeClass("hidden");
                 });
             },
+            cover_class : function(type, value, $li) {
+                this.$target.attr("class", (type === 'over' || type === 'click') ? value : this.class);
+            },
+            opacity : function(type, value, $li) {
+                this.$target.find('#js_blogcover').css("opacity", (type === 'over' || type === 'click') ? value : this.value);
+            },
+            bgcolor : function(type, value, $li) {
+                this.$target.find('#js_blogcover').attr("class", (type === 'over' || type === 'click') ? value : this.background);
+            },
+            set_active: function(){
+                this.background = this.$target.find('#js_blogcover').attr("class");
+                this.class = this.$target.attr('class');
+                this.value = this.$target.find('#js_blogcover').css('opacity');
+                if ( this.$target.hasClass("cover") ) {
+                    this.$el.parent().find('.snippet-option-website_blog:not(li[data-change])').removeClass("hidden");
+                } else {
+                    this.$el.parent().find('.snippet-option-website_blog:not(li[data-change])').addClass("hidden");
+                }
+                this.$el.find('li[data-bgcolor]').removeClass("active").siblings('[data-bgcolor="' + this.background + '"]').addClass("active");
+                this.$el.find('li[data-opacity]').removeClass("active").siblings('[data-opacity="' + parseFloat(this.value).toFixed(1) + '"]').addClass("active");
+                this.$el.find('li[data-cover_class]').removeClass("active").siblings('[data-cover_class="' + this.class + '"]').addClass("active");
+            }
         });
 
         openerp.define.active();
@@ -99,4 +142,4 @@
 
     });
 
-})();
\ No newline at end of file
+})();
diff --git a/addons/website_blog/static/src/js/website_blog.js b/addons/website_blog/static/src/js/website_blog.js
index c811677b799..283f83461ce 100644
--- a/addons/website_blog/static/src/js/website_blog.js
+++ b/addons/website_blog/static/src/js/website_blog.js
@@ -32,9 +32,8 @@ $(document).ready(function() {
             });
         }
 
-        $('.js_fullheight').css('min-height', $(window).height());
-        $(".js_tweet").share({'author_name':$('#blog_author').text()});
-        $('.cover_footer').on('click',page_transist);
+        $(".js_tweet").share({'author_name': $('#blog_author').text()});
+        $('.cover_footer').on('click', page_transist);
         $('a[href^="#blog_content"]').on('click', animate);
     }
 
diff --git a/addons/website_blog/views/snippets.xml b/addons/website_blog/views/snippets.xml
index 7b45d75d427..e7cddf5b9b5 100644
--- a/addons/website_blog/views/snippets.xml
+++ b/addons/website_blog/views/snippets.xml
@@ -5,11 +5,38 @@
 
     <xpath expr="//div[@id='snippet_options']" position="inside">
         <div data-js='website_blog'
-            data-selector=".js_blog #title.cover"
+            data-selector=".js_blog #title"
             data-no-check="true">
 
-          <li data-change="true"> <a href="#">Change Cover</a> </li>
-          <li data-clear="true"> <a href="#" >Clear Cover</a></li>
+            <li data-change="true"> <a href="#">Change Cover</a> </li>
+            <li class="dropdown-submenu">
+                <a href="#">Size</a>
+                <ul class="dropdown-menu">
+                    <li data-cover_class="cover cover_full"><a>Full Screen</a></li>
+                    <li data-cover_class="cover container cover_narrow"><a>Narrow</a></li>
+                </ul>
+            </li>
+            <li class="dropdown-submenu">
+                <a href="#">Color</a>
+                <ul class="dropdown-menu">
+                    <li data-bgcolor="oe_blue"><a>Blue</a></li>
+                    <li data-bgcolor="oe_yellow"><a>Yellow</a></li>
+                    <li data-bgcolor="oe_red"><a>Red</a></li>
+                    <li data-bgcolor="oe_purple"><a>Purple</a></li>
+                    <li data-bgcolor="oe_green"><a>Green</a></li>
+                    <li data-bgcolor="oe_none"><a>None</a></li>
+                </ul>
+            </li>
+            <li class="dropdown-submenu">
+                <a href="#">Opacity</a>
+                <ul class="dropdown-menu">
+                    <li data-opacity="1.0"><a>None</a></li>
+                    <li data-opacity="0.8"><a>Low</a></li>
+                    <li data-opacity="0.6"><a>Medium</a></li>
+                    <li data-opacity="0.4"><a>High</a></li>
+                </ul>
+            </li>
+            <li data-clear="true"> <a href="#" >No Cover</a></li>
         </div>
     </xpath>
 
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 0dc46173502..b4f6d14e3ee 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -133,36 +133,34 @@
                 </div>
 
                 <div t-foreach="blog_posts" t-as="blog_post" class="mb32">
-                  <span t-field="blog_post.author_avatar" class="o_not_editable" t-field-options='{"widget": "image", "class": "img-circle pull-right mt16 media-object"}' />
-                  <h2>
-                    <a t-attf-href="/blog/#{ slug(blog_post.blog_id) }/post/#{ slug(blog_post) }" t-field="blog_post.name" class="mb4"/>
-                  </h2>
-
-                  <div class="text-muted">
-                      <h4
-                        t-field="blog_post.subtitle"
-                        class="mb4 mt4"/>
-                    <div name='blog_post_data' class='mb0'>
-                         <span t-field="blog_post.author_id" style="display: inline-block;" t-field-options='{
+                    <t t-if="blog_post.author_avatar">
+                        <span t-field="blog_post.author_avatar" class="o_not_editable" t-field-options='{"widget": "image", "class": "img-circle pull-right mt16 media-object"}' />
+                    </t>
+                    <a t-attf-href="/blog/#{ slug(blog_post.blog_id) }/post/#{ slug(blog_post) }">
+                        <h2 t-field="blog_post.name" class="mb4"><t t-if="not blog_post.name">Untitled Post</t></h2>
+                    </a>
+                    <div class="text-muted">
+                            <h4 t-field="blog_post.subtitle" class="mb4 mt4"></h4>
+                        <div name='blog_post_data' class='mb0'>
+                            <span t-field="blog_post.author_id" style="display: inline-block;" t-field-options='{
                                 "widget": "contact",
                                 "fields": ["name"]
                             }'/>
-                        &#5760; <span t-field="blog_post.create_date" t-field-options='{"format": "MMMM yyyy"}'/>
-                        <span t-if="len(blog_post.message_ids) &gt; 0">
-                            &#5760; <t t-esc="len(blog_post.message_ids)"/>
-                            <t t-if="len(blog_post.message_ids) &lt;= 1" >comment</t>
-                            <t t-if="len(blog_post.message_ids) > 1">comments</t>
-                        </span>
-                        <span t-if="blog_post.visits &gt; 0">
-                            &#5760; <t t-esc="blog_post.visits"/>
-                            <t t-if="blog_post.visits &lt;= 1" >view</t>
-                            <t t-if="blog_post.visits > 1">views</t>
-                        </span>
+                            &#5760; <span t-field="blog_post.create_date" t-field-options='{"format": "MMMM yyyy"}'/>
+                            <span t-if="len(blog_post.message_ids) &gt; 0">
+                                &#5760; <t t-esc="len(blog_post.message_ids)"/>
+                                <t t-if="len(blog_post.message_ids) &lt;= 1" >comment</t>
+                                <t t-if="len(blog_post.message_ids) > 1">comments</t>
+                            </span>
+                            <span t-if="blog_post.visits &gt; 0">
+                                &#5760; <t t-esc="blog_post.visits"/>
+                                <t t-if="blog_post.visits &lt;= 1" >view</t>
+                                <t t-if="blog_post.visits > 1">views</t>
+                            </span>
 
-                        <span t-if="not blog_post.website_published" class="label label-danger">not published</span>
+                            <span t-if="not blog_post.website_published" class="label label-danger">not published</span>
+                        </div>
                     </div>
-                  </div>
-
                 </div>
               </div>
             </div>
@@ -187,74 +185,74 @@
 
 <!-- Blog Post Complete -->
 <template id="blog_post_complete" name="Blog Post">
-  <t t-call="website_blog.index">
-
-    <div class="cover js_fullheight" id="title" t-attf-style="min-height:600px; #{blog_post.background_image and ('background-image: url(%s)' % blog_post.background_image)}" t-ignore="True">
-        <div class="container">
-          <div class="container text-right mt16">
-            <div class="cover-storage oe_hidden"></div>
-            <t t-call="website.publish_management">
-                <t t-set="object" t-value="blog_post"/>
-                <t t-set="publish_edit" t-value="True"/>
-                <li>
-                    <form class="duplicate hidden" action="/blog/post_duplicate">
-                        <input name="blog_post_id" t-att-value="blog_post.id"/>
-                    </form>
-                    <a href="#" class="duplicate" onclick="$(this).prev('form').submit()">Duplicate</a>
-                </li>
-            </t>
-          </div>
-        </div>
-        <div class="blog_title">
-            <h1 t-field="blog_post.name" id="blog_post_name" t-att-data-blog-id="blog_post.id"/>
-            <h2 t-field="blog_post.subtitle"/>
-            <p class="post-meta text-muted text-center" name="blog_post_data"/>
-            <div>
-                <span t-field="blog_post.author_avatar" class="o_not_editable" t-field-options='{"widget": "image", "class": "img-circle", "style":"width: 30px; margin-right: 10px; display:inline"}' />
-                <span t-field="blog_post.author_id" style="display: inline-block;" t-field-options='{
-                    "widget": "contact",
-                    "fields": ["name"]
-                }'/>
+    <t t-call="website_blog.index">
+        <div t-attf-class="#{blog_post_cover_properties.get('resize_class', '')}" id="title"  t-ignore="True">
+            <div id="js_blogcover" t-attf-class="#{blog_post_cover_properties.get('background-color')}" t-attf-style="background-image: #{blog_post_cover_properties.get('background-image', 'none')};opacity:#{blog_post_cover_properties.get('opacity', 1)}">
+                <div class="container blog_publish_btn">
+                    <t t-call="website.publish_management">
+                        <t t-set="object" t-value="blog_post"/>
+                        <t t-set="publish_edit" t-value="True"/>
+                        <li>
+                            <form class="duplicate hidden" action="/blog/post_duplicate">
+                                <input name="blog_post_id" t-att-value="blog_post.id"/>
+                            </form>
+                            <a href="#" class="duplicate" onclick="$(this).prev('form').submit()">Duplicate</a>
+                        </li>
+                    </t>
+                </div>
             </div>
-            <div t-if="blog_post.background_image" id="blog_angle_down">
-                <strong><a href="#blog_content" class="fa fa-angle-down fa-3x fa-inverse mt32"/></strong>
+            <div class="blog_title">
+                <h1 t-field="blog_post.name" id="blog_post_name" t-att-data-blog-id="blog_post.id" placeholder="Blog Post Title"/>
+                <h2 t-field="blog_post.subtitle" placeholder="Subtitle"/>
+                <p class="post-meta text-muted text-center" name="blog_post_data"/>
+                <div>
+                    <t t-if="blog_post.author_avatar">
+                        <span t-field="blog_post.author_avatar" class="o_not_editable" t-field-options='{"widget": "image", "class": "img-circle", "style":"width: 30px; margin-right: 10px; display:inline"}' />
+                    </t>
+                    <span t-field="blog_post.author_id" style="display: inline-block;" t-field-options='{
+                        "widget": "contact",
+                        "fields": ["name"]
+                    }'/>
+                </div>
+                <div t-if="blog_post_cover_properties['resize_class'] == 'cover cover_full'" id="blog_angle_down">
+                    <strong><a href="#blog_content" class="fa fa-angle-down fa-3x fa-inverse mt4"/></strong>
+                </div>
             </div>
         </div>
-    </div>
 
-    <div id="blog_content" t-field="blog_post.content" class="mt32"/>
+        <div id="blog_content" t-field="blog_post.content" class="blog_content mt32"/>
+
 
     <section id="comments" class="read_width">
-        <hr/>
+        <hr t-if="comments"/>
         <ul class="media-list" id="comments-list">
             <li t-foreach="comments" t-as="message" class="media">
                 <span class="pull-left">
-                    <img class="media-object img img-circle" t-att-src="website.image_url(message, 'author_avatar')" style="width: 30px"/>
+                    <img t-if="message.author_avatar" class="media-object img img-circle" t-att-src="website.image_url(message, 'author_avatar')" style="width: 30px"/>
                 </span>
                 <div class="media-body">
                     <t t-call="website.publish_short">
                         <t t-set="object" t-value="message"/>
                     </t>
-                    <!-- <strong t-field="message.author_id"/> -->
-                    <span t-field="message.author_id" style="display: inline-block;" t-field-options='{
-                            "widget": "contact",
-                            "fields": ["name"]
-                        }'/>
+                    <strong t-field="message.author_id" class="o_not_editable"/>
                     <span class="text-muted">on <span t-field="message.date"/></span>
-                    <div t-field="message.body" class="discussion_scroll_post"/>
+                    <div t-field="message.body" class="discussion_scroll_post col-sm-10"/>
                 </div>
             </li>
         </ul>
     </section>
 
     <t t-if="next_post">
-        <div class="cover cover_footer mb0 text-center" t-attf-style="background-image: url(#{next_post.background_image})" t-ignore="True">
+        <div class="cover cover_footer mb0 text-center" t-ignore="True">
+            <div id="js_blogcover" t-attf-class="cover_footer_bg #{next_post_cover_properties.get('background-color')}" t-attf-style="background-image: #{next_post_cover_properties.get('background-image')};opacity:#{next_post_cover_properties.get('opacity')}"></div>
             <div class="blog_title">
                 <a class="hidden js_next" t-attf-href="/blog/#{ slug(next_post.blog_id) }/post/#{ slug(next_post) }/#wrap"/>
-                <h1 t-field="next_post.name"/>
-                <h2 t-field="next_post.subtitle"/>
+                <h1 t-field="next_post.name" placeholder="Blog Post Title"/>
+                <h2 t-field="next_post.subtitle" placeholder="Subtitle"/>
                 <div>
-                    <span t-field="next_post.author_avatar" t-field-options='{"widget": "image", "class": "img-circle", "style":"width: 30px; margin-right: 10px; display:inline"}' />
+                    <t t-if="next_post.author_avatar">
+                        <span t-field="next_post.author_avatar" t-field-options='{"widget": "image", "class": "img-circle", "style":"width: 30px; margin-right: 10px; display:inline"}' />
+                    </t>
                     <span t-field="next_post.author_id" style="display: inline-block;" t-field-options='{
                             "widget": "contact",
                             "fields": ["name"]
@@ -291,12 +289,15 @@
 <!-- Options: Blog Post: user can reply -->
 <template id="opt_blog_post_complete_comment" name="Allow blog post comment"
         inherit_id="website_blog.blog_post_complete" active="False" customize_show="True">
+    <xpath expr="//hr" position="attributes">
+        <attribute name="t-if">True</attribute>
+    </xpath>
     <xpath expr="//ul[@id='comments-list']" position="before">
         <section class="mb32 read_width css_editable_mode_hidden">
             <form id="comment" t-attf-action="/blog/post_comment" method="POST">
                 <div class="media">
                     <span class="pull-left">
-                        <img class="img img-circle media-object" t-att-src="website.image_url(user_id.partner_id, 'image_small')" style="width: 30px"/>
+                        <img t-if="user_id.partner_id.image_small" class="img img-circle media-object" t-att-src="website.image_url(user_id.partner_id, 'image_small')" style="width: 30px"/>
                     </span>
                     <div class="media-body">
                         <input name="blog_post_id" t-att-value="blog_post.id" type="hidden"/>
@@ -313,7 +314,7 @@
 <template id="opt_blog_post_select_to_tweet" name="Select to Tweet"
         inherit_id="website_blog.blog_post_complete" active="False" customize_show="True">
     <xpath expr="//div[@id='blog_content']" position="attributes">
-        <attribute name="class">js_tweet mt32</attribute>
+        <attribute name="class">blog_content js_tweet mt32</attribute>
     </xpath>
     <xpath expr="//div[@id='title']//div[@class='blog_title']" position="attributes">
         <attribute name="class">blog_title js_tweet</attribute>
@@ -353,10 +354,7 @@
 <!-- Option:Right Column for extra info -->
 
 <template id="index_right" name="Right Column"
-        inherit_id="website_blog.blog_post_short" active="False" customize_show="True">
-    <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-sm-8</attribute>
-    </xpath>
+        inherit_id="website_blog.blog_post_short">
     <xpath expr="//div[@id='main_column']" position="after">
         <div class="col-lg-3 col-lg-offset-1 col-sm-4" id="blog_right_column"/>
     </xpath>
@@ -364,7 +362,10 @@
 
 <!-- Option:Right Column: tags -->
 <template id="opt_blog_rc_tags" name="Tags"
-        inherit_id="website_blog.index_right" active="False" customize_show="True">
+        inherit_id="website_blog.index_right" active="True" customize_show="True">
+    <xpath expr="//div[@id='main_column']" position="attributes">
+        <attribute name="class">col-sm-8</attribute>
+    </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32">
         <h4>Tags</h4>
@@ -383,7 +384,10 @@
 
 <!-- Option:Right Column: archives -->
 <template id="opt_blog_rc_history" name="Archives"
-        inherit_id="website_blog.index_right" active="False" customize_show="True">
+        inherit_id="website_blog.index_right" active="True" customize_show="True">
+    <xpath expr="//div[@id='main_column']" position="attributes">
+        <attribute name="class">col-sm-8</attribute>
+    </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32">
         <h4>Archives</h4>
@@ -407,7 +411,10 @@
 
 <!-- Option:Right Column: about us -->
 <template id="opt_blog_rc_about_us" name="About Us" priority="2"
-        inherit_id="website_blog.index_right" active="False" customize_show="True">
+        inherit_id="website_blog.index_right" active="True" customize_show="True">
+    <xpath expr="//div[@id='main_column']" position="attributes">
+        <attribute name="class">col-sm-8</attribute>
+    </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32">
         <h4>About us</h4>
@@ -424,7 +431,10 @@
 
 <!-- Option:Right Column: follow us -->
 <template id="opt_blog_rc_follow_us" name="Follow us" priority="4"
-        inherit_id="website_blog.index_right" active="False" customize_show="True">
+        inherit_id="website_blog.index_right" active="True" customize_show="True">
+    <xpath expr="//div[@id='main_column']" position="attributes">
+        <attribute name="class">col-sm-8</attribute>
+    </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32">
             <h4>Follow us<small t-if="blog">: <t t-esc="blog.name"/></small></h4>
@@ -451,7 +461,10 @@
 
 <!-- Option:Right Column: blogs -->
 <template id="opt_blog_rc_blogs" name="Our Blogs" priority="6"
-        inherit_id="website_blog.index_right" active="False" customize_show="True">
+        inherit_id="website_blog.index_right" active="True" customize_show="True">
+    <xpath expr="//div[@id='main_column']" position="attributes">
+        <attribute name="class">col-sm-8</attribute>
+    </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
         <section class="mt32 mb32">
         <h4>Our Blogs</h4>
diff --git a/addons/website_blog/views/website_blog_views.xml b/addons/website_blog/views/website_blog_views.xml
index 96e14add75c..259bd20dda7 100644
--- a/addons/website_blog/views/website_blog_views.xml
+++ b/addons/website_blog/views/website_blog_views.xml
@@ -60,12 +60,11 @@
                             </button>
                         </div>
                         <group>
-                            <field name="name" placeholder="Name"/>
+                            <field name="name" placeholder="Blog Post Title"/>
                             <field name="tag_ids" widget="many2many_tags"/>
                             <field name="subtitle" placeholder="Blog Subtitle"/>
                         </group>
                         <group>
-                            <field name="background_image"/>
                             <field name="blog_id"/>
                         </group>
                         <group>
diff --git a/addons/website_crm_score/static/src/js/set_score.js b/addons/website_crm_score/static/src/js/set_score.js
index cdf3d3588d8..2d629458774 100644
--- a/addons/website_crm_score/static/src/js/set_score.js
+++ b/addons/website_crm_score/static/src/js/set_score.js
@@ -11,17 +11,21 @@
         start: function() {
             this._super.apply(this, arguments);
             var self = this;
-            this.is_tracked().then(function(data){
-                var add = $('<input type="checkbox" required="required"/>');
-                if (data[0]['track']) {
-                    add.attr('checked','checked');
-                    self.track = true;
-                }
-                else {
-                    self.track = false;
-                }
-                self.$el.find('h3[class="track-page"]').append(add);
-            });
+            var obj = website.seo.Configurator.prototype.getMainObject();
+            // only display checkbox for website page
+            if (obj && obj.model === 'ir.ui.view') {
+                this.is_tracked().then(function(data){
+                    var add = $('<input type="checkbox" required="required"/>');
+                    if (data[0]['track']) {
+                        add.attr('checked','checked');
+                        self.track = true;
+                    }
+                    else {
+                        self.track = false;
+                    }
+                    self.$el.find('h3[class="track-page"]').append(add);
+                });
+            }
         },
         is_tracked: function(val) {
             var obj = website.seo.Configurator.prototype.getMainObject();