The theme subskin technology was made possible through the contributions of Bamm Gabriana <bamm AT astronomy DOT com DOT ph> who pioneered its use in early Mozilla development. The design takes advantage of the CSS @import rule which allows one to import another CSS stylesheet file from within another stylesheet file. Since the userChrome.css file is a stylesheet file that is accessible to the user, it can also incorporate the CSS @import rule. Therefore, if a theme designer provides alternate theme design stylesheet files within their theme that normally do not get accessed, a user can choose to implement a subskin simply by adding the subskin's reference within their userChrome.css file. IMPORTANT: care must be taken to insure that these @import rules are added before any @namespace rule.
Where does the userChrome.css file reside?This file resides in your Profile's chrome folder. If one does not exist, first look for a userChrome-example.css file and if it exists, rename it to userChrome.css. If it does not exist, simply create a text file in the folder and name it, userChrome.css. Additionally, the Mr Tech Toolkit extension makes locating and editing the userChrome.css much more convenient. Note: Starting with Firefox 4.0, you can easily access your Profile folder by selecting "Help>Troubleshooting Information" and clicking the "Open Containing Folder" button. Also, if a chrome folder doesn't exist, simply create one and then create a userChrome.css file within it.
How do I make the changes?Simply use your favorite text editor (e.g., notepad on Windows) and add the desired subskin CSS @import rule below.
Can I include multiple subskins?Yes, as long as the overrides affect different chrome elements, multiple subskin inclusions should work well.
Will these overrides affect other themes?No, since these subskin files only reside within a particular theme's archive package. When another theme is selected, the CSS @import rule will fail to locate the referenced file within that theme's archive package and the rendering engine will simply ignore it.
So, where are the subskin overrides?The overrides are listed below with a small comment above each one. NOTE: it is recommended that you include the comment(s) with the override in the userChrome.css file for future reference.
/*
* Aluminum Alloy - Replace standard progress-bar with color-shifting version
*/
@import url("chrome://global/skin/subskin/AltProgressbar/AltProgressbar.css");
/*
* Aluminum Alloy - Replace color-shifting globe with standard Firefox throbber
*/
@import url("chrome://global/skin/subskin/StandardThrobber/StandardThrobber.css");
/*
* Aluminum Alloy - Replace standard Go/Search buttons with long versions
*/
@import url("chrome://global/skin/subskin/LongGoSearch/LongGoSearch.css");
/*
* Aluminum Alloy - Add borders to toolbars
*/
@import url("chrome://global/skin/subskin/ToolbarBorders/borders.css");
Dec 03, 2006 - Alternate Go/Search buttons (Firefox 2.x-only)
/*
* Aluminum Alloy - Replace standard Go/Search buttons with alternate versions
*/
@import url("chrome://global/skin/subskin/AltGoSearch/AltGoSearch.css");
Nov. 21, 2006 - Netscape throbber
/*
* Aluminum Alloy - Replace color-shifting globe with Netscape throbber
*/
@import url("chrome://global/skin/subskin/NSThrobber/NSThrobber.css");
Nov. 21, 2006 - Firefox throbber
/*
* Aluminum Alloy - Replace normal color-shifting globe with Firefox throbber
*/
@import url("chrome://global/skin/subskin/FxThrobber/FxThrobber.css");
/*
* Simple Green - Replace standard throbber with Netscape's Netstripe throbber
*/
@import url("chrome://global/skin/subskin/GRN-NSThrobber/NSThrobber.css");
/*
* Simple Green - Skin standard Firefox about:home images (Fx 13.0+)
*/
@import url("chrome://browser/skin/abouthome/aboutHome.css");
/*
* Simply Blue - Replace standard throbber with Netscape's Netstripe throbber
*/
@import url("chrome://global/skin/subskin/BLU-NSThrobber/NSThrobber.css");
/*
* Simply Blue - Skin standard Firefox about:home images (Fx 13.0+)
*/
@import url("chrome://browser/skin/abouthome/aboutHome.css");
/*
* Sky Pilot Classic - Replace Go and Search Firefox buttons with icon images
*/
@import url("chrome://global/skin/subskin/IconGoSearch/IconGoSearch.css");
/*
* Enable storm119's Venerable Chrome Modern SeaMonkey theme subskin
*/
@import url("chrome://global/skin/subskin/VCMstyles.css");
/*
* Enable the Venerable Chrome Modern scrollbars in the content window
* NOTE: MUST BE ADDED TO userContent.css FILE NOT userChrome.css
@import url("chrome://global/skin/subskin/VCMscrollbars.css");
*/
 |
| © 2007, ProjectIt, All Rights Reserved | Last Revised: |
