3 files changed, 13 insertions, 12 deletions
diff --git a/addons/website/static/src/css/website.backend.css b/addons/website/static/src/css/website.backend.css
index 24879793303..91b3e7c01ea 100644
--- a/addons/website/static/src/css/website.backend.css
+++ b/addons/website/static/src/css/website.backend.css
@@ -1,7 +1,7 @@
-.oe_WidgetWebsiteButton.danger .oe_publish {
-    display: none;
+.oe_stat_button .o_stat_info:not(.published) > .o_stat_text.oe_publish {
+	display: none;
 }
-.oe_WidgetWebsiteButton.success .oe_unpublish {
+.oe_stat_button .o_stat_info.published > .o_stat_text.oe_unpublish {
     display: none;
 }
 .oe_form_field_html_frame iframe {
diff --git a/addons/website/static/src/js/website.backend.js b/addons/website/static/src/js/website.backend.js
index b1920dc4cab..d1bb6c2f5b0 100644
--- a/addons/website/static/src/js/website.backend.js
+++ b/addons/website/static/src/js/website.backend.js
@@ -9,10 +9,13 @@ var form_widgets = require('web.form_widgets'); // required to guarantee that
 var WidgetWebsiteButton = form_common.AbstractField.extend({
     template: 'WidgetWebsiteButton',
     render_value: function() {
+        // Hack to replace false value by unpublished because falsy form fields
+        // have classname o_form_field_empty and are hidden
+        if (!this.get_value()) {
+            this.set_value('unpublished');
+        }
         this._super();
-        this.$()
-            .toggleClass("success", this.get_value())
-            .toggleClass("danger", !this.get_value());
+        this.$el.toggleClass("published", this.get_value() === true);
         if (this.node.attrs.class) {
             this.$el.addClass(this.node.attrs.class);
         }
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 24f8c825816..826e29e261c 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -1,12 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
 
-    <t t-name="WidgetWebsiteButton">
-        <div class="oe_WidgetWebsiteButton success">
-            <strong class="oe_unpublish text-danger">Not<br/>Published</strong>
-            <strong class="oe_publish text-success">Published</strong>
-        </div>
-    </t>
+    <div t-name="WidgetWebsiteButton" class="o_stat_info published">
+        <span class="o_stat_text oe_unpublish text-danger">Not Published</span>
+        <span class="o_stat_text oe_publish text-success">Published</span>
+    </div>
 
     <t t-name="FieldTextHtmlFrame">
         <div class="oe_form_field oe_form_field_html_frame oe_form_embedded_html" t-att-style="widget.node.attrs.style">