TagSifter Style

Like any other part of Firefox, TagSifter's appearance can be modified by adding CSS rules to userChrome.css. You can do things like:

Sidebar with cloud style

Oh man, that's awesome.

The following table lists CSS selectors for TagSifter widgets. If you're having problems getting a rule to stick, you might need to make it !important. If you're not handy with CSS, try the examples below.

Element CSS Selector
tag list tree[type="bookmarktags:tagtree"]
tags in tag list tree[type="bookmarktags:tagtree"] treechildren
text of tag named Meatwad (case-sensitive) in tag list tree[type="bookmarktags:tagtree"] treechildren::-moz-tree-cell-text(bmt_tagname_Meatwad)
background of tag named Meatwad (case-sensitive) in tag list tree[type="bookmarktags:tagtree"] treechildren::-moz-tree-row(bmt_tagname_Meatwad)
tag cloud box[type="bookmarktags:tagcloud"]
tag in tag cloud box[type="bookmarktags:tagcloud"] label
tag named Meatwad (case-sensitive) in tag cloud box[type="bookmarktags:tagcloud"] label[bmt-tagname="Meatwad"]
tag of size 5 in tag cloud (11 sizes, numbered 0 to 10) box[type="bookmarktags:tagcloud"] label[bmt-tagsize="5"]
tag menu toolbar button #BookmarkTags-bmMenuToolbarbutton
tag submenu menu[type="bookmarktags:tagmenu"]
tag submenu named Meatwad (case-sensitive) menu[bmt-tagname="Meatwad"]

Examples

Paste these inside userChrome.css and restart Firefox. 

/* TagSifter tag list "Blogs" tag: orange rounded-corner
 * background and bold black text */
tree[type="bookmarktags:tagtree"]
treechildren::-moz-tree-row(bmt_tagname_Blogs)
{
    background-color:   orange !important;
    -moz-border-radius: 3px !important;
}
tree[type="bookmarktags:tagtree"]
treechildren::-moz-tree-cell-text(bmt_tagname_Blogs)
{
    color:              black !important;
    font-weight:        bold !important;
}

/* TagSifter tag clouds: white background, a little
 * padding, and a rounded border */
box[type="bookmarktags:tagcloud"]
{
    background:         white;
    -moz-border-radius: 5px;
    padding:            5px;
    margin:             2px;
}

/* TagSifter tag cloud tags: light blue background, bold
 * font, brown text, rounded border, when moused over
 * lighten the background */
box[type="bookmarktags:tagcloud"] label
{
    background-color:   lightblue;
    color:              saddlebrown !important;
    font-weight:        bold;
    -moz-border-radius: 3px;
}
box[type="bookmarktags:tagcloud"] label:hover
{
    background-color:   aliceblue;
    text-decoration:    none !important;
}

/* TagSifter "Blogs" menu: bold red text */
menu[bmt-tagname="Blogs"]
{
    color:       red !important;
    font-weight: bold !important;
}

← TagSifter

canary