Add ability to replace the default Wagtail logo in the userbar, via `branding_logo` block (#4731)

CHANGELOG.txt

@@ -19,6 +19,7 @@ Changelog
  * Show more granular error messages from Pillow when uploading images (Rick van Hattem)
  * Add ordering to `Site` object, so that index page and `Site` switcher will be sorted consistently (Coen van der Kamp, Tim Leguijt)
  * Add Reddit to oEmbed provider list (Luke Hardwick)
+ * Add ability to replace the default Wagtail logo in the userbar, via `branding_logo` block (Meteor0id)
  * Remove sticky footer on small devices, so that content is not blocked and more easily editable (Saeed Tahmasebi)
  * Fix: Support IPv6 domain (Alex Gleason, Coen van der Kamp)
  * Fix: Ensure link to add a new user works when no users are visible in the users list (LB (Ben Johnston))

docs/advanced_topics/customisation/admin_templates.rst

@@ -42,6 +42,8 @@ To replace the default logo, create a template file ``dashboard/templates/wagtai
 
 The logo also appears on the admin 404 error page; to replace it there too, create a template file ``dashboard/templates/wagtailadmin/404.html`` that overrides the ``branding_logo`` block.
 
+The logo also appears on the wagtail userbar; to replace it there too, create a template file ``dashboard/templates/wagtailadmin/userbar/base.html`` that overwrites the ``branding_logo`` block.
+
 ``branding_favicon``
 --------------------
 

docs/releases/2.10.rst

@@ -29,6 +29,7 @@ Other features
  * Add ordering to ``Site`` object, so that index page and ``Site`` switcher will be sorted consistently (Coen van der Kamp, Tim Leguijt)
  * Add Reddit to oEmbed provider list (Luke Hardwick)
  * Remove sticky footer on small devices, so that content is not blocked and more easily editable (Saeed Tahmasebi)
+ * Add ability to replace the default Wagtail logo in the userbar, via ``branding_logo`` block (Meteor0id)
 
 
 Bug fixes

wagtail/admin/static_src/wagtailadmin/scss/userbar.scss

@@ -141,7 +141,7 @@ $positions: (
         left: 0;
     }
 
-    &.#{$namespace}-icon:before {
+    .#{$namespace}-icon:before {
         transition: color 0.2s ease;
         font-size: 32px;
         width: auto;

wagtail/admin/templates/wagtailadmin/userbar/base.html

@@ -4,7 +4,10 @@
     <div class="wagtail-userbar wagtail-userbar--{{ position|default:'bottom-right' }}" data-wagtail-userbar>
         <link rel="stylesheet" href="{% versioned_static 'wagtailadmin/css/userbar.css' %}" type="text/css" />
         <div class="wagtail-userbar-nav">
-            <div class="wagtail-icon wagtail-icon-wagtail wagtail-userbar-trigger" data-wagtail-userbar-trigger>
+            <div class="wagtail-userbar-trigger" data-wagtail-userbar-trigger>
+                {% block branding_logo %}
+                <i class="wagtail-icon wagtail-icon-wagtail"></i>
+                {% endblock %}
                 <span class="wagtail-userbar-help-text">{% trans 'Go to Wagtail admin interface' %}</span>
             </div>
             <div class='wagtail-userbar-items'>