Moonscape Logo

Theme Documentation

[Back to Home] [Back to Main Site]

Features and Points

The Moonscape theme can be seen in the following places:

Customization

I. Position the throbber

After restarting, you should do the following two steps.
  1. 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...
  2. 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.
  1. 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
    1. Bookmarks Menu (Appears with a dropmark symbol (down pointing triangle) on the right of the folder)
    2. Location
    3. Search
    4. Subscribe
    The subscribe button is optional here, and may be alternatively positioned on the navigation toolbar as described below.
  1. 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.
  1. 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.
  2. 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.
  3. 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, or
SeaMonkey 1.0 to 2.x, then do the following steps. Otherwise, go to the following section.
  1. 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. 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. 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.
  2. 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 the
profile-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 trailing
comment 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 the
PM 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 downloaded
from 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 the
following 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

For the subskin concept. See the description by Sailfish: http://projectit.com/subskins.html


Trivia

[T1] "Cylon" progress bar - description
Source: 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."

Changelog