Tag: Firefox

Firefox CSS: Centered Bookmark Bar with Hidden Text

I enjoy having my bookmark bar always showing, but the default styling is a bit much. This area is reserved for my most visited websites, a way to quickly jump from one to the other, and so seeing full names constantly is not necessary. Visually, I just think things should be centered and so there is that.

What This Changes

  • Hide the bookmark text but show it if you hover over an icon.
  • Adjust the padding around the icons so they aren’t so cramped together.
  • Increase the icons sizes to 18px each. Anything more and it starts to look a bit blurry.
  • Center the bookmarks and add a 2px padding below and above so they aren’t touching the edges of the bar.
  • Style the separators on the toolbar using an RGBA color that goes well with the Nordic Dark theme. You can adjust this color to anything else you want at any RGBA color picking website. Just replace rgba(77, 85, 101, 1) with whatever color you want.
Some icons are missing for privacy, but this is what it will look like. When you hover over an icon the name will then be shown for the icon.

The How

Changing the CSS in Firefox can seem complicated if you land at the official documentation pages, but it is a lot easier than that. A fair robust how-to page is housed on reddit and so I will not try to reinvent that wheel. Follow the link and when you get to the part about adding code, you can use what I have below.

Read more