Customize the looks

Customize Design Mode gives you an incredible point and click power to totally customize the look of any website theme selected – beyond recognition.

Just point and click with your mouse to change colors, design images and more.

Even better, your software even takes care of the images sizes to ensure they will automatically fit your selected website theme!

You won’t believe the web-design power we have given your mouse.

An Undo function allows you to test a new look before applying it.

You can also easily restore the original look of the Website theme by simply selecting the theme again.

(Note: You can not undo design image changes, but you can always restore the original website design images)

!
websitecolor

Website Colors, Text Colors

These are the colors used in your website. Click on a website color in the to Website or text color you want to change - then select a new color.

Select the color by clicking on the color palette provided.

To change text overall text colors, click on "text colors", then make your choice by clicking on the color you want to change.

previewarea

Reassign colors

In the preview window area click on a color you want to change.

A menu opens.

Select the appropriate item, such as background color or text color. As you move your mouse over the item, a color swatch appears above the menu, to help you select the correct item. Click on the item and select one of the colors in the color selector which comes up.

add-color

Add more colors

Click on the Add color button below the Website Colors display. Once you have selected a color it will be added to the Website colors, and you can apply it to the website items by selecting the item and then picking the color (see .

Color Schemes

This function allows you to quickly create a new website color scheme for your website.

Click on the "Colorpicker" button.

Select the main color you want to assign to your website.

ShopFactory automatically creates a number of color schemes for you, which you can apply to your website simply by clicking on them.

This action can be undone. 

Edit an existing Design image

Design images are images which determine the look and feel of a website. You can change most Design images easily in Designer.

Click on the Design image you want to change in the preview window. (Page and product images cannot be changed in Designer).

A small menu pops up.

Select edit image for the appropriate item. On mouse over the image is displayed above the menu, to help you with the selection.

The image dialog opens, allowing you to change the image.

You can delete or replace the image, or edit it with your favorite image editor.

The 3D3 application will even help you to resize the image you select to make it fit properly.

Image changes cannot be undone. However the original image from your chosen theme can be restored.

Design images have a fixed size, which you can not change. ShopFactory will automatically adjust images which are too large to the required size and even help you crop an image to achieve this.

Note: Image changes can not be undone automatically.

Add a design image

Images can be added to an area in much the same way as editing an existing image. Click on the area you want to add an image to in the preview window.

If the Add image option appears, you can add an image.

Note: Image changes can not be undone automatically.

Customize the Navigation look

You can change the look of the Index 1 and Index 2 Navigation just as easily as changing other colors and design images. Simply click on an index and select the item you want to change. Indexes have a left, center and right area which you can adjust by adding colors or design images. The center area always contains the text.

The Mouse-Over colors refer to the look of a button when the mouse cursor is on top of it – making it easy to create great looking dynamic menus.

Import and export color scheme

If you like a color scheme you have created, it can be exported for use in another project.

To export, click on and give the scheme a descriptive file name.

To import, click on and select the file that your color scheme was exported to.

You find these buttons by scrolling the bottom of the color schemes provided.

Undo your changes

Don't like the new color you selected? Simply undo your change.

The undo and redo functions allow you to experiment with your website's color scheme until you are happy with it.

Image changes in designer mode cannot be undone, but you can usually restore the original image which came with the selected theme in the image selection dialog.

Note: Image changes can not be undone automatically.

Saving your changes

Changes you make will not be applied to your website until you save them.

Your color changes and frameset adjustments will be saved using anyone of the following methods:

  • Clicking on the Save button in the main toolbar.
  • Exit Designer mode and clicking on OK in response to the “Apply changes?” message box.

Save as new Website Theme

Once you have customized a Website Theme, you can save it by clicking on Designer > Save as new Template. (However the image displayed will still be the one from the original template until you manually replace it in the website theme folder).

Restore Website Theme

To restore a website theme, simply reselect it under Properties > Select Website Theme.

Navigating links in the Preview window

When you change website colors, other pages may be affected as well. You can navigate to all parts of your website to view the effect a color change will have.

To navigate, press the Ctrl key on your keyboard whilst clicking on the link.

Change the preview area size

The look of your website may vary slightly depending on the resolution of the screen it is being viewed on.

You can view how your website looks in common screen resolutions by selecting it from the drop-down list box in the bottom-right hand corner of Designer Mode.

The scrollable size of the preview window will reflect the dimensions of the screen resolution chosen.

This will not change the width of the created website.