mozdev.org

Chameleon   

Home | Mailing List | Installation | Source Code | Themes | Screenshots | Bugs | Documentation | FAQ

Theme Builder Documentation

********************************************
This documentation is provided in the tool itself as well as on-line.
If you are reading this documentation in the tool and are not connected to
the Internet, the images included as examples will not appear in the text.
********************************************

Table of Contents

Introduction

Overview of theme design

Tool basics

Creating a theme

Conclusion


Introduction

About Theme Builder

The Theme Builder is a graphical tool made to simplify the creation of themes for Netscape 6. This tool gives users the ability to apply new graphic designs to the browser without changing its functionality. Individuals can use the tool to create their own personal themes while companies can "brand" the browser with their company colors and logo.

Creating a theme with the Theme Builder requires no programming. The theme builder will create the code needed through using pull-down menus and checkboxes that contain all the different options available for creating a theme for the Netscape 6 browser.

This tool provides an introduction into the customization options that make themes possible. The look and feel of Netscape 6 can be further customized by learning more about the new technologies that make up the interface for this ground-breaking new browser. For example, the Theme Builder itself is built using these new Open Source technologies.

Overview of themes

The term theme refers to the look or overall style of Netscape 6, including the images, colors, styles, and positioning in the user interface. It is possible to change one or more of the elements in a theme, or create an entirely new theme without changing the structure and function of Netscape 6. When creating your own theme, it is important to understand that the design of Netscape 6 is separate from its structure and function.

The Netscape 6 interface is created using Cascading Style Sheets (CSS) that define the specific look of a theme. The structure and functionality of Netscape 6 is created using the XML-based User Interface Language (XUL) and JavaScript, so it is possible to edit the CSS files to alter the look of Netscape 6 with your own theme without affecting its structure or functionality.

Although we have been talking about just one of the applications in the Netscape 6 suite so far, themes are not just a feature of the browser. Themes can change the look of all the components in Netscape 6 including Mail, Composer and Instant Messenger. Themes also can change the look and feel of dialog boxes and menus, giving users the freedom to totally customize the look of all of Netscape 6.

Who should use Theme Builder

Designers and developers who are interested in changing and customizing the look and feel of Netscape 6 can use this tool. For people who are not familiar with the technologies used to create themes for Netscape 6, the Theme Builder is a great way to be able to create your own look for the browser and other applications.

If you are interested in learning more about the technical aspects of themes, the tool provides a great introduction to how the different technologies work together and will give you a good head-start into learning more about them. For anyone who already does know how to code their own themes, the Theme Builder allows you to rapidly create the start of a theme much quicker than you could do it by hand.

How the Theme Builder was created

The Theme Builder was created as an Open Source project hosted at chameleon.mozdev.org. The main development was undertaken by CollabNet, and it has benefited from the development help of many different programmers, testers, and interested users in the Mozilla community.

The technologies used to build the Theme Builder are the same that are used to build the themes for Netscape 6. The XML-based User-interface Language (XUL) is used with Cascading Style Sheets (CSS) and JavaScript to create an application that uses application toolkit created by mozilla.org that allows the tool to run on the Mac, Windows and Unix platforms.


Overview of theme design

Limitations to theme design

Although you might think that you can change any part of a theme with the Theme Builder, there are some limitations to the modifications you can create with this tool, and with themes in general. The main thing to remember is that themes allow you to change just the appearance of an application and not it's structure or functionality. This means that you can change the way the back button looks, but you can't change the way it works or move it to the right of the reload button.

You also need to know that there are some things that are not possible to do when creating your theme, because of the way Netscape 6 is built. For instance, there are sometimes many layers of graphics which are not as apparent when you first start working on a theme. Some examples of these will be covered when we go through the process of creating a theme.

Limitations of the Theme Builder

The Theme Builder is designed to allow easy and quick access to the most commonly used features of Cascading Style Sheets (CSS). The possibilities available through CSS are enormous so it is not possible to provide access through the tool to every available feature. This means that although some things might be possible to change by using CSS they are not possible through the Theme Builder.

If there is a visual feature or design that you are trying to develop that is not enabled in the tool, it is possible to use a theme created with the Theme Builder. You could then go in and hand tweak it to add your final design elements to polish and refine your design.

One of the other limitations of the tool is that currently only the browser can be themed in the tool. Later versions of the Theme Builder will allow you to create themes for even more of the applications of the Netscape 6 suite, along with support for themeing Mail/News, AOL Instant Messenger, and the Sidebar.

Theme design guidelines

To be able to use this tool efficiently, you need to be familiar with how themes are created, and with basic design concepts. We advise that you first design your theme by either using a design tool, or by sketching your idea out on paper before you start using the Theme Builder. It is possible to open up the tool and start playing around with it to create a new theme, but you will achieve greater results by doing some upfront planning.

The Theme Builder was designed using Photoshop as a model. Photoshop is a powerful tool that allows designers to create sophisticated images using the features it provides. As you learn more about design in general as well as about Photoshop as an application, you will be able to make more sophisticated designs. This same idea is true for the Theme Builder. At first you will be able to make small changes to an existing theme, but you will soon be able to create your own unique theme in the tool.


Tool basics

Installing the Theme Builder

You will need Netscape 6 in order to install and work with the Theme Builder. The Theme Builder works just as well on the Mac as it does on Windows or on Linux. So as long as you have Netscape 6 installed on your computer, you can install the Theme Builder. The installation file and complete installation and launching instructions can be found at http://home.netscape.com/themes/builder.html.

After you install the Theme Builder, do the following:

  1. Close Netscape 6, and then restart it.
  2. Click on Task from the Menu bar.
  3. Click on Theme Builder, and then click on Finish Theme Builder Install.

    Note:  You only need to do this once.

Starting the Theme Builder

After installing the Theme Builder you need to start it. To start the Theme Builder, do the following:

  1. Start Netscape 6.
  2. Click on Task from the Menu bar.
  3. Click on Theme Builder from the Menu bar, and then click on Theme Builder.

How to uninstall Theme Builder 1.0

To uninstall the theme builder do the following:

  1. Select Theme Builder from the Tasks menu, and then select Uninstall Theme Builder.
  2. Click on the OK button.

How to save and load a theme

After installing and starting the Theme Builder you will probably want to start playing around with the tool to create your own themes. As you start making changes with the tool, it is a good idea to save your work periodically.

To save a theme, do the following:

  1. Click on File from the Menu bar, and then click on Save As... from the Menu bar.
  2. Enter in a name for the new theme in the Theme Name field.
  3. Click on the OK button to save your new theme.

If you want to reload a theme you had saved earlier, do the following:

  1. Click on File from the Menu bar.
  2. Click on Load from the Menu bar.
  3. Select the new theme from the list.

The theme appears in the working area of the tool and replaces the theme that was there previously.

Other tool features

Most of the specific functionality of the tool will be reviewed in the next section of this documentation. First there are a few other general features to go over about the tool. While editing a theme it is possible to view it as it will appear by using the Preview feature. This brings up a new browser window that incorporates your changes. This is just a temporary change though, and will disappear when closing the Theme Builder.

To take a theme in order to add it as a theme for Netscape 6, share with other Netscape 6 users, or use as your own theme, you use the Publish feature. However, this feature is not fully completed, but should be working in the next release of this tool. For now it is still possible to take a saved theme and manually prepare it for use with Netscape 6. For more information about this, go to the development Web site at chameleon.mozdev.org.


Creating a theme

Where to start

The Theme Builder is designed to allow you to make modifications to all of the different parts of the Netscape 6 browser. However, the entire browser is too big to fit inside the tool. So, we broke each application into different parts to allow it to fit. You can use the tool to edit each of these parts individually, and then you can see how your changes look as a whole by using the Preview feature.

For example, the browser has been broken down into the different toolbars that make up the application including the main toolbar, the personalbar, the menubar, the statusbar and the taskbar. To start editing any of the different bars, simply select one of the tabs in the tool. For our demonstration we will start with the personalbar, since it is one of the simplest to edit.

How to edit the personalbar

You can use the Theme Builder to make simple changes to your themes. This example takes you through a step-by-step procedure for making changes to your personalbar. To learn more about using the tool and how to edit a theme, follow along and make these changes.

  1. Open the Theme Builder.
  2. Select the Personalbar tab.

Note: When you first open the Theme Builder each of the different bars that you can edit look the same as the default Netscape 6 theme. You can see this in the screen shot below.


Click on the image to enlarge

  1. Select the background portion of the personalbar. The background image appears in the Object Preview box.
  2. Select the Colors/Images tab to make changes to the color of the background image.
  3. Click on the down arrow, and then select yellow for the new color from the color chart.
  4. Click on the Apply Changes button. The new color of the background image appears in the Object Preview box.

Notes:

  1. You might have to click on the Apply Changes button twice in order for the changes to take effect.
  2. The text in the background image disappears due to the new color of the background. It is possible to make changes that hide or cover up other parts of a theme.


Click on the image to enlarge

  1. Select the Border tab.
  2. Enter 4 in the Border field for the number of pixels for the width of the border around the background element.
  3. Click on the down arrow in the select one field, and then select dotted for the new border.
  4. Click on the down arrow in the color box field, and then select orange for the new color from the color chart.
  5. Click on the Apply Changes button.

Note:   This will change the border around the background, although it is possible to use the tool to create a more detailed border effect. Read more to find out how.


Click on the image to enlarge

  1. Enter 2 in the Top row field for the number of pixels around the border of the background image.
  2. Click on the down arrow in the select one field, and then select dashed in the border field.
  3. Click on the down arrow in the color box field, and then select blue for the new color from the color chart.
  4. Click on the Apply Changes button. The change to the border appears in the Object Preview box.
  5. Enter 2 in the Right row field for the number of pixels around the border of the background image.
  6. Click on the down arrow in the select one field, and then select dashed in the border field.
  7. Click on the down arrow in the color box field, and then select orange for the new color from the color chart.
  8. Click on the Apply Changes button. The change to the border appears in the Object Preview box.
  9. Enter 2 in the Bottom field for the number of pixels around the border of the background image.
  10. Click on the down arrow in the select one field, and then select dashed in the border field.
  11. Click on the down arrow in the color box field, and then select dark pink for the new color from the color chart.
  12. Click on the Apply Changes button. The change to the border appears in the Object Preview box.

Note: After changing the border around the background, we still can't read the text since the background color is so similar to the text color. You can see this in screen shot below.


Click on the image to enlarge

Next we will change the color of the text in your personalbar.

  1. Select the Bookmarks text from inside your Personal bar.
  2. Select the Fonts tab.
  3. Click on the down arrow, and then select black for the new color from the color chart.
  4. Click on the Apply Changes button. The change to the border appears in the Object Preview box.


Click on the image to enlarge

Note: The text for both the Bookmarks and the Folder changes because they are both in the same class within a stylesheet. They are both folders. You can see this in the screen shot below.

  1. Select the Folder image from your Personal bar.
  2. Select the Padding/Margins tab.
  3. Enter 20 in the Padding field for the number of pixels that will be padded around the Bookmark and Folder images.
  4. Click on the Apply Changes button. The padding around the images appears in the Object Preview box.

Note: With these changes we increased the spacing between the text. You can see this in the screen shot below.


Click on the image to enlarge

Next we will change the graphic for the Bookmark and Folder images in your personalbar.

  1. Select the Bookmarks folder from your personalbar.
  2. Select the Colors/Images tab.
  3. Click on the down arrow in the Foreground-Image field, and then select URL from the list.
  4. Click on the Browse button to the right of the Foreground-Image section, and then select the file or URL for the new graphic.

    Note:  This is where you select an image that you previously created and that you want to use for the new bookmark and folder images in your personalbar.

  5. Click on the Apply Changes button. The new image appears in the Object Preview box.

Note: The personalbar has now been changed substantially from the default theme. You can see this in the screen shot below.


Click on the image to enlarge

After making some basic changes to the personalbar, we are now ready to try the main toolbar which is more complicated in terms of how it is designed and put together.

How to edit the main toolbar

Now that we've had some practice by making changes to the personalbar, this example takes you through a step-by-step procedure for making changes to the main toolbar. We will change the following elements of the toolbar:

Before we start it is important to talk briefly about why the main toolbar is more complicated than the personalbar. For a number of different reasons some parts of the Netscape 6 interface have been setup in a way that makes it more complicated to theme. The increased complexity is offset by gains in design and usability that make the tradeoffs worthwhile.

For example, the background of the toolbar, unlike the background of the personalbar, is made up of three different images. There are two end images plus the middle background image that are combined to produce a rounded edge effect on the main toolbar.

The Search button is also constructed of a number of different components. This is done so that it is easier to translate Netscape 6 into different languages. The back and forward buttons don't have any text associated with them, so there is no need to change them if the browser was translated into Japanese, but the Search button is text that would need to change to reflect the different language.

The Search button cannot be an image since it would not be possible to translate the text. Since it is text Netscape 6 can translate it to whichever language is being used. The button needs to be flexible to allow the text to expand or contract accordingly. So, the button has been broken up into small parts that expand or contract as the text does.

Note: This section of the tutorial includes references to images that were created specifically as examples to help with the creation of this Sample Theme. To be able to follow along with the following instructions, you will need this images on your computer.

To copy these images to your computer, do the following:

Once these images have been stored on your computer, you will be able to follow along with the instructions below.

Making changes to the background

To make changes to the background, do the following:

  1. Open the Theme Builder.
  2. Select the Toolbar tab.
  3. Select the first section of the toolbar background. The background image appears in the Object Preview box.

Note:  The background is broken up into three sections. To see how it is broken up, use the Borders button.


Click on the image to enlarge

  1. Click on the Background Image box to turn it off.
  2. Select the Colors/Images tab to make changes to the color of the background.
  3. Click on the down arrow in the color box field, and then select light gray for the new color from the color chart. The new background color appears in the Object Preview box.
  4. Select the second section of the toolbar background. The background image appears in the Object Preview box.
  5. Click on the Background Image box to turn it off.
  6. Select the Colors/Images tab to make changes to the color of the background.
  7. Click on the down arrow in the color box field, and then select light gray for the new color from the color chart. The new background color appears in the Object Preview box.


Click on the image to enlarge

  1. Select the third section of the toolbar background. The background image appears in the Object Preview box.
  2. Click on the Background Image box to turn it off.
  3. Select the Colors/Images tab to make changes to the color of the background.
  4. Click on the down arrow in the color box field, and then select light gray for the new color from the color chart. The new background color appears in the Object Preview box.


Click on the image to enlarge

To delete the borders around the location bar, do the following:

  1. Click on the Borders button in the upper right corner of the Theme Builder. The red borders that surround the different sections of the theme appear.
  2. Click on the image to the left of the location bar.
  3. Click on the Foreground Image box in the Object Layers section of the Theme Builder.
  4. Click on the Apply Changes button. The image no longer appears around the location bar.
  5. Click on the image to the right of the location bar.
  6. Click on the Foreground Image box in the Object Layers section of the Theme Builder.
  7. Click on the Apply Changes button. The image no longer appears around the location bar.


Click on the image to enlarge

Next we will delete the four sides of the box around the location bar.

  1. Click on the red line of the top part of the box around the location bar.

    Note:  You will need to do the following steps three times in order to delete the entire box around the location bar.

  2. Select the Borders tab.
  3. Enter 0 in all of the Borders field for the number of pixels around the border of the background image.
  4. Click on the Apply Changes button. The image no longer appears around the location bar.


Click on the image to enlarge

Making changes to the back button

The back button is made up of two elements. The image for the button and the image for the down arrow. Both of these need to be edited if you are going to change the image of the button. To make changes to the Back button, do the following:

  1. Open the Theme Builder.
  2. Select the Toolbar tab.
  3. Select the Back button image of the Toolbar. The Back button image appears in the Object Preview box.
  4. Select the Colors/Images tab to make changes to the image of the Back button image.
  5. Click on the down arrow to select the appropriate state for the button or image.
  6. Click on the Browse button to the right of the Foreground-Image field, and then select the file or URL for the new graphic.

    Note:   You need to browse the appropriate directory to select the new image that you want to use for the back button. This image and the others used in this section of the tutorial should be available on your hard drive where you extracted the sample_images.zip file.

  7. Select the new file. The new Back button image appears in the Object Preview box.
  8. Click on the Apply Changes button. The new graphic appears in the toolbar.


Click on the image to enlarge

Note:   You need to do this for each of the four states of the selected button or image. The states include, normal, hover, active, and disabled. You will see the final version of all the updated buttons and their states at the end of this exercise.

The second element needs to be edited. Next we will change the image for the down arrow. To make these changes, do the following:

  1. Open the Theme Builder.
  2. Select the Toolbar tab.
  3. Select the down arrow image from the back button on the Toolbar. The down arrow image appears in the Object Preview box.
  4. Select the Colors/Images tab to make changes to the image.
  5. Click on the down arrow to select the appropriate state for the button or image.
  6. Click on the Browse button to the right of the Foreground-Image field, and then select the file or URL for the new graphic.

    Note:   You need to browse the appropriate directory to select the new image that you want to use for the down arrow image.

  7. Select the new file. The new down arrow image appears in the Object Preview box.
  8. Click on the Apply Changes button. The new graphic appears in the toolbar.


Click on the image to enlarge

Note:   You need to do this for each of the four states of the selected button or image. The states include, normal, hover, active, and disabled. You will see the final version of all the updated buttons and their states at the end of this exercise.

Making changes to the stop button

Next we will change the stop image on your toolbar. To make these changes, do the following:

  1. Select the stop image from your toolbar.
  2. Select the Colors/Images tab.
  3. Click on the down arrow to select the appropriate state for the button or image.
  4. Click on the Browse button to the right of the Foreground-Image field, and then select the file or URL for the new graphic. You will need to browse the appropriate directory to select the new image that you want to use.
  5. Click on the Apply Changes button. The new graphic appears in the Object Preview box.


Click on the image to enlarge

Note:   You need to do this for each of the four states of the selected button or image. The states include, normal, hover, active, and disabled. You will see the final version of all the updated buttons and their states at the end of this exercise.

Making changes to the search and go buttons

You need to delete the background image of the search and go buttons before you change the button image. To make these changes to the search and go buttons, do the following:

  1. Open the Theme Builder.
  2. Select the Toolbar tab.

Note:   There are eight borders around the search button. Therefore, you will need to do the following steps for each of the eight borders of the button.

To delete the borders around the search button, do the following:

  1. Click on the Borders button in the upper right corner of the Theme Builder. The red borders that surround the different sections of the theme appear.
  2. Click on the first border to the left of the search button.
  3. Click on the Background Image box in the Object Layers section of the Theme Builder.
  4. Click on the Apply Changes button. The border no longer appears around the search button.
  5. Click on the next border of the search button.
  6. Click on the Background Image box in the Object Layers section of the Theme Builder.
  7. Click on the Apply Changes button. The border no longer appears around the search button.


Click on the image to enlarge

Note:  The image for both the search and go buttons changes, because they are both in the same class within a stylesheet. They are both buttons.

  1. Repeat these previous steps for the remaining six borders around the search and go buttons.

Next we will change the search and go buttons. To do this, do the following:

  1. Open the Theme Builder.
  2. Select the Toolbar tab.
  3. Select the search button in the toolbar. The search button image appears in the Object Preview box.

Note:  The image for both the search and go buttons changes, because they are both in the same class within a stylesheet. They are both buttons.

  1. Select the Colors/Images tab to make changes to the image of the search button.
  2. Click on the down arrow to select the appropriate state for the button or image.
  3. Click on the Browse button to the right of the Foreground-Image field, and then select the file or URL for the new graphic.

Note:   You need to browse the appropriate directory to select the new image that you want to use for the back button.

  1. Select the new file.
  2. Click on the Apply Changes button. The new search and go buttons appear in the Object Preview box.

Note:   You need to do this for each of the four states of the selected button or image. The states include, normal, hover, active, and disabled. You will see the final version of all the updated buttons and their states at the end of this exercise.


Click on the image to enlarge

Viewing the final version of the edited toolbar

If you were to go through the process of editing the entire toolbar, it would look as follows:


Click on the image to enlarge


Conclusion

Give us your feedback

The Theme Builder has been designed to help designers and developers create themes for Netscape 6. We want to make sure that the tool and this documentation is helpful. Now that you are more familiar with using the Theme Builder, let us know what you think about it and how we could improve it. This tool is still under development, and we will be releasing new versions soon. If you do have any thoughts or suggestions let us know about them, and we can try to include them in the next version.

The chameleon project can be contacted through the mailing list or the member list.
Copyright © 2000-2019. All rights reserved. Terms of Use & Privacy Policy.