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.
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.
The Code for userChrome.css:
/* Hide bookmark text by default */
#personal-bookmarks .bookmark-item > .toolbarbutton-text {
display: none !important;
}
/* Show bookmark text on hover */
#personal-bookmarks .bookmark-item:hover > .toolbarbutton-text {
display: block !important;
}
/* Adjust padding and icon size */
#PlacesToolbarItems > .bookmark-item {
padding: 0 8px !important;
}
#PlacesToolbarItems > .bookmark-item > image {
height: 18px !important;
width: 18px !important;
}
/* Center bookmarks and adjust padding */
#PlacesToolbarItems {
display: flex !important;
justify-content: center !important;
padding: 2px 0 !important;
}
/* Style toolbar separator */
toolbarseparator {
appearance: auto;
-moz-default-appearance: separator;
color: rgba(77, 85, 101, 1) !important;
}