diff --git a/doc/_static/mpl.css b/doc/_static/mpl.css
index ff45cf7c8a18..590835cf7d28 100644
--- a/doc/_static/mpl.css
+++ b/doc/_static/mpl.css
@@ -1133,15 +1133,16 @@ div.viewcode-block:target {
 
 }
 
-.sidebar-announcement {
+.sidebar-announcement,
+.sidebar-versions {
     border: 1px solid #11557C;
     background: #eff9ff;
-    padding: 2px;
+    padding: 0.2em 0.5em;
     margin-top: 1em;
 }
 
 .sidebar-announcement p {
-    margin: 0.4em 0.4em 0.6em 0.4em;
+    margin: 0.4em 0 0.6em 0;
 }
 
 /* new main nav */
diff --git a/doc/_templates/sidebar_versions.html b/doc/_templates/sidebar_versions.html
new file mode 100644
index 000000000000..35a965661d90
--- /dev/null
+++ b/doc/_templates/sidebar_versions.html
@@ -0,0 +1,38 @@
+<div class="sidebar-versions">
+<script>
+function getSnippet(id, url) {
+    var req = false;
+    // For Safari, Firefox, and other non-MS browsers
+    if (window.XMLHttpRequest) {
+        try {
+            req = new XMLHttpRequest();
+        } catch (e) {
+            req = false;
+        }
+    } else if (window.ActiveXObject) {
+        // For Internet Explorer on Windows
+        try {
+            req = new ActiveXObject("Msxml2.XMLHTTP");
+        } catch (e) {
+            try {
+            req = new ActiveXObject("Microsoft.XMLHTTP");
+            } catch (e) {
+            req = false;
+            }
+        }
+    }
+    var element = document.querySelector(".sidebar-versions");
+    if (req) {
+        // Synchronous request, wait till we have it all
+        req.open('GET', url, false);
+        req.send(null);
+        if (req.status == 200) {
+            element.innerHTML = req.responseText;
+        } else {
+            element.innerHTML = "<mark>Could not find Snippet to insert at " + url + "</mark>"
+        }
+    }
+}
+getSnippet('other_versions', '/versions.html');
+</script>
+</div>
diff --git a/doc/conf.py b/doc/conf.py
index 67ef6bc62b38..8daaa47451fd 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -259,7 +259,8 @@ def _check_dependencies():
 
 # Custom sidebar templates, maps page names to templates.
 html_sidebars = {
-    'index': ['sidebar_announcement.html', 'donate_sidebar.html'],
+    'index': ['sidebar_announcement.html', 'sidebar_versions.html',
+              'donate_sidebar.html'],
     '**': ['localtoc.html', 'relations.html', 'pagesource.html']
 }
 
diff --git a/doc/index.rst b/doc/index.rst
index eef9868be387..aebb88445084 100644
--- a/doc/index.rst
+++ b/doc/index.rst
@@ -49,51 +49,8 @@ oriented interface or via a set of functions familiar to MATLAB users.
 Documentation
 -------------
 
-This is the documentation for Matplotlib version |version|.
-
 To get started, read the :doc:`User's Guide <users/index>`.
 
-.. raw:: html
-
-   <p id="other_versions"></p>
-
-   <script>
-   function getSnippet(id, url) {
-      var req = false;
-      // For Safari, Firefox, and other non-MS browsers
-      if (window.XMLHttpRequest) {
-         try {
-            req = new XMLHttpRequest();
-         } catch (e) {
-            req = false;
-         }
-      } else if (window.ActiveXObject) {
-         // For Internet Explorer on Windows
-         try {
-            req = new ActiveXObject("Msxml2.XMLHTTP");
-         } catch (e) {
-            try {
-            req = new ActiveXObject("Microsoft.XMLHTTP");
-            } catch (e) {
-            req = false;
-            }
-         }
-      }
-      var element = document.getElementById(id);
-      if (req) {
-         // Synchronous request, wait till we have it all
-         req.open('GET', url, false);
-         req.send(null);
-         if (req.status == 200) {
-            element.innerHTML = req.responseText;
-         } else {
-            element.innerHTML = "<mark>Could not find Snippet to insert at " + url + "</mark>"
-         }
-      }
-   }
-   getSnippet('other_versions', '/versions.html');
-   </script>
-
 Trying to learn how to do a particular kind of plot?  Check out the
 :doc:`examples gallery <gallery/index>` or the :doc:`list of plotting commands
 <api/pyplot_summary>`.