close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Getting Started with Theme-It

Tutorial created by Team WebAssist

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

rating

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.

arrow downRequirements

You will need the following items before starting this tutorial:

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

arrow downLaunch 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.

arrow downChanging 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.

arrow downChanging 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.

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.

arrow downFinish: 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.

arrow downReviews 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.

Sign in to add comments
rating

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.