So you want to do your own theme? (New Tab King for Firefox 2.1.2 is officially out)

adam — Thu, 08 Oct 2009 08:32:21 +0000

Our latest version went officially public yesterday at the Mozilla Add-on portal. We’re super excited about this and hope existing and new folks would enjoy it – keep us posted with feedback as always – we promise a quick response.

One of the key features of the recent release is the 7 built-in themes with New Tab King. We hope one of these themes is a good fit with you but also feel like advanced folks would rather have their own personal touch. Here’s a quick recipe for that:

go to your themes directory (just replace with your Windows user name where in bold): C:\Users\[your user name]\AppData\Roaming\Mozilla\Firefox\Profiles\tuf7wn2a.default\extensions\{FC5BAC7D-D696-4ba6-B913-CF8F000C33DF}\chrome\content\themes
Open one of the newtabking-theme-x.css files
Change the very few CSS attributes according to your taste! here’s an example from the built-in Beautiful Eyes theme:

Links: a {color:#980100} .timezone{color:#980100} .timezoneSelected{background-color:#980100} } .shareSites {color:#980100}
Borders: hr{background:#cacaca ;color:#cacaca ;}
Sidebar: div#sidebox {background:#e2e2e1; border-left:1px #cacaca solid; } div#box2{ background:#e2e2e1; } div#box4{ background:#e2e2e1; }div#box5{ background:#e2e2e1; }
Main view histogram bars: .chartlist .index{ background:#e2e2e1; border:#cacaca 1px dotted} .chartlist .indexShare{ background:#e2e2e1; border:#cacaca 1px dotted;}
Main view boxes and opacity: div#box{ opacity:0.85 } div#box3{ opacity:0.85 } body{ background:#FEFEFE url(‘Beautiful eyes.jpg’) no-repeat}

Hopefully this is not too complex for the brave design-savvy out there. Let me know if you need some help.
–eddie

New Tab (the King) for Firefox blog » DIY

So you want to do your own theme? (New Tab King for Firefox 2.1.2 is officially out)