Custom Tumblr Icon Bar

Added by Tiberius@userstyles, Created: Jul 17, 2014, Updated: Feb 13, 2016
  • With the style applied (Generated screenshot)
  • Without the style applied (Generated screenshot)
Icon Bar URL:
Dropdown Button Icon
Activity Button Icon
Explore Compass Icon
chat bubble
Using blank chat button?
Hide the chat bubble?
icon height (adjust if your icons are cut off on bottom or top)
icon width (adjust if icons are cut off on left or right)


Input your own image, and watch it replace tumblr's icon bar. Can be used for your own creations or to avoid manually fixing an existing icon bar broken by tumblr's update. (Thanks to @hideheader for the assistance.)

Important usage note: When choosing a button for the chat bubble, be sure to set 'no' for whether you're leaving it blank!

Does not currently work on the xkit icon. Will be updated when/if possible to fix this. Also currently experiencing issues due to more unnecessary tumblr updates. Currently appears to be fixed in Firefox; uncertain about Chrome and/or other Stylish-enabled browsers.

More info
February 2016 - Words cannot describe how close I am to just no longer bothering with styling tumblr. Another pointless change once again broke this, and I think I've fixed it but can't be bothered to test multiple browsers. (If you already have this style installed, you will need to manually change the width setting, as this site will not update variables. Original default width was changed from 30 to 20 to fix the current issue, so toy with that setting first if you're still having overflow or shrinkage issues with the width.)

January 2016 - Fixed the dropdown button, hopefully. Don't have time to test on anything other than Firefox 32. And frankly still don't care enough about tumblr to bother.

November 11, 2015 - Sort of works with the new chat bubble. I don't give a crap enough about tumblr at this point to try figuring out how to make an option for it to display the default chat bubble from tumblr. Or to make this code work with any images designed with the newer icons inside of them. (Mainly, this is a means of using older custom buttons, after all.) If you'd like a blank section instead of an icon, so that you can install a separate style for the chat bubble button, that option is provided as default.

September 27, 2015 - This should now work with New Xkit as well.

April 27, 2015 - Realized it accidentally hid the ask options on the horrid user card on icon hover. Only even re-enabled those because xkit stopped working properly for on-dash ask boxes. Since nobody else reported that issue, I'm going to assume most of us have been killing the new menu, too. For those who haven't been, I'm terribly sorry for the inconvenience! It should now be fixed.

April 2015 Update - Fixed. Again. Now you have a choice of which icon to use for the activity button which, disgustingly enough, is now required just to get to the links which used to live on the sidebar. Obviously, I can't make an option to hide it as that would break ability to get to important features of the site. Also noticed the "tumblr's default" icon option for 'drop down button' seems to have broken and I'm so infinitely done with this website and it's changes I don't feel like trying to fix the option at present.

February 2015 Update - Quick fix while I'm juggling attempting to make a new computer work. Bleh. When will tumblr stop doing stupid things to their site?!

December 2014 Update - Since I anticipate XKit may put the buttons back where they belong and offer an option to undo this ridiculous drop-down button change, I'm not removing those options. However, this won't magically make them show up. Choose which button's icon you wish to have for the drop down button in settings, if you have the drop down button. (By default, it uses the log out button.) Also now has option to destroy hide or skin the new Explore Compass button.

Updated November 2014! Should fix the xkit icon being too high up on the page.

To fix broken icon bar themes on mobile browsers:

Please note that I do not encourage theft of anyone else's work. These instructions are to make the theme only appear to you, the user, if you choose to input someone else's image bar and use this with mobile. (I strongly encourage waiting first to see if it updates on its own, but I do recognize that some users have abandoned their styles.)

To grab the url from your favourite icon bar theme, first make sure it's a full theme and not just a single home/inbox/help/settings icon. It must be a full bar. Then, click the 'show css' link under the preview image. From the css, copy ONLY the image url. Nothing else but the url (on some browser versions, you may need to delete a ' or two from around the url, if the copy/paste isn't precise enough.) Paste that url into the "Icon Bar URL" field of this theme, and then install.

There may be compatibility issues with some, but unfortunately I don't have the time or patience to make sure this works with super-custom icon bars. Try making your own, as well; creativity and originality are always awesome.

Applies to:
CC0 1.0 Universal.
Tiberius@userstyles has waived all copyright and related or neighboring rights to Custom Tumblr Icon Bar, to the extent allowed by law.

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.