Main Content

Changing Fonts & Colors in Firefox Themes

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.


5 Responses

  1. Brian says:

    Thanks for the Miint theme – it’s excellent!

    I took a look through your tutorial and Mozilla’s and was surprised that not much is said about CSS! After opening a .jar package as a base for a new theme, I was shocked at how many CSS files there are! Holy crap, there are A LOT. Is there a spec document (possibly graphical) that shows which styles apply to which parts of the browser’s theme? When you create a theme, do you find that changing the theme color is mostly done with graphics or CSS?

    Kudos to you any anyone who creates a theme – it clearly takes a lot more time and effort than I thought. That is just a boatload of files to update and am just sick at the thought of having to update all of them! Haha… so thanks again for some great themes and I hope you can answer my questions above.

    Brian

  2. Thomas says:

    Brian, there is no tutorial on what does what inside the CSS files. Most are labeled pretty well, but there is a lot of trial and error. 🙂

  3. Will says:

    I cannot find the code above in the browser.css file. I am using Dreamweaver to modify .css code and theprogram has a search feature that just won’t find the code block. Neither will reading the code line by line. What am I missing?
    Thanks

  4. @Will The is a function in the Dreamweaver (search in selected text / this document / open document etc.) where you can select FOLDER. Just choose the folder containing your theme and you will search thru all you css files.

Leave a Reply