Customization Guide

Simple guide to customizing SmartWebby templates

Follow these simple steps to customize your purchased SmartWebby template.

• Step 1: Defining the site in Dreamweaver
• Step 2: Customizing the Header with your Site/Company Name [updated]
• Step 3: Customizing Links [updated]
• Step 4: Customizing the footer with your site details
• Step 5: Modifying existing pages and adding new pages [updated]
• Step 6: Customizing text - Changing fonts using CSS Styles
• Customizing the drop-down menus [updated]
• Customizing the news scroller
• Customizing the swap images

You'll also find a wide variety of web design tips and tricks in our Web Design Guide. For more questions and queries please don't hesitate to email us at templates@smartwebby.com.

---

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/Company Name

• Open template.png (The .png can be opened only in Fireworks 4.0 and higher versions)
• Double Click on Your Site/Company Name and change the company name. You can also adjust the font type, size and color here.
• Repeat the above step for the company slogan if it exists.
• Once the Site/Company Name and Slogan have been modified it is ready to be exported. For this:
  1. Open the Layers panel by clicking on Window > Layers.
  2. 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 'company name' and click on export selected slice.
  3. Export the slice to the images folder in the local site folder and overwrite the existing image.
  4. 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/Company name' fits within the slice. You can adjust the text size if the name is too long.

In case you are sure that the changes in dimensions cannot be avoided please do the following:

• Extend the size of the company name or site name slice to fit your changes and export the image to the images folder.
• Now open the dreamweaver template and click on the image (which will be distorted due to the changes).
• In the properties window you will find that the width dimension is in bold and there will be a lock anchor connecting the two dimensions. Just click on it and it will resize you image.
• Finally save and update your template and your changes will take effect.
  

---

Step 3: Customizing Links

Some of our templates have graphic links while others have text links.

For Customizing Graphics Links:

• Open template.png in Fireworks.
  
• Double Click on the links, to open the text editor (for Fireworks 4) or to edit in place (for Fireworks MX +). If the links are grouped right click on the links and click on Ungroup to edit the individual links. Make your changes and repeat the step for each of the links.
  
• Once all the links have been modified it is ready to be exported. If the layer panel is not visible in Fireworks, open the Layer panel by clicking on Window/Layers. In the layer panel, open the Web layer by clicking on the eye icon next to the layer. You will now be able to see the slices for all the link (a green translucent layer will appear over the images). Right click on each of the slices and click on export selected slice. Export the slice to the images folder in the local site folder and overwrite the existing image.
  
  
• Exporting the rollover images
  • If the Frames panel is not visible in Fireworks, open the panel by clicking on Window/Frames. View the second Frame by clicking on Frame 2. Here you will see the rollover buttons.
  • Again, change the names of the links by following the same step given above.
  • Export the slices again, except this time when you export the links add '_f2' to the name of the slice. All the rollovers have an '_f2' added to the name. E.g. The rollover image for link1.gif will be link1_f2.gif, link2.gif will be link2_f2.gif etc.
    Important: The slices have to be exported from Frame 2 and the names have to have an '_f2' added to it.

Once the images are exported they will automatically be reflected in the site.

To add new rollover button links

• We recommend you add new button links after you finish all the other changes to your site, especially color changes, and have tested out your site.
  
• Make a copy of the final template.png file and open it in Fireworks.
  
• Change the text for one or more of the rollover buttons for both the first and second frames (as described above).
  
• Now export the images as instructed above, except don't over write any of the existing button images, give new names to your buttons and export them (e.g. link5.gif and link5_f2.gif).
  
  
• Open the dreamweaver template file (template.dwt) in Dreamweaver in the Design View.
  
• Click on the button link which is closest to where you want to place your new rollover button. In the tag inspector bar at the bottom of your dreamweaver window you will see the image tag highlighted <img>. Next to it you will find the <a> tag and most probably a <td> tag. Click on the <td> tag in the 'tag inspector' and view your page to check if it contains only one single button (similarly check the <tr> tag and upwards until you know upto which tag contains only the single button). Now (assuming that the <tr> tag was the highest that contained only the button), click on the <tr> tag in the 'tag inspector' to select only the single button code.
  
• Press Ctrl+C to copy the code.
  
• Now click the button (<img> tag highlighted) and press your right or left arrow (no tag highlighted).
• Now press Ctrl+V to paste the copied code. Another button will appear. You can edit either one of them to place your new button.
• Go into the code view and change the <a> tag's name, href, onMouseOver and src properties to reflect your new button's properties. It is important that the name of the new button is unique from the others and is also specified in the onMouseOver property for the rollover to work properly.
• Save and update your template. Test your files. The new rollover should work perfectly.

For 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: Modifying existing pages and adding new pages

To Modify Existing Pages

Just open the page in Dreamweaver whose content you want to modify and make the necessary changes. Save your file and review your changes.

In case you want to change the name of the page, just right click the file name in the site files view and select Rename. Once you have renamed the file Dreamweaver will ask you if you want to update the links to the renamed file. Click Update and your site will work as before without any broken links.

To Add New Pages

Adding pages using Dreamweaver MX (and above)

• Click on File >> New, you will get a pop-up list with 2 tabs, "general" and "template", click the template tab.
• Select your site name and the template.dwt corresponding to it.

Adding pages using Dreamweaver 4 (and below)

• Open Dreamweaver
• Click on File/New from Template
• Select template and click on the Select button.

Now add your content in the editable region called content and click on File/Save to save the new page.

---

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. Dreamweaver MX and above, please save the styles.css page that will open up in a new tab to see your changes.
• To change the hover effect (the change in color on Mouse Over for a link style) of a 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 then 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

---

Customizing the drop-down menus

• Using Dreamweaver open menus.js in Code View
  
  The menu function will look like similar to this:
  
  function fwLoadMenus() {
  if (window.fw_menu_0) return;
  window.fw_menu_0 = new Menu("root",100,18,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#22438e","#f8bf29");
  fw_menu_0.addMenuItem("Service 1","location='#'");
  fw_menu_0.addMenuItem("Service 2","location='#'");
  fw_menu_0.addMenuItem("Service 3","location='#'");
  fw_menu_0.hideOnMouseOut=true;
  window.fw_menu_1 = new Menu("root",100,18,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#22438e","#f8bf29");
  fw_menu_1.addMenuItem("Product 1","location='#'");
  fw_menu_1.addMenuItem("Product 2","location='#'");
  fw_menu_1.addMenuItem("Product 3","location='#'");
  fw_menu_1.hideOnMouseOut=true;

  fw_menu_1.writeMenus();
  } // fwLoadMenus()
  

• To change size, font & color of the drop-downs: In the menus.js file you will see that each of the drop downs are defined similar to the following line:
  window.fw_menu_x = new Menu("root",100,18,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#22438e","#f8bf29");
  
  The function MENU has the following parameters : Menu (label, menu width, menu height, font name , font size, font color, font highlight color, background color, highlight background color)
  
  1) Change Size: Increase or decrease the first number (number 100 above) to change the width of the drop-down. Similarly change the second number (number 18 above) for height.
  
  2) Change Font: After the numbers the next 4 parameters are the: font name , font size, font color and font highlight color.
  
  3) Change Background: The last two color codes determine the dropdown menu background and highlight background colors.
  
  
• To edit a menu item select the item and modify it. E.g 'Service 1' can be changed to 'Web Design'. Add the link to the menu item by adding "location='/your web page path'".
  
  E.g. fw_menu_0.addMenuItem("Web Design","location='/web_design.htm'");
  
  Please note: If you have files in folders you will have to give absolute paths in the location (not relative paths)
  
  
• To add a menu item copy-paste the previous menu item and replace the name with the new menu item. E.g If you want an extra service 'Service 4', you would have to copy 'Service 3' in the next line and change 'Service 3' to 'Service 4'. If you want 5 Services, the code will look similar to this:

  fw_menu_0.addMenuItem("Service 1","location='#'");
  fw_menu_0.addMenuItem("Service 2","location='#'");
  fw_menu_0.addMenuItem("Service 3","location='#'");
  fw_menu_0.addMenuItem("Service 4","location='#'");
  fw_menu_0.addMenuItem("Service 5","location='#'");

• If you want to delete a menu item select the line for that item and delete it. E.g. If you only wanted 2 menu items the code would be:

  fw_menu_0.addMenuItem("Service 1","location='#'");
  fw_menu_0.addMenuItem("Service 2","location='#'");

• To add a drop-down menu copy the lines of code belonging to fw_menu_1 (from window.fw_menu_1= to =true) and paste them directly below the line "fw_menu_1.hideOnMouseOut=true;". Now just replace fw_menu_1 with fw_menu_2 and make changes to the items as given above. The code will look like this:
  ..
  ...
  fw_menu_1.hideOnMouseOut=true;
  window.fw_menu_2 = new Menu("root",100,18,"Verdana, Arial, Helvetica, sans-serif",11,"#ffffff","#ffffff","#22438e","#f8bf29");
  fw_menu_2.addMenuItem("Drop Down 3 - Item 1","location='#'");
  fw_menu_2.addMenuItem("Drop Down 3 - Item 2","location='#'");
  fw_menu_2.addMenuItem("Drop Down 3 - Item 3","location='#'");
  fw_menu_2.hideOnMouseOut=true;
  
  Important Step: To indicate that an additional menu has been added, and needs to be generated when the page loads, the final step is to change the last line in the javascript code :
  fw_menu_1.writeMenus();
  to
  fw_menu_2.writeMenus();
  
  Now to display the drop-down menu for a new text (or button) link, give the following link tag to it in the Dreamweaver template file - template.dwt (recommended that you copy paste from the other links in the Template):
  <a href="#" class="links" onMouseOver="window.FW_showMenu(window.fw_menu_2,150,154)" onMouseOut="FW_startTimeout()">Drop Down 3 </a>
  
  To add the drop-down menu to an existing link adjacent to the links with the original drop-down menus, just add the onMouseOver and onMouseOut events to the link tag. For example, to add the new drop-down to an exising About Us link:
  <a href="about_us.htm" class="links">About Us</a>
  the code changes to:
  <a href="about_us.htm" class="links" onMouseOver="window.FW_showMenu(window.fw_menu_2,150,154)" onMouseOut="FW_startTimeout()">About Us</a>
  
  Positioning the new drop-down: change the value of 150 to give the left position and change 154 to give the top position.
  Tip: For similar horizontal links you'll have to change only the left position and for similar vertical links you'll need to change only the top position.

---

Customizing the News Scroller

• Open template.dwt (inside the Templates folder) in Code View.
• Delete all HTML code between the comment tags: <!-- Start Of News --> and <!-- End Of News --> and place your HTML News text between them.
• Alternatively, if you would like to just modify the existing News items to maintain the display format, do the following:
1. Cut the code <!-- End Of News --></div></div> and paste it after <!-- Start Of News -->.
2. You will now be able to view the news in the design view (that is, close the code view window to see the existing news items in the design view).
3. Now you can replace the existing news text/table with your own news.
4. Once you have finished undo step 1. That is, cut the code <!-- End Of News --></div></div> (found after <!-- Start Of News -->) and place it after you news text/table ends. Follow these steps whenever you need to modify the news.
   
   
• Important Tip: One easy way to maintain the News (since it will probably change often) without needing to update the template each time is to place the HTML of the news in a Server Side Include (SSI) file. Thus only this file will have to be uploaded to your server with any changes instead of all the pages using the template. Click on Learn how to use Server Side Include files for our easy-to-learn tutorial on using include files.
  
  
• Changing Position of the News Scroller Display Box - Locate the following Style just above the <body> tag:
  
  #NewsBox{position:absolute; width:210; height:170; overflow:hidden; top:195; left:12; clip:rect(0,210,170,0); visibility:hidden}
  
  You can change the position (top & left values) and dimensions (width & height values) of the visible 'News Scroller' Box.
  Important: The clip dimensions should be the same as the width & height of the news box (as shown above).
  
  
• Changing Position, Looping and Speed of the News Scroller Text - Locate the following JavaScript between the <head> .. </head> tags:
  
  startPos=30 // Starting Position of First line in Pixels
  loop=true // Loop Scrolling (T/F)
  iSpeed=180 // Speed of scrolling: Increase to reduce speed
  pxStep=1 // Number of Pixels per step
  
  You can change the values for start position (startPos value), looping of scroller (loop = true/false) and Speed (iSpeed & pxStep values) of the visible 'News Scroller' Text.
  
  
• 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 all pages using the template. Click on Update. When all the pages are updated click on Close.

---

Customizing the swap images

• Open template.png in Fireworks
• If your template uses swaps you'll find that the png template is divided into different frames. Each frame will have a different swap image in the "swap images" layer representing each of the links.
• To view all the swaps in the fireworks template open the Frames panel by clicking on Windows/Frames. Click on each of the frames to view different instances of the swaps.
• Unlock all the layers so that you can select the pictures you want to change.
• You can easily replace the pictures with your own pictures. All you need to do is import the picture you want by clicking on File/Import and browse to select your picture. Left click to insert the imported picture into your Fireworks file.
• Edit the picture using the image editing tools like lasso, magic wand, etc. Now resize and position it in the place of the existing picture.
• Repeat the above step for each of the swaps by selecting individual frames.
• Preview the fireworks template by clicking on the preview tab found on top. All the changes should be seen here.

• Once all the graphics are modified, the next step is to export all the swaps. Select Frame 1 and right click on the swap slice and export the slice to the images folder. Now select the next frame (i.e Frame 2) and export the same slice and change 'links_bot_graphic' to 'links_bot_graphic_f2' as the name of the swap image. Do the same for Frame 3, 4 and 5. Please Note - The names of the swaps will be as follows:

  • links_bot_graphic.jpg - for the swap in the first frame
  • links_bot_graphic_f2.jpg - for the swap in the second frame
  • links_bot_graphic_f3.jpg - for the swap in the third frame
  • links_bot_graphic_f4.jpg - for the swap in the fourth frame and so on
    
    
• Once the pictures are exported preview the Dreamweaver template in IE to test if all the swaps are working fine.