Personalized Theme Customization
February 10, 2010
I get a lot of feedback from users for various reasons and one thing is certain, I cannot make everyone happy all of the time. Some users like light backgrounds with dark text while others like dark backgrounds with white text. People like different font sizes, different font colors, and various other looks within the theme.
I try to design my themes based on the majority of feedback but I want everyone to be able to view their theme the way they want it. There is a way for everyone to be happy but it requires a little self-customization by using the userChrome.css file. This file is located in your user profile directory but how you find that is different for each OS.
Windows XP: C:\Documents and Settings\[user name]\Application Data\Mozilla\Firefox\Profiles\[random string].default\chrome\
Windows Vista/7: C:\Users\[user name]\AppData\Roaming\Mozilla\Firefox\Profiles\[random string].default\chrome\
Mac OSX:
Windows users will find that they cannot see the Application Data folder unless they change their view settings to display hidden folders. XP users must click on Tools, then Folder Options. Vista/Win 7 users much click Organize, then Folder and Search Options. Then, select the view tab and change the settings to “Show hidden files and folders”.
In the chrome directory, you will likely see a file called userChrome-example.css file. You can rename it and delete -example. If you open this file you will see:
/*
* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/
*//*
* This file can be used to customize the look of Mozilla’s user interface
* You should consider using !important on rules which you want to
* override default settings.
*//*
* Do not remove the @namespace line — it’s required for correct functioning
*/
@namespace url(“http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”); /* set default namespace to XUL *//*
* Some possible accessibility enhancements:
*/
/*
* Make all the default font sizes 20 pt:
*
* * {
* font-size: 20pt !important
* }
*/
/*
* Make menu items in particular 15 pt instead of the default size:
*
* menupopup > * {
* font-size: 15pt !important
* }
*/
/*
* Give the Location (URL) Bar a fixed-width font
*
* #urlbar {
* font-family: monospace !important;
* }
*//*
* For more examples see http://www.mozilla.org/unix/customizing.html
*/
You can add, change, and customize many different things in the theme that you do not like. Once you add the changes you want to make and save the file, your changes will appear once you restart Firefox. If you have any specific questions about to change something, please send me an email and I can give you the changes you would need to add to the userChrome.css file.
To make the Menu popup windows light with dark text, right click and save this file and place it in the appropriate directory listed above.
Comments
3 Responses to “Personalized Theme Customization”
Got something to say?
There’s a shorcut to find the userChrome-example.css file,
in XP->Start->Run->
(enter this text): %Application Data%\Mozilla\Firefox\Profiles
the explorer will open in the profiles window, then you enter to the rest of the folders to find the file (\[random string].default\chrome\)
In Vista/7, it’s similar->Start->paste this in the search bar: %AppData%\Roaming\Mozilla\Firefox\Profiles\
then, you enter the rest of the folders to find the file ([random string].default\chrome\)
Where can I find the themes for Flock???
Unfortunately, because of Flock’s transition to Chrome I will no longer be creating or supporting Flock themes. I have a few for Flock 2.5 that will work with the 2.6 update but need to upload them to the new site.