Some customizations that make or for (in my opinion) more efficient usage of the bookmarks toolbar. This is mainly for my own use, but I thought others might find it useful as well.
- Displays only the icon with no text for items that have an icon set (not Firefox's default bookmark icon)
- Displays only text with no icon for items that don't have an icon set
- Shows the dropmarker arrow for bookmark folders to distinguish them from bookmark items
- Sets the "Smart Bookmarks" folder to have a distinctive icon and iconizes it
I took inspiration and/or snippets from:
- Bookmarks toolbar - icons only
- Bookmarks toolbar - icons only + text on hover
- Bookmarks toolbar - icons only with favicon
- FaviconizeBookmarktoolbar
- Personal-Bookmarks Dropmarkers
UPDATE (14 Mar 2008):
- Reduced right margins on iconized bookmark items
- Add space between bookmark folder label and dropmarker arrow
Install options
- Install Stylish for Firefox, Thunderbird, Flock, Mozilla Suite, SeaMonkey, or Songbird. If you have Stylish already, make sure you're using the latest version and have JavaScript enabled.
- You need Firefox with Stylish to use this style. Get it now, then Install Stylish, then come back here to install this style.
- - load into the Stylish extension where you can preview and save it.
- - this style has been updated since you installed it in Stylish.
Feedback
Reviews
platysma said on Oct 08 2008
I've added :hover properties:
/* Iconize bookmarks toolbar items that have an icon set */
#personal-bookmarks toolbarbutton.bookmark-item[image]:not([image=""]) .toolbarbutton-text
{ display: none !important; }
/* added :not(:hover) */
#personal-bookmarks toolbarbutton.bookmark-item[image]:not([image=""]):not(:hover) .toolbarbutton-icon
{ margin-right: 0px !important; }and I've also added this:
/* Hide text for bookmarks toolbar folders */
/* ==OPTIONAL== (only useful if [Don't hide icon for bookmarks toolbar folders] is enabled) */
/*
#personal-bookmarks toolbarbutton.bookmark-item[container="true"] .toolbarbutton-text
{ display: none !important; }
*//* Show text on hover */
#personal-bookmarks toolbarbutton.bookmark-item[container="true"] .toolbarbutton-text
{ display: none !important; }
#personal-bookmarks toolbarbutton.bookmark-item:hover .toolbarbutton-text,
#personal-bookmarks toolbarbutton.bookmark-item[image]:not([image=""]):hover .toolbarbutton-text
{
display: -moz-box !important;
}
Jonneh said on May 10 2008
Lain_13 said on Mar 05 2008
Good style, but I'm combine "Smart Bookmarks" and one more "useless" folder into one and name it "places". :)
I'm change three "Smart Bookmarks" into "places" but don't see icon. I have this icon, I'm check.
Did you know any method to make your style universal in this case?
Also, on the right side of icon-only bookmarks too much free space.
