Today’s question comes off the iPox Remix request line:
How do I make the font on the bookmark toolbar change color when I hover over it?

Since Firefox runs mainly on CSS, this is a pretty easy edit. Just go into /browser/browser.css and look for the following chunk of code:

toolbarbutton.bookmark-item:hover,
toolbarbutton.bookmark-item:hover:active,
toolbarbutton.bookmark-item[open="true"] {
background: url(chrome://browser/skin/bookmarks/bookmark-highlight.png) !important;
color: #fff;
padding: 2px 4px;
}

Where you see color: #fff this states that it’s using white as the rollover (aka hover) color. Change that to another color and you’re good to go. Colors can be in HEX format or you can type in an actual color like red or blue.

If you want, you can also add in a font, bold, underline or other CSS code to modify the text.

Of note, iPox includes code for the del.icio.us toolbar. So, you should also update .yb-tag-item:hover as this acts as the bookmark bar with the del.icio.us toolbar extension.

As of now, I’ve really only got a few questions from users. You can submit yours here.

Are others building themes off the iPox Remix tutorials? If so, let me know. I’d love to showcase some of your creations.

This is just one installment into the iPox Remix set of tutorials that will help you learn how to create your own Firefox theme. Visit the main iPox Remix page for more details.

Advertisements