Customization Guide - Simple guide to customizing Entheos Free templates

Follow these simple steps to customize Entheos templates.

• Step 1: Defining the site in Dreamweaver
• Step 2: Customizing the Header with your Company Name
• Step 3: Customizing Links
• Step 4: Customizing the footer with your company details
• Step 5: Adding new pages
• Customizing text - Changing fonts using CSS Styles

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@entheosweb.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 below given list of folders and files in your local site:
  1. Contents.htm - This file displays a list of all the files and folders included in the downloaded zip file.
  2. Fonts folder - Contains the fonts used in the source file. Open the fonts folder and copy the fonts to your local fonts folder (e.g. WINNT/Fonts).
  3. Images folder - Contains the images used in the site. All updated images should be exported to this folder.
  4. Templates folder - Contains the Dreamweaver template (template.dwt). Create a copy of the template as a backup. All important changes will be made here.
  5. Styles.css - This is the external style sheet used in the template. The styles created will be used to format text throughout the site. Additions and modifications to existing styles can be made here.
  6. Index.htm - This is the homepage created using the template.
  7. Template.png - This is the Fireworks source file. All changes to graphics will be made here.
  8. Help_files.htm - Guide to customizing Entheos templates.
  9. License.htm - Please read the license before using the template.
  10. If your template uses drop-down menus, you will have 2 extra files.
      1. fw_menu.js - Contains the function for the drop-down menus
      2. menus.js - Contains the drop-down menu items. Changes to the drop-down menu will be done here.

Step 2: Customizing the Header with your Company Name

• Open template.png (The .png can be opened only in Fireworks 4.0 and higher versions)
• Double Click on 'Your Company Name' and change the company name in the text editor. You can also adjust the font type, size and color here.
• Repeat the above step for the company slogan if it exists.
• Once the Company Name and Slogan have been modified it is ready to be exported.
  • 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 'company name' slice (found on top) 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. Make sure the 'Company name' fits within the slice. You can adjust the text size if the name is too long.

Step 3: Customizing Links

For Customizing Graphics Links:

• Open template.png
• Double Click on the links to open the text editor (If the links are grouped right click on the links and click on Ungroup to edit the links)
• In the Text Editor preview area, change and apply the text.
• Repeat the above 2 steps 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 steps 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 button1.gif will be button1_f2.gif, button2 will be button2_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.

For Customizing text links:

1. If the template uses text links, the 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.

Deleting extra buttons or 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 company details

• Open template.dwt (in the Templates folder).
• Edit the footer info with your company 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.

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 all the templates
  • title - used for the titles
  • subtitle - used for the subtitles
  • text - used for the content
  • footer - used for the footer
• 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.

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.entheosweb.com. Terms and Conditions. If you have more questions please email us at templates@entheosweb.com.