File:  [mozdev] / chameleon / www / documentation / theme-builder-help.html
Revision 1.16: download - view: text, annotated - select for diffs - revision graph
Thu Jan 11 18:46:33 2001 UTC (19 years, 4 months ago) by petejc
Branches: MAIN
CVS tags: HEAD, CHAMELEON_0_02B_BRANCH
adding annotations

--pete

<A name="themehelp"></A>
<h2>Theme Builder Documentation</h2>

<i><font size=-1>
********************************************<br>
This documentation is provided in the tool itself as well as on-line.<br>
If you are reading this documentation in the tool and are not connected to<br>
the Internet, the images included as examples will not appear in the text.<br>
********************************************
</font></i>

<!-- table of contents -->
<p><font size="+1"><b>Table of Contents</b></font>

<!-- introduction -->
<p><b>Introduction</b>
<ul>
<li><A href="#background">About Theme Builder</A>
<li><a href="#basics">Overview of themes</a>
<li><A href="#who">Who should use the tool</a>
<li><A href="#how">How the Theme Builder was created</a>
</ul>

<!-- theme design -->
<p><b>Overview of theme design</b>
<ul>
<li><a href="#limits">Limitations to theme design</a>
<li><a href="#limits_of_tool">Limitations of the Theme Builder</a>
<li><a href="#guidelines">Theme design guidelines</a>
</ul>

<!-- tool basics -->
<p><b>Tool basics</b>
<ul>
<li><a href="#installation">Installing the Theme Builder</a>
<li><a href="#saving">How to Save and Load a theme</a>
<li><a href="#features">Other tool features</a>
</ul>

<!-- creating a theme -->
<p><b>Creating a theme</b>
<ul>
<li><a href="#components">Where to start</a>
<li><a href="#personalbar">How to edit the personalbar</a>
<li><a href="#mockup">How to edit the main toolbar</a>
</ul>

<!-- conclusion -->
<p><b>Conclusion</b>
<ul>
<li><a href="#feedback">Give us your feedback</a>
</ul>
<!-- end table of contents -->


<!-- // -->
<p><hr>
<h3><A name="introduction"></A>Introduction</h3>

<b><a name=background></a>About Theme Builder</b>

<p>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. 

<p>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.

<p>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.
</p>

<h4><a name="basics"></a><b>Overview of themes</b></h4>

<p><!-- http://home.netscape.com/themes/info.html -->
The term <i>theme</i> 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.

<p>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.

<p>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.

<h4><a name=who></a>Who should use Theme Builder</h4>

<p>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.  

<p>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.

<h4><a name=how></a>How the Theme Builder was created</h4>

<p>The Theme Builder was created as an Open Source project hosted at 
<a href="http://chameleon.mozdev.org/">chameleon.mozdev.org</a>. The main 
development was undertaken by <a href="http://www.collab.net">CollabNet</a>, 
and it has benefited from the development 
help of many different programmers, testers, and interested users in the Mozilla 
community.

<p>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 <a href="http://www.mozilla.org">mozilla.org</a> 
that allows the tool to run on the Mac, Windows and Unix platforms.


<!-- // -->
<p><hr>
<h3>Overview of theme design</h3>

<h4><a name="limits">Limitations to theme design</a></h4>

<p>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.

<p>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. 

<h4><a name="limits_of_tool">Limitations of the Theme Builder</a></h4>

<p>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.

<p>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 <i>tweak</i> it to add your final design elements to polish and 
refine your design.

<p>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.

<h4><a name="guidelines">Theme design guidelines</a></h4>

<p>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.

<p>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.

<!-- // -->
<p><hr>
<h3>Tool basics</h3>

<a name="installation"></a><h4>Installing the Theme Builder</h4>

<p>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 
<a href="http://home.netscape.com/themes/builder.html">http://home.netscape.com/themes/builder.html</a>.

<p>After you install the Theme Builder, do the following:
<ol>
<li>Close Netscape 6, and then restart it. 
<li>Click on <b>Task</b> from the Menu bar. 
<li>Click on <b>Theme Builder</b>, and then click on <b>Finish Theme Builder Install</b>. 

<p><b>Note:&nbsp; </b>You only need to do this once. 
</ol> 

<a name="starting"></a><h4>Starting the Theme Builder</h4>

<p>After installing the Theme Builder you need to start it.
To start the Theme Builder, do the following:</p>
<ol>
<li>Start Netscape 6.
<li>Click on <b>Task</b> from the Menu bar. 
<li>Click on <b>Theme Builder</b> from the Menu bar, and then click on <b>Theme Builder</b>. 
</ol> 

<h4><a name="uninstall">How to uninstall Theme Builder 1.0</A></h4>
<p>To uninstall the theme builder do the following:</p>
<ol>
<li>Select <b>Theme Builder</b> from the Tasks menu, and then 
select <b>Uninstall Theme Builder</b>.
<li>Click on the <b>OK</b> button.
</ol>

<a name="saving"></A><h4>How to save and load a theme</h4>

<p>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.

<p>To save a theme, do the following:</p>

<ol>
<li>Click on <b>File</b> from the Menu bar, and then click on 
<b>Save As...</b> from the Menu bar.
<li>Enter in a name for the new theme in the <b>Theme Name</b> field.
<li>Click on the <b>OK</b> button to save your new theme.
</ol> 

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

<ol>
<li>Click on <b>File</b> from the Menu bar.
<li>Click on <b>Load</b> from the Menu bar.
<li>Select the new theme from the list.
</ol>

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

<a name="features"></a><h4>Other tool features</h4>

<p>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.

<p>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 <a href="http://chameleon.mozdev.org">chameleon.mozdev.org</a>.</p>



<!-- // -->
<p><hr>
<h3>Creating a theme</h3>

<h4><A name="components">Where to start</A></h4>

<p>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.

<p>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.

<h4><A name="personalbar">How to edit the personalbar</A></h4>

<p>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.

<ol>
<li>Open the Theme Builder.
<li>Select the <b>Personalbar</b> tab. 
</ol>

<p><b>Note:</b> 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.</p>

<p><a href="http://chameleon.mozdev.org/images/documentation/shot2.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/shot2_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>

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

<p><b>Notes:</b></p>
<ol>
<li>You might have to click on the <b>Apply Changes</b> button 
twice in order for the changes to take effect.

<li>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.</p>
</ol>

<p><a href="http://chameleon.mozdev.org/images/documentation/pbar1.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/pbar1_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>

<ol>
<li>Select the <b>Border</b> tab.
<li>Enter <b>4</b> in the <b>Border</b> field for the number of pixels for the width 
of the border around the background element. 
<li>Click on the <b>down arrow</b> in the <b>select one</b> field, and 
then select <b>dotted</b> for the new border.
<li>Click on the <b>down arrow</b> in the color box field, and 
then select <b>orange</b> for the new color from the color chart. 
<li>Click on the <b>Apply Changes</b> button.
</ol>

<p><b>Note:</b> &nbsp;
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. 
 
<p><a href="http://chameleon.mozdev.org/images/documentation/pbar2.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/pbar2_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>

<ol>
<li>Enter <b>2</b> in the <b>Top</b> row field for the number of pixels around the 
border of the background image.
<li>Click on the <b>down arrow</b> in the <b>select one</b> field, and then 
select <b>dashed</b> in the border field.
<li>Click on the <b>down arrow</b> in the color box field, and then 
select <b>blue</b> for the new color from the color chart. 
<li>Click on the <b>Apply Changes</b> button.
The change to the border appears in the <b>Object Preview</b> box.
<li>Enter <b>2</b> in the <b>Right</b> row field for the number of pixels around the 
border of the background image.
<li>Click on the <b>down arrow</b> in the <b>select one</b> field, and then 
select <b>dashed</b> in the border field.
<li>Click on the <b>down arrow</b> in the color box field, and then 
select <b>orange</b> for the new color from the color chart.
<li>Click on the <b>Apply Changes</b> button.
The change to the border appears in the <b>Object Preview</b> box.
<li>Enter <b>2</b> in the <b>Bottom</b> field for the number of pixels around the 
border of the background image.
<li>Click on the <b>down arrow</b> in the <b>select one</b> field, and then 
select <b>dashed</b> in the border field.
<li>Click on the <b>down arrow</b> in the color box field, and then 
select <b>dark pink</b> for the new color from the color chart.
<li>Click on the <b>Apply Changes</b> button.
The change to the border appears in the <b>Object Preview</b> box.
</ol>

<p><b>Note:</b> 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.</p>

<p><a href="http://chameleon.mozdev.org/images/documentation/shot3.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/shot3_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>

<p>Next we will change the color of the text in your personalbar.</p>

<ol>
<li>Select the <b>Bookmarks</b> text from inside your Personal bar.
<li>Select the <b>Fonts</b> tab.
<li>Click on the <b>down arrow</b>, and then select <b>black</b> for the new color from the 
color chart.
<li>Click on the <b>Apply Changes</b> button.
The change to the border appears in the <b>Object Preview</b> box.
</ol>

<p><a href="http://chameleon.mozdev.org/images/documentation/shot4.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/shot4_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>
</ol>

<p><b>Note:</b> 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.</p>

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

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

<p><a href="http://chameleon.mozdev.org/images/documentation/shot5.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/shot5_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>

<p>Next we will change the graphic for the <b>Bookmark</b> and <b>Folder</b> images in 
your personalbar.</p>

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

<p><b>Note:</b> &nbsp;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. </p>

<li>Click on the <b>Apply Changes</b> button.
The new image appears in the <b>Object Preview</b> box.
</ol>

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

<p><a href="http://chameleon.mozdev.org/images/documentation/shot6.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/shot6_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>

<p>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.


<h4><a name="mockup">How to edit the main toolbar</a></h4>
<p>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:

<ul>
<li>Background</li>
<li>Back button</li>
<li>Stop button</li> 
<li>Search button</li> 
</ul>

<p>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.

<p>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.  

<p>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.  

<p>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.

<p><i>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.</i>

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

<ul>
<li><a href="ftp://ftp.mozdev.org/pub/chameleon/sample_images.zip">Download</a> the ZIP
archive containging images.
<li>Save the <tt>sample_images.zip</tt> file to your computer
<li>Extract the images from this file.  (On Windows a common tool to use for this is
WinZip, on Mac you should be able to use StuffIt Expander)
<li>Remeber the location on your hard drive where these images are saved.
</ul>

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

<h4><a name="mockup-background">Making changes to the background</a></h4>
<p>To make changes to the background, do the following: </p>

<ol>
<li>Open the Theme Builder.
<li>Select the <b>Toolbar</b> tab. 
<li>Select the first section of the toolbar background. 
The background image appears in the <b>Object Preview</b> box.
</ol>

<p><b>Note: &nbsp;</b>The background is broken up into three sections.
To see how it is broken up, use the <b>Borders</b> button.</b></p>

<p><a href="http://chameleon.mozdev.org/images/documentation/backgr1.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/backgr1_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>

<ol>
<li>Click on the <b>Background Image</b> box to turn it off.
<li>Select the <b>Colors/Images</b> tab to make changes to the color of the background.
<li>Click on the <b>down arrow</b> in the color box field, and then 
select <b>light gray</b> for the new color 
from the color chart.
The new background color appears in the <b>Object Preview</b> box.
<li>Select the second section of the toolbar background. 
The background image appears in the <b>Object Preview</b> box.
<li>Click on the <b>Background Image</b> box to turn it off.
<li>Select the <b>Colors/Images</b> tab to make changes to the color of the background.
<li>Click on the <b>down arrow</b> in the color box field, and then 
select <b>light gray</b> for the new color 
from the color chart.
The new background color appears in the <b>Object Preview</b> box.
</ol>

<p><a href="http://chameleon.mozdev.org/images/documentation/backgr2.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/backgr2_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>
</ol>

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

<p><a href="http://chameleon.mozdev.org/images/documentation/backgr3.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/backgr3_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>
</ol>

<p>To delete the borders around the location bar, do the following:</p>
<ol>
<li>Click on the <b>Borders</b> button in the upper right corner of the Theme Builder.
The red borders that surround the different sections of the theme appear.
<li>Click on the image to the left of the location bar.
<li>Click on the <b>Foreground Image</b> box in the Object Layers section of the
Theme Builder.
<li>Click on the <b>Apply Changes</b> button.
The image no longer appears around the location bar.
<li>Click on the image to the right of the location bar.
<li>Click on the <b>Foreground Image</b> box in the Object Layers section of the
Theme Builder.
<li>Click on the <b>Apply Changes</b> button.
The image no longer appears around the location bar.
</ol>

<p><a href="http://chameleon.mozdev.org/images/documentation/nobar1.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/nobar1_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>
</ol>

<p>Next we will delete the four sides of the box around the location bar.</p>
<ol>
<li>Click on the red line of the top part of the box around the location bar. 
<p><b>Note:</b>&nbsp; You will need to do the following steps three times in order to 
delete the entire box around the location bar.</p>

<li>Select the <b>Borders</b> tab.
<li>Enter <b>0</b> in all of the <b>Borders</b> field for the number of pixels 
around the border of the background image. 
<li>Click on the <b>Apply Changes</b> button.
The image no longer appears around the location bar.
</ol>

<p><a href="http://chameleon.mozdev.org/images/documentation/nobar2.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/nobar2_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>
</ol>

<h4><a name="mockup-backbutton">Making changes to the back button</a></h4>
<p>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 <b>Back</b> button, do the following: </p>
<ol>
<li>Open the Theme Builder.
<li>Select the <b>Toolbar</b> tab. 
<li>Select the <b>Back</b> button image of the Toolbar. 
The <b>Back</b> button image appears in the <b>Object Preview</b> box.
<li>Select the <b>Colors/Images</b> tab to make changes to the image of the 
<b>Back</b> button image.
<li>Click on the <b>down arrow</b> to select the appropriate state for the button
or image.
<li>Click on the <b>Browse</b> button to the right of the <b>Foreground-Image</b> 
field, and then select the <b>file</b> or <b>URL</b> for the new graphic.
<p><b>Note: &nbsp;</b> 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.</p> 
<li>Select the new file. 
The new <b>Back</b> button image appears in the <b>Object Preview</b> box.
<li>Click on the <b>Apply Changes</b> button.
The new graphic appears in the toolbar.
</ol>

<p><a href="http://chameleon.mozdev.org/images/documentation/backbutton.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/backbutton_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>

<p><b>Note:</b> &nbsp; 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.

<p>The second element needs to be edited. Next we will change the image for the 
down arrow. To make these changes, do the following:</p>
<ol>
<li>Open the Theme Builder.
<li>Select the <b>Toolbar</b> tab. 
<li>Select the <b>down arrow</b> image from the back button on the Toolbar. 
The <b>down arrow</b> image appears in the <b>Object Preview</b> box.
<li>Select the <b>Colors/Images</b> tab to make changes to the image.
<li>Click on the <b>down arrow</b> to select the appropriate state for the button
or image.
<li>Click on the <b>Browse</b> button to the right of the <b>Foreground-Image</b> 
field, and then select the <b>file</b> or <b>URL</b> for the new graphic.
<p><b>Note: </b>&nbsp; You need to browse the appropriate directory to select the 
new image that you want to use for the down arrow image.</p> 
<li>Select the new file. 
The new <b>down arrow</b> image appears in the <b>Object Preview</b> box.
<li>Click on the <b>Apply Changes</b> button.
The new graphic appears in the toolbar.
</ol>

<p><a href="http://chameleon.mozdev.org/images/documentation/downarrow.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/downarrow_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>

<p><b>Note:</b> &nbsp; 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.


<h4><a name="mockup-stopbutton">Making changes to the stop button</a></h4>
<p>Next we will change the stop image on your toolbar.
To make these changes, do the following:</p>
<ol>
<li>Select the stop image from your toolbar.
<li>Select the <b>Colors/Images</b> tab.
<li>Click on the <b>down arrow</b> to select the appropriate state for the button
or image.
<li>Click on the <b>Browse</b> button to the right of the <b>Foreground-Image</b> field, 
and then select the <b>file</b> or <b>URL</b> for the new graphic.
You will need to browse the appropriate directory to select the 
new image that you want to use.
<li>Click on the <b>Apply Changes</b> button.
The new graphic appears in the <b>Object Preview</b> box. 
</ol>

<p><a href="http://chameleon.mozdev.org/images/documentation/stop1.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/stop1_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>

<p><b>Note:</b> &nbsp; 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.

<h4><a name="mockup-search">Making changes to the search and go buttons</a></h4>
<p>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:

<ol>
<li>Open the Theme Builder.
<li>Select the <b>Toolbar</b> tab.
</ol>

<p><b>Note:</b> &nbsp; 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.  
 
<p>To delete the borders around the search button, do the following:</p>
<ol>
<li>Click on the <b>Borders</b> button in the upper right corner of the Theme Builder.
The red borders that surround the different sections of the theme appear.
<li>Click on the first border to the left of the search button.
<li>Click on the <b>Background Image</b> box in the <b>Object Layers</b> section of the
Theme Builder.
<li>Click on the <b>Apply Changes</b> button.
The border no longer appears around the search button.
<li>Click on the next border of the search button.
<li>Click on the <b>Background Image</b> box in the <b>Object Layers</b> section of the
Theme Builder.
<li>Click on the <b>Apply Changes</b> button.
The border no longer appears around the search button.
</ol>

<p><a href="http://chameleon.mozdev.org/images/documentation/search1.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/search1_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>
<p><b>Note:</b> &nbsp;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.</p>

<ol>
<li>Repeat these previous steps for the remaining six borders around the search and 
go buttons.
</ol>

<p>Next we will change the search and go buttons. To do this, do the following:</p>
<ol>
<li>Open the Theme Builder.
<li>Select the <b>Toolbar</b> tab. 
<li>Select the <b>search</b> button in the toolbar. 
The search button image appears in the <b>Object Preview</b> box.
</ol>

<p><b>Note:</b> &nbsp;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.</p>

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

<p><b>Note: &nbsp;</b> You need to browse the appropriate directory to select the 
new image that you want to use for the back button.</p> 

<ol>
<li>Select the new file. 
<li>Click on the <b>Apply Changes</b> button.
The new search and go buttons appear in the <b>Object Preview</b> box.
</ol>

<p><b>Note:</b> &nbsp; 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.

<p><a href="http://chameleon.mozdev.org/images/documentation/search1.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/search1_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>

<h4><a name="mockup-final">Viewing the final version of the edited toolbar</a></h4>
<p>If you were to go through the process of editing the entire toolbar,
it would look as follows:</p>
<p><a href="http://chameleon.mozdev.org/images/documentation/final.gif" border=0>
<img src="http://chameleon.mozdev.org/images/documentation/small/final_small.gif" width="300" height="216" border="0"></a><br>
<i>Click on the image to enlarge</i><br><br>


<!-- // -->
<p><hr>
<h3>Conclusion</h3>

<a name="feedback"></a><h4>Give us your feedback</h4>

<p>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.
</ol>

<?php require(ANNOTATE); ?>

FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>