Customization Guide - Simple guide to customizing SmartWebby templates
Follow
these simple steps to customize SmartWebby templates.
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
- The text links can be customized in the Dreamweaver Template itself. All
you need to do is click on the link and modify it.
- 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.
- 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
- Open
the CSS Styles panel by clicking on Windows/CSS Styles. You will see a
list of all the styles created for the site.
- 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.
© www.smartwebby.com.
License Agreement. If you have more
questions please email us at templates@smartwebby.com.