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.
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
- Brian August 21st, 2007 at 12:39 am
Mozilla Firefox 2.0.0.6 - Windows XP
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.
- Thomas August 29th, 2007 at 8:12 pm
Mozilla Firefox 2.0.0.5 - Mac OS X