Customization Guide - Simple guide to customizing SmartWebby templates

Follow these simple steps to customize SmartWebby templates.

• Step 1: Defining the site in Dreamweaver
• Step 2: Customizing the Header with your Site Name and Tag-line
• Step 3: Customizing Text Links
• Step 4: Customizing the footer with your site details
  
• Step 5: Adding new pages
• Step 6: Customizing text - Changing fonts using CSS Styles

Click here to view our updated customization guide with screen shots. You'll also find a wide variety of web design tips and tricks in our Web Design Guide.

Step 1: Defining the site in Dreamweaver

• Define your site in Dreamweaver by clicking on Site/New Site.
  
• Fill in your site details in the Site Definition panel. Enter your site name and use the folder icon to browse to the folder where your site files reside on your computer. Once you have defined your site, click on Done in the Site Definition panel.
• You will now see the contents of template zip file.

Step 2: Customizing the Header with your Site Name and Tag-line

• Open template.png (The .png can be opened only in Fireworks 4.0 and higher versions)
• Double Click on Your Site Name and change the site name. You can also adjust the font type, size and color here.
• Repeat the above step for the tag-line if it exists.
• Once the Site Name and Tag-line have been modified it is ready to be exported. For this:
  • Open the Layers panel by clicking on Window > Layers.
  • In the Layers panel, open the Web layer by clicking on the eye icon next to the layer. You will now be able to see all the slices. Right click on the slice found over the 'site name' and click on export selected slice.
  • Export the slice to the images folder in the local site folder and overwrite the existing image.
  • Once the image is exported it will automatically be reflected in the site.

Please note: The size of the image should not be changed (unless you know how to do it without affecting the layout). Make sure the 'Site Name' fits within the slice. You can adjust the text size if the name is too long.

Step 3: Customizing Text Links

1. The text links can be customized in the Dreamweaver Template itself. All you need to do is click on the link and modify it.
2. Save the changes. When you save a template in Dreamweaver, a pop-up window will appear that will ask you if you want to update pages. Click on Update. When all the pages are updated click on Close.
3. To change the color of the text links or its hover effect you will need to do it in the CSS Styles Sheet . Click here to learn how

Deleting extra links

If you'd like to delete unwanted buttons or links, select the button or link in the Dreamweaver template and delete it.

Step 4: Customizing the footer with your site details

• Open template.dwt (in the Templates folder).
• Edit the footer info with your site details.
• Save the changes. When you save a template in Dreamweaver, a pop-up window will appear where you will be asked if you want to update pages. Click on Update. When all the pages are updated click on Close.

Step 5: Adding new pages

• Open Dreamweaver
• Click on File/New from Template
• Select template and click on the Select button
• Once the template has been applied to the new page click on File/Save to save the new page.
• Add content in the editable region called content.

Step 6: Customizing text - Changing fonts using CSS Styles

We've used external style sheets to manage the text used in the site. Changing font properties has never been easier. Follow these steps to customize the text used in the template.

• Open styles.css in Dreamweaver
• The following styles are common to most of the templates:
  • title - used for the titles
  • subtitle - used for the subtitles
  • text - used for the content
  • footer - used for the footer
  • links - used for text links
  • menutext - used for text in the menu
• Choose the style you want to change and click on Edit. In the Style Definition Pop-Up Window change the font type, size, weight etc. and save the changes.
• Once the style is saved it will automatically be reflected in the site.
• To change the hover effect (the change in color on Mouse Over for a link style) of the style, since the hover effects are not visible in the stylesheet (Dreamweaver 4 and below), click on the edit style sheet button ('yellow pen on paper' icon), select the style sheet and the edit the hover effect.

Using Styles to format text

1. Open the CSS Styles panel by clicking on Windows/CSS Styles. You will see a list of all the styles created for the site.
2. To format text, all you need to do is select the text you want to format and choose the appropriate style from the CSS Styles panel. E.g. Choose the text for the title of the page and select the 'title' style. You will now see that the text is formatted with the 'Title' style.

Back to Top

© www.smartwebby.com. License Agreement. If you have more questions please email us at templates@smartwebby.com.