Theme-It Getting Started Guide

Theme-It is designed to provide you with an easy way to change the colors and images used in your site design. Theme-It's interface helps you choose the right colors for your design by providing color suggestions, and allowing you to sample from another webpage or image.

The process for using Theme-It is simple and can be done at any point in your web development. Whether you just downloaded a template from a website and want to modify it, or you just want to give your existing website a new look and feel. Simply run Theme-It to make your necessary modifications, and the necessary files will be updated when you click Finish.

The following tutorial will guide you through using Theme-It to modify the colors and images used in your design.

What you need to start:

  • Theme-It
  • Dreamweaver CS3 or CS4
  • Dreamweaver site defined
    • Getting Started...

    Theme-It works on any webpage that can be opened in Dreamweaver. As long as Dreamweaver can display the colors and images in Design View, you will be able to use Theme-It to modify them. Here are a couple notes before you start.

    1. Files must be writable: Any file that Theme-It will end up modifying cannot be read-only. This would prevent the extension from making changes to the design. You should be alerted to this if any of the necessary files are set as read-only when you launch the interface.
    2. Specify your image editor: Go to Dreamweaver Preferences (Edit > Preferences) and choose the File Types / Editors category. Here you can specify an editor for the various image extensions (.jpg, .png, .gif., etc.) that may be used on your site. Make sure you specify the editor you like to use. Once specified, you can quickly open that image in an editor from within Theme-It.
    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.

    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.
    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.
       
      NOTE: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.

     
    NOTE:Width and Height will only be available for images that are not defined by CSS.
    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.
    Feedback on this tutorial?

    If you did not find this helpful or you are stuck on a particular step, click here to let us know what we can do to improve this tutorial.

      • Required *
      • Invalid format.Please enter a full email address
        Please provide a comment
      • Security Code
        Entered text does not match; please try again

    This form was built using CSS Form Builder.