Getting Started with Theme-It

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Design Extender, CSS, Design, Dreamweaver

0 ratings | Sign in to rate this tutorial | View comments

next section

Requirements

You will need the following items before starting this tutorial:

1. Theme-It
   
2. Dreamweaver CS3 or later
   
3. Dreamweaver site defined

next section

Launch the Interface

With the page you wish to modify open in Dreamweaver, you can launch the interface to start modifying your theme.

The Theme-It interface can be launched from the following locations:

1. From the Insert menu, choose WebAssist > Theme-It.
   
2. From the Modify menu, choose Theme-It.
   
   
   
   
3. WebAssist category of the Insert panel/toolbar.
   
   

next section

Changing Design Colors

Theme-It is a two tabbed interface. The first tab allows you to change the colors used throughout your design.

Changing Colors


The Manage Colors interface displays all the colors used by your design. Colors are grouped by elements that use that color, so you can easily change all instances of a color with one click.

1. To change a particular color, locate the color from the list.
   Use the menu list next to each color to see the elements that are using that color.
   
   
   
   
2. Using the color swatch, sample any color you wish to change those colors to. Or, enter the hexadecimal color code you'd like to use.
   The preview will instantly update with the new color.

Using the Color Suggestions


The color suggestions are provided to give you ideas on different colors that would work with your design. All suggestions are based on a Base color which you should specify first.

1. Select the Base color swatch and enter a base color that you want to see suggestions for.
   
   
   
   
2. From the menu list, choose the type of suggestions you wish to see.
   In most cases, you will want to try all 5 different options to see what provides you with suggestions that work for you.
   
3. Once you find suggestions you like, use the color swatches currently used in your design to sample the suggested colors and make changes.

Using the Color Importer


The Color Importer allows you to import an image or webpage that contains colors you would like to use in your design.

1. Choose the Color Importer tab.
   
   
   
   
2. In the Import field, enter the URL for a website you wish to import. Or, choose the browse icon to specify an image you'd like to sample colors from.
   
3. Click Apply to display the website or image in the Preview area.
   
4. From the list of colors used in your design, select the swatch you wish to change.
   
5. From the preview you imported, sample the color you would like that color to change to.
   
6. To see the change applied, click back to the Preview tab.

next section

Changing your Design Images

The Manage Images tab allows you to see all the images currently be used by the page you are working on. This will display any images inserted onto your page, as well as images referenced within CSS styles or includes.

Theme-It is directly tied into your preferred image editor such as Photoshop or Fireworks. This will allow you to easily modify those images and then quickly jump back to Theme-It to see how that changes works with your other modifications.

1. Chose the Manage Colors tab.
   
2. From the list of images, locate the image you wish to modify.
   
   In many cases, the image previewed is much smaller than what is seen on your page because the image has a repeat value applied to it.
   
   
3. If you wish to edit this image in your preferred editor, click the Edit icon above the image.
   
   
   
   In this example, Photoshop is defined as my preferred image editor, yours might say something different.
   
4. After making changes in your preferred editor, save the changes overwriting the original image file.
   
5. Return to Dreamweaver, the Theme-It Manage Colors interface will still be open.
   
6. Choose the Refresh Image button to update the preview with the new image.
   
   
   
   
7. To view the image in a browser, click the Preview icon.
   
   

Changing Images and Image Properties


The Manage Colors tab will display the image properties applied to the images on your page. This includes width and height, alignment, alt text, repeat values, etc.

1. If you wish to change an image to a different image, select the URL browse icon and select the new image.
   You can also specify the full path to the image you wished to use.
   
2. Click the Refresh Image button to update the preview.
   
3. Change any other image properties from the details provided.
   
   

Finish: Updating your page

Once you have completed modifying your colors and images, you are ready to apply your changes to your page. Theme-It will update all the necessary pages and styles once you click Finish. Keep in mind that any of pages that are using the same styles will also be affected by this change.

1. Click Finish to close the Theme-It interface and apply your changes.
   Theme-It will update all the pages that you applied changes to. This may take a while.
   
2. Once finished, save your page by pressing Ctrl (Cmd) + S.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

0 ratings | Sign in to rate this tutorial