Features and Points
- Small, medium, large and extra large Netscape throbbers are included.
- The throbber frame rate is adjusted to approximate Netscape's rate.
- The size of the throbber icon is selected automatically based upon the type and size setting of the toolbar icons and, in the case of the Menu Bar, the bar on which the throbber is positioned.
- Surprisingly, the large and extra large throbbers do not waste space in the vertical direction when used on a toolbar that has other buttons on it.
- Cleaned up the overall appearance of the classic Netscape icons.
- Improved the glint of light/plus sign graphic used in several icons.
- Created several new icons: Go, New Tab, New Window, History, Tab Bar Close, Tab Bar Left Arrow, Tab Bar Right Arrow, Full Screen and more.
- RSS feeds are indicated by orange bookmark folders.
- The toolbar bookmarks use file icon with a Netscape logo ('N' in a rectangle) instead of the green bookmark icon which is used on links elsewhere.
- Toolbar button text labels display in bright blue and dark blue during mouse hover and mouse click, respectively.
- Small toolbar icons and more are quite clear in detail since some of them were made from scratch.
The Moonscape theme can be seen in the following places:
- All menu items.
- The Page Proxy icon on the left end of the Location control.
- Edit This Bookmark popup
- Popup Blocker menu below the tab bar.
- Missing Plugins menu below the tab bar.
- "Subscribe to this feed using" page.
- "Problem loading page" error page (see: about:neterror)
- "Downloads complete" popup.
- Local disk drive navigation (see: file:///c:/)
- More... See the Advanced Customization section.
Customization
I. Position the throbber
After restarting, you should do the following two steps.- Open the Customize Toolbar window - Right click on the home button and choose Customize... on the popup menu that appears. Alternatively, you can get there using the menu bar by clicking View > Toolbars > Customize...
- Relocate the Activity Indicator (a.k.a Throbber) - Assuming that your installation of Pale Moon is fresh, the Throbber will be
located in the Customize Toolbar window. If needed, drag the throbber from it's current position and drop it on the right hand side of the Navigation toolbar (to the right of the search control).
If after moving the Throbber you are satisfied with the layout of the browser then you can just click on the Done button and you are finished. If you would like to make things look as close as possible to one of the supported browser families (Netscape 4.x, Netscape 6.x, Mozilla M18+, SeaMonkey 1.0+), then continue on to the following section.
II. Netscape 4.x Toolbar Layout
If you wish to make Pale Moon look like the Netscape 4.x family of browsers, do the following steps. Otherwise, go to the following section.- Make a Location Toolbar - In the Customize Toolbar window, click on Add New Toolbar, enter Location Toolbar as the name, and click OK to continue. You will see a new blank toolbar appear below the Navigation toolbar and above the Bookmarks toolbar. Drag the existing Location bar and Search bar from the Navigation toolbar and place them on the new Location toolbar so they appear in the following left to right order.
Location Toolbar
- Bookmarks Menu (Appears with a dropmark symbol (down pointing triangle) on the right of the folder)
- Location
- Search
- Subscribe
- Customize the Navigation Toolbar - Now that the Location bar and Search bar are not taking up space on the Navigation toolbar, drag and drop controls as needed to produce a Navigation toolbar control layout that matches the following left to right layout order. Note that items seven through 24 were not available in Netscape 4.x.
They are presented here in an order that makes logical sense, and as they may have been arranged in a hypothetical evolution of Netscape 4.x that gained functionality. They are optional, and may be left out if you wish to adhere to a more classic look.
Navigation Toolbar
01. Back \__ One control
02. Forward /
03. Reload
04. Home
05. Print
06. Stop
07. - Separator -
08. New Tab (Appears as a + symbol on right end of tab bar)
09. List all tabs (Appears as a button with 4 squares on right end of tab bar)
10. Tab Groups (Available through an addon)
11. New Window
12. Full Screen
13. Zoom Controls
14. - Separator -
15. Downloads
16. Bookmarks
17. History
18. - Separator -
19. Cut
20. Copy
21. Paste
22. - Separator -
24. Sync
23. Subscribe
25. [Flexible Space]
26. Activity Indicator (Throbber)
Be sure to position a Flexible Space item on the left hand side of the Throbber to make the Throbber always appear at the far right end of the Navigation toolbar if the browser window size is expanded.
- Icon Text - The final important step is to make the icons display their corresponding text labels by selecting Icons and Text in the Show: drop down selector located in the lower left corner of the Customize Toolbar window. Also note that the Use Small Icons checkbox should be unchecked to produce the large icons typically seen in Netscape. When you are finished customizing the layout, click Done to finish unless you want to do the following optional step.
- Simulate Grippies - This optional step allows you to change the toolbars to approximate the appearance of toolbar grippies, though they will not function. Simply drag two Separator items to the left end of the following bars: Menu Bar, Navigation Toolbar, Location Toolbar, and the Bookmarks Toolbar. Click Done to finish.
- Don't always show the tab bar -
This optional step saves some space and hides the tab bar when there is
only 1 open tab since during the Netscape 4.x era, tabs functionality
don't exist yet. Go to the options window, in the Tabs tab, uncheck the
"Always show the tab bar" option. Click OK to apply the changes.
III. Netscape 6-7.x, Mozilla M18+, SeaMonkey 1.0+ Toolbar Layout
If you wish to make your browser look like one of the following browser families: Netscape 6-7.x, Mozilla Milestone 18 to 1.7.x, orSeaMonkey 1.0 to 2.x, then do the following steps. Otherwise, go to the following section.
- Customize the Navigation Toolbar - With the Customize Toolbar window open, Drag and drop controls as needed to produce a Navigation toolbar control layout that matches the following left to right layout order.
Navigation
Toolbar
1. Back
2. Forward
3. Reload
4. Stop
5. Location
6. Search
7. Print
8. Activity Indicator (Throbber)
Lastly, if you are trying to make Pale Moon look like one of the browser families other than Netscape 6.x, be sure to read to the section titled "Included throbbers" to see how to make the throbber look like the one from the browser family you desire.
1. Back
2. Forward
3. Reload
4. Stop
5. Location
6. Search
7. Print
8. Activity Indicator (Throbber)
Lastly, if you are trying to make Pale Moon look like one of the browser families other than Netscape 6.x, be sure to read to the section titled "Included throbbers" to see how to make the throbber look like the one from the browser family you desire.
- Customize the Bookmarks Toolbar
- Drag and drop controls as needed to produce a Bookmarks toolbar
control layout that matches
the following left to right layout order.
Bookmarks
Toolbar
1. Home
2. Bookmarks Toolbar Items
1. Home
2. Bookmarks Toolbar Items
- Icon Text - The final important step is to make the icons display their corresponding text labels by selecting Icons and Text in the Show: drop down selector located in the lower left corner of the Customize Toolbar window. Also note that the Use Small Icons checkbox should be unchecked to produce the large icons typically seen in browsers. When you are finished customizing the layout, click Done to finish unless you want to do the following optional step.
- Simulate Grippies - This optional step allows you to change the toolbars to approximate the appearance of toolbar grippies, though they will not function. Simply drag two Separator items to the left end of the following bars: Menu Bar, Navigation Toolbar, and the Bookmarks Toolbar. Click Done to finish.
Advanced Customization
Further customization of Moonscape can be accomplished through use of subskins. Subskins are portions of a theme that are not enabled by default. They can optionally be enabled by the user.There are two included subskin templates which will allow you to easily pick and choose subskin features to be enable. This is done by simply un-commenting lines to enable their associated subskins. The templates can be seen by entering the following address into the address bar:
chrome://subskins/skin/config
Copy each template text block from the page above and paste each one into the file specified in the comments at the top of each text block. Be sure to place the text blocks at the specified position (top or bottom) in each file. You can also paste the contents of this file as a user style for use in Stylish.
Now you can un-comment lines in the copied templates to enable their associated subskins. For example, in the userChrome.css file, you can
enable the modern keyhole style back and forward buttons subskin by changing the following line:
/* @import url("chrome://subskins/skin/sub/Enable_keyhole_back_and_forward_buttons.css"); */
to it's un-commented form:
@import url("chrome://subskins/skin/sub/Enable_keyhole_back_and_forward_buttons.css");
After saving your changes, restart Pale Moon or save the user style to make the changes active.
Now you should see the modern keyhole style back and forward buttons.
Each subskin are named in a way that would clearly describe the function it performs. The subskin name is capitalized in the sample line below to illustrate where it occurs on each template line:
/* @import url("chrome://subskins/skin/sub/SUBSKIN-NAME.CSS"); */
Experiment by un-commenting one line at a time to learn what each subskin does.
Each default subskin will be in the format depicted below.
/* -import url("ADDRESS"); */ /* -------------------------------- DEFAULT */
These default subskins are not meant to be un-commented. I changed the "@" character that should be on the left of "import" to a "-" character to make the default subskin lines visually stand out from the other subskins and to serve as a mental reminder to not use these subskins. These subskins are here to allow you to see the default settings that Moonscape will have and to allow you to view the code that produces the named result. The following section will describe how to view a subskin's code (content).
Using Moonscape subskins with other themes
All Moonscape subskins that have names that end in "_Fx.css" should work with themes other than Moonscape. If you wish to use one of these subskins with a theme other than Moonscape, you must copy the complete content of the subskin and paste it into the appropriate user .css file (userContent.css or userChrome.css) or user style.Alternatively, you could paste it into a file stored on your hard drive and use it by entering a line into the appropriate user .css file (userContent.css or userChrome.css) similar to the following:
@import url("file:///c:/Moonscape/include.css");
In that example, the copied content of the subskin is stored in a file called include.css. It is stored in a folder called Moonscape in the root
of the C: drive on a Windows based computer.
To see the content of a Moonscape subskin, enter it's address into the address bar in Pale Moon while Moonscape is enabled. Below is an example of a subskin address from a line in the templates:
A line from the templates:
/* @import url("chrome://subskins/skin/sub/SUBSKIN-NAME.CSS"); */
The subskin address from the template line above:
chrome://subskins/skin/sub/SUBSKIN-NAME.CSS
Preset templates
In addition to the templates mentioned above, I have also included the two templates that M.W are using in his installation of FOXSCAPE.These will allow you to get a taste of what can be done with the included subskins. You can use his preset templates by simply adding one line to two files.
1. Copy the following line and insert it at the top of userChrome.css
@import url("chrome://subskins/skin/sub/0-MyUserChrome.css");
2. Copy the following line and append it at the end of userContent.css
@import url("chrome://subskins/skin/sub/0-MyUserContent.css");
After saving your changes, restart Pale Moon to make the preset templates active.
Alternatively, you could copy those lines and paste it into a new user style, which doesn't require a restart.
You may view the content of the two templates by entering the following addresses into the address bar and pressing enter:
chrome://subskins/skin/sub/0-MyUserChrome.css
chrome://subskins/skin/sub/0-MyUserContent.css
You will then be able to see which subskins have been enabled. You can also use these two addresses in place of the following address
chrome://subskins/skin/config
in the steps described at the beginning of the Advanced Customization section. You will then be able to alter these settings to your liking.
The profile-directory/chrome/ folder
The userContent.css and userChrome.css files mentioned in this readme file are located in the chrome folder that is stored in theprofile-directory folder. The profile-directory folder will be in a different place on almost every machine. The location is affected
by the operating system type and version, as well as user name and other factors. So, this makes it difficult to describe the location
in this file. An example of where you would find the chrome folder on a Windows 7 based computer appears below:
C:\Users\[Windows Login Name]\AppData\Roaming\Moonchild Productions\Pale Moon\Profiles\[Random String].[Name]\chrome\
[Windows Login Name] and [Random String] will vary. [Name] may be "default" or something else if you set up the profile yourself using the profile manager.
There is a feature that can be used to open the profile directory, allowing you to simply open the chrome folder that contains the userContent.css and userChrome.css files mentioned in this readme.
To open the profile directory, go to the about:support address or go to Help > Troubleshooting Information... on the menu bar. Once that
page loads, Under the "Application Basics" section, there's a row with a title "Profile Folder", beside it click the Open Folder button. Your screen should display a window containing the files that are in the profile folder on your computer.
Take a look at the following web pages for additional information on subskins and the location of the profile-directory folder:
http://projectit.com/subskins.html
http://home.comcast.net/~username54321/starfield/usingsubskins.html
http://support.mozilla.com/kb/profiles
Un-commenting
Un-comment lines by removing the leading /* and trailing */ comment indicators. You *must* be certain to remove both leading and trailingcomment indicators for a given line or things will not function properly.
When un-commenting lines in the templates, it is recommended that you replace the leading /* characters with two spaces characters. That
enables you to easily see which lines are enabled by making them stand out from the commented lines. If you decide to disable an enabled line,
just replace the removed /* and */ comment indicators and remove the two leading space characters if present.
After making comment changes, be sure to restart Pale Moon to make the changes active (or simply save the user style if you're using the other method).
Additional Theme Notes
Internal viewable readme
This readme file is accessible from Pale Moon once the Moonscape theme is installed and activated. It can be viewed by entering the following address into the address bar and pressing enter:chrome://subskins/skin/readme
Once entered, you will be forwarded to the following longer address:
chrome://subskins/skin/docs/readme.htm
You will then see this document in the main browser window.
Internal icon pack
The internal icon pack can be downloaded and installed by entering the following address into the address bar and pressing enter or clicking go:chrome://subskins/skin/iconpack
Follow the instructions that appear on that web page.
Included throbbers
Below are the descriptions of, and subskin entries for, the throbber files included in Moonscape. Refer to the "Advanced Customization" section to see how to use the subskin entries below.Netscape N Throbber (From Netscape 4.x - 6.2.3)
/* @import url("chrome://subskins/skin/sub/Throbber_-_force_small_(16x16).css"); */
/* @import url("chrome://subskins/skin/sub/Throbber_-_force_medium_(20x20).css"); */
/* @import url("chrome://subskins/skin/sub/Throbber_-_force_large_(32x32).css"); */
/* @import url("chrome://subskins/skin/sub/Throbber_-_force_extra_large_(40x40).css"); */
/* @import url("chrome://subskins/skin/sub/Throbber_-_auto_small_and_medium.css"); */
/* @import url("chrome://subskins/skin/sub/Throbber_-_auto_small_and_large.css"); */
/* -import url("chrome://subskins/skin/sub/Throbber_-_auto_small,_large_and_extra_large.css"); */ /* ------------------------ DEFAULT */
Mozilla M Throbber (From Mozilla M9 - 1.7.13)
/* @import url("chrome://subskins/skin/sub/Throbber_-_Mozilla_auto_small_and_large.css"); */
SeaMonkey Throbber - .gif (From SeaMonkey 1.x)
/* @import url("chrome://subskins/skin/sub/Throbber_-_SeaMonkey_1.x_auto_small_and_large.css"); */
SeaMonkey Throbber - .png (From SeaMonkey 2.x)
/* @import url("chrome://subskins/skin/sub/Throbber_-_SeaMonkey_2.x_auto_small_and_large.css"); */
Included image files
There are five splash/logo files included in the Moonscape theme. These images may be accessed from a customized about:blank page (also described in this file) or from extensions, such as the Splash extension.There are also six .htm files included to demonstrate the included images. You can go to the address of each .htm file to get an idea of what the images will look like when called from a custom about:blank page or, to an extent, the Splash extension.
These demonstration .htm files may also be used as your home page by placing the address of one into the Home Page field in the Main tab on
the Options screen. When using one as your home page, you can get almost the same effect as if you had installed the Splash extension or a custom about:blank page without actually doing so.
There is one extra .htm (0.) file relative to the number of included image files (five). This extra .htm file is included to demonstrate
what a custom gray about:blank page (described in this file) will look like.
Here are the links to the image files and their associated .htm files.
0. No image - gray background - like about:blank
( No image file for this .htm file. )
chrome://subskins/skin/spl/splash-0.htm
1. Static splash
chrome://subskins/skin/spl/splash-1.gif
chrome://subskins/skin/spl/splash-1.htm
2. Splash disappears after 5 seconds
chrome://subskins/skin/spl/splash-2.gif
chrome://subskins/skin/spl/splash-2.htm
3. Splash disappears after 5 seconds and leaves a static Moonscape logo
chrome://subskins/skin/spl/splash-3.gif
chrome://subskins/skin/spl/splash-3.htm
4. Static Moonscape logo
chrome://subskins/skin/spl/splash-4.gif
chrome://subskins/skin/spl/splash-4.htm
5. Moonscape logo disappears after 5 seconds
chrome://subskins/skin/spl/splash-5.gif
chrome://subskins/skin/spl/splash-5.htm
Using the Splashed! extension
Included in this theme are images which can be used with the "Splashed!" Pale Moon extension, which is a fork of the "Splash!" extension, is available at the following address:Splashed! 1.0.0 (or newer) by FranklinDM
https://addons.palemoon.org/addon/splashed/
The recommended settings for "Splashed!" are as follows:
Splash Settings
General
[/] Show Splash on Startup
[ ] Close splash when main window loads
Auto-close Timeout (1000 = 1 sec): 8000 (Default: 3000)
Background Color: transparent (Default: #FFFFFF)
Window Style: padding: 0px;
Image
Image URL (ex: file:///c:/image.png): chrome://subskins/skin/spl/splash-3.gif (Default: chrome://branding/content/about.png)
Text
[/] Hide splash text completely (Default: [ ])
[/] Hide progress meter (Default: [ ])
Override "loading..." text (leave blank for default):
Text Color: #000000
Text Style: font-family: sans-serif; font-size: medium; font-weight: bold; text-align: center;
Miscellaneous
Sound
[ ] Play sound on startup
Sound URL (ex: file:///c:/sound.wav):
Opacity
[ ] Use Opacity (value range is from 0-1 Ex. '.4')
You can change the "Image URL" to any one of the included image file
addresses described elsewhere in this file.
Custom about:blank page
The Netscape 4.x browsers would start up (if no home page was specified) with a gray colored page. When new windows were created they also appeared with a gray colored page. Even though there was no formally defined about:blank page in Netscape, the about:blank page is thePM equivalent to Netscape's initial gray page.
If you would like to make Pale Moon's about:blank page appear like the gray page in Netscape, either add the following line of text to the
bottom of your chrome\userContent.css file or un-comment the existing line in your chrome\userContent.css file. See the Advanced Customization section for details.
@import url("chrome://subskins/skin/sub/Gray_about_blank_Fx.css");
Alternatively, you might want to include an image in the center of the about:blank page to give your empty about:blank page a bit of style.
There is an example of a customized about:blank page that displays a Moonscape splash image that disappears after 5 seconds and leaves a static Moonscape logo. If you would like to try out this example, either add the following line of text to the bottom of your
chrome\userContent.css file or un-comment the existing line in your chrome\userContent.css file. See the Advanced Customization section for
details.
@import url("chrome://subskins/skin/sub/Gray_about_blank_with_splash-3.css");
If you would like to create a customized about:blank page with a different image than the one in my example, you can extract the complete content of the subskin example above and place it at the bottom of your chrome\userContent.css file, as described in the "Using Moonscape subskins with other themes" section, but in this case use the subskin with Moonscape, and then you can change the image name in the url("IMAGE_NAME") line in the extracted subskin content to any one of the included image file addresses described in the "Included image files" section of this file.
You can even use an image file (.png, .gif, .jpg) located on your hard drive by using an image name similar to the following example.
url("file:///c:/Moonscape/image.png")
In that example, the image file on your hard drive is stored in a file called image.png. It is stored in a folder called Moonscape in the root
of the C: drive.
To clarify, the existing line would be changed from:
background:-moz-dialog url("chrome://subskins/skin/spl/splash-3.gif") no-repeat fixed 50% 50% !important;
to
background:-moz-dialog url("file:///c:/Moonscape/image.png") no-repeat fixed 50% 50% !important;
Skin the Work Offline extension
Moonscape includes graphic elements which can be used to skin the graphic elements in this extension. This extension can be downloadedfrom the following address.
Work Offline 1.6 (or newer) by ASANO, Naoyuki
http://addons.Mozilla.org/addon/493
If you would like to see the graphic elements that are skinned by Moonscape in this extension, go to one of the following address from
Pale Moon after installing and enabling Moonscape.
chrome://subskins/skin/img/Offline-Online.png
chrome://subskins/skin/img/Offline-Online2.png
The following are the suggested settings for this extension when used with Moonscape.
Work Offline Settings
Statusbar Icon
(*) Original
( ) Thunderbird 1.5 or earlier
( ) Thunderbird 2
( ) Thunderbird 3
When Firefox starts up
(*) Do nothing
( ) Force offline mode
( ) Force online mode
Advanced
[/] Show the offline message on the titlebar
[ ] Reload all tabs when Firefox goes to online mode
If you would like to skin this extension with Moonscape, either add one of the following lines of text to the top of your chrome\userChrome.css file or un-comment one of the existing lines in your chrome\userChrome.css file. See the Advanced Customization section for details.
@import url("chrome://subskins/skin/sub/Skin_the_Work_Offline_extension1.css");
@import url("chrome://subskins/skin/sub/Skin_the_Work_Offline_extension2.css");
Other Add-ons
There are some additional add-ons for Pale Moon that may be of
interest to you. The list below shows extensions that replace some
functions
which are absent from Firefox 4.0+ that were in Firefox 3.6.Back/forward dropmarker 1.0 by Dagger
https://addons.mozilla.org/en-US/firefox/addon/backforward-dropmarker/
Open Search Notification 0.7 by FireFly
https://addons.mozilla.org/en-US/firefox/addon/open-search-notification/
Restart Manager 1.08 by GMaL
https://addons.mozilla.org/firefox/addon/restart-manager/
MinimizeToTray revived 1.0.1 by Nils Maier (may require fixes)
https://addons.mozilla.org/en-US/firefox/addon/minimizetotray-revived/
Please understand that the author is not responsible for any of the extensions listed above, and does not make any guarantees to their proper operation. The author is not responsible for any difficulties you may experience as a result of your use of them.
License
All documentation and code contained in this theme is covered by thefollowing license:
GNU General Public License, version 3.0
The specific files in this theme that are included in the documentation and code class are as follows:
Documentation & Code files:
*. (no extension files which contain html)
*.htm
*.txt
*.manifest
*.rdf
*.css
*.xml
Note that the origins of the documentation & code files are as follows:
- Mozilla Firefox 3.6 Theme
- Mozilla Firefox 4.0+ Theme
- Jeremy Morton
- Michael Walden
- Franklin DM
All images contained in this theme are covered by the following license:
Creative Commons — Attribution-NonCommercial-ShareAlike 3.0 Unported - CC BY-NC-SA 3.0
The specific files in this theme that are included in the images class are as follows:
Image files:
*.gif
*.png
*.ico (all in a .zip file)
*.xpm
*.svg
The authors have spent considerable time and effort in collecting and developing the image files contained in this theme. These are provided to the public to promote their use in software now and in the future and make zero profit from these image files. The only restrictions in the use of these images are that we require attribution in any projects that use them. Additionally, you can not make profit from use of the images. You can include them in a commercial product, so long as there is no charge for the image files and they, and any derivatives, are made available freely for anyone to use under similar terms.
Note that the origins of the images and image files are as follows:
- Netscape Communicator, Navigator, and other versions
- Mozilla Application Suite, Firefox 3.6 and Firefox 4.0+
- SeaMonkey Application Suite
- Microsoft - Only the 32px error, information, question, and warning icons come from Microsoft, and are provided by them in their older software development products, such as Visual Basic 3, for free use in your own software creations.
- Michael Walden
- Franklin DM
Credits
- Michael Walden - For creating the FOXSCAPE theme.
- The original Netscape designers - For their original work.
- Bamm Gabriana <bamm AT astronomy DOT com DOT ph>
For the subskin concept. See the description by Sailfish:
http://projectit.com/subskins.html
- Neil Rashbrook - For his animated "Cylon" progress bar [T1] and animated location bar search spinner images from his Mozilla 1.x/Firefox 1.x Retro Mozilla skin.
- Chris Neale (orbit) - Mozilla Icon Packs Project Owner
- Sailfish - For his assistance with Mac OS and Linux support by
allowing to use portions of his Netscape Navigator 9 styled Simple
Green
theme in FOXSCAPE 3.04.
- Jeremy Morton - For his excellent Firefox 3 theme for Firefox 4+, without which you would not have gotten FOXSCAPE 4.0+ as quickly and probably not as good looking, too. Used as the example to work from when creating FOXSCAPE 4.01 - 5.02.
- Thanks to everyone else who has helped with comments, suggestions, bug reports, and other support.
Trivia
[T1] "Cylon" progress bar - descriptionSource: http://en.wikipedia.org/wiki/Cylon_(1978)
On: 2009-08-16
Under: Popular culture
Quote: "In the source code of Mozilla (and its Netscape predecessor), the indeterminate progress bar that slides back and forth -- rather than rolling or filling up from left to right -- is referred to as the Cylon."