Dreamweaver CS5 Templates Customization Tutorial
Editing our Dreamweaver Templates are easy using the following instruction guide and although we have used the most popular template 'Karma' here, it can be used as a generic guide that covers most aspects of customizaton for ALL our Dreamweaver templates.
- Unzipping the files
- Installing Fonts
- Customizing the header with your own company name or logo
- Customizing the navigation menu
- Customizing the Sliders
- Substitute the pictures in the template with your own pictures
- Customizing Portfolio Pages
- Configuring Contact Form
- Change color theme
Unzipping the files
Unzip the zip file that you have downloaded using Winzip, Winrar or any other unzipping software freely downloadable from the web.
When you have unzipped the zip file these are the main folders you will see:
These are the files that you will see in the sub folder named 'Karma-HTML'. All other templates will have a folder named 'html':
Installing Fonts on your machine
The template may come with associated fonts that will be required for editing elements like the logo and you will need to install them on your PC, before editing the logo unless you wish to use your own logo.
Locate the fonts in your unzipped downloaded files, right-click on it and select 'copy' from the dropdown list.
From your Desktop menu, click on Start > Control Panel > fonts. In Windows 7 click on Start > Control Panel > Appearance & Personalization > Fonts
(XP version) In the 'Fonts' window that opens, select 'File > Install New Font.
The 'Add fonts' dialog box will open. Browse to the location of your fonts folder that you just unzipped and the fonts will appear.
click on 'Select All' and then click on o'kay to install them.
In Windows 7 all you need to do is to copy and paste the font to the fonts folder.
Customizing the header with your company name or logo
The size dimensions for the Karma logo is about 154 pixels wide by 57 pixels height. Create or use an existing logo based on these dimensions with a transparent background so that it blends in well with the layout background of any color theme you use.
If you are using another template, go to the images folder and locate the image named 'logo.gif, logo.png' or similar. Hover over the image you will be able to see the dimensions.
Your logo can be wider if you have a longer name, however if your logo is taller in height, this may push your navigation menu background area down to make it taller. If you are familiar with CSS you can adjust the heights to accomodate the expansion.
To save the logo in a transparent background, you should either save it in a gif or png format. Save the logo to your images folder and ensure that the logo in the html pages point to the correct path and logo name in case you changed the name from 'karma-logo
The following screenshots show how they appear in both Adobe Fireworks and Adobe Photoshop if you create a logo using the text tool:
Adobe Fireworks screenshot
Adobe Photoshop screenshot
Open Photoshop and from the main menu at top select 'file > new file'
Use the text tool to type in the name for your site or company name. You can add a drop-shadow to the name by right-clicking on the layer in Photoshop and selecting the blending option from the list.
'Save as' gif or png format image.
Customizing the Navigation Menu
Customizing the top and side navigation menus is very easy and is done in the html or code view of Dreamweaver. The menus are CSS text based and so they can be manually typed over or deleted.
Open your selected html page in Dreamweaver. Switch to code view. The entire html is commented which means you are able to see exactly where to edit elements such as menus, sliders, headers, footers etc...
Manually type over a menu name to replace with a new one. Copy and paste the navigation code to every other page.
TIP - If you have several pages to do, an much faster and easier way to update each page with the same navigation menu structure is to use the 'Find and Replace' command in Dreamweaver. Click here to learn how to use Dreamweaver's 'Find and Replace' command.
Customizing the sliders
All sliders use Jquery scripts that are located inside subfolders 'js' or 'jquery'. Jquery provide Flash like animation but without any Flash files or scripting. They are easy to edit.
All you need to do is to first determine the dimensions used for each slider image. In most cases you can find the dimensions for each slider image in the source code of the html page. For example let's use the Karma - 'index-jquery-1.html' page and switch to code view.
We know where to edit the slider images as they are commented as:
<!-- ***************** - Homepage jQuery Slider - ***************** -->
Crop and resize your new slider image in your favourite graphics program like Adobe Fireworks or Adobe Photoshop and then save it to a subfolder like 'images' or a newly created one called 'slider images'. Ensure that in the source code your new image points to that path for example:
You can also edit the title and the text that is displayed either on the right hand side or left hand side of the slider. This is done in 'Code View'. The title is in the <h2> tags and the text content is below this.
<!-- ***************** - Homepage NivoSlider - ***************** -->
Cuber 3D Slider
If your template or theme includes a 3D slider (Cuber) and you want to use it for the Home-page, you don't have to edit any html code at all of the page using the Cuber. All you need to do is to determine the exact dimensions of the images used for the 3D slider and then edit your new images to those exact measurements. The images must match the names of the default images.
To determine the slider image sizes and names you can open a folder, usually named '3dimages'. Inside this folder you will see the names of those images and the sizes if you hover over the icons. You can change the names if you wish but then you will need to change them in the xml file.
You can have as many 3d slider images as you want or delete those you don't require and edit any captions in an external xml file. First we have to determine the exact name of the xml file used for the 3d slider page since there might be more than one different 3d slider pages such as in Karma.
Open the 3d slider html page and switch to code view. At the top somehwere between the head tags you will see the following code:
We now know that a file named 'full-width-dark.xml' file is used for editing the 3d slider images for this page and it is located in the subfolder named 'swf/'
Open the file 'full-width-dark.xml' named in either Dreamweaver, Word or Notepad.
Scroll down the page until you see the following comments:
<!-- These are the slides below. Feel free to add/remove new slides and define new images -->
You will be able to edit the parameters for each of the slider including slider name and captions.
<!-- ***************** - START Video - ***************** -->
To edit the Home-page that uses a video in the header open the respective page 'index-video-left.html and switch to code view.
Replace the URL link for your own video.
Substitute the pictures in the template with your own pictures
Step 1 Place your cursor over any image and switch to code view. You should be on the source code for that particular image, for example:
<img src="images/homepage-image-1.png" alt="CSS Template" width="190" height="111" />
We know that the image dimensions are '190 pixels wide by 111 pixels in height'
Step 2 Resize and crop your images to the exact size using your favourite graphics program such as Adobe Photoshop or Fireworks. Save them in the images folder and ensure that the paths to these images point to the correct folder.
NOTE: If the html source code of a particular image does not indicate any dimensions for that image, then open the folder wherein the image is contained and find out the size by hovering over the icon.
Step 3 Select the picture you want to change, delete it and replace it with your own pictures, by using the 'Import' command (File > Import). Make sure your own pictures are the same size as the existing images. You can use the marquee tool to crop your picture to get the same size.
If you are replacing the Home-page image with your own image, use the same 'Copy and Paste Inside' technique as described earlier in the 'Swap image replacement' instructions.
Import your new image, place it over the Body Image, cut it (Edit > Cut), select the Body Image with your mouse and finally 'Edit > Paste Inside'.
Customizing the portfolio pages
Step 1Open one of the portfolio pages, either a two, three or four column portfolio page. Place your cursor over any image and switch to code view. You should be on the source code for that particular image, for example:
We know that the image dimensions are '190 pixels wide by 111 pixels in height'
The path to this image would be:
Step 2 Resize and crop your images to the exact size using your favourite graphics program such as Adobe Photoshop or Fireworks. Save them in a separate folder named 'gallery' and ensure that the paths to these images point to the correct folder.
Step 3Place your bigger image preview (PrettyPhoto) in the same folder named 'gallery'. The link to this bigger image preview should point to this 'gallery' folder. In the above example we have used:
Contact form Setup
Decide which contact form you are going to use from the premade ones, either 'template-contact.html' or 'template-contact-google-map.html'. Rename as 'contact.html' and ensure that all menu labels named as contact point to contact.html page.
Open the file 'config.php', located inside the subfolder named 'contact-form', goto line 26 and replace the default recipient address for your own email address. This is the address where the contact form results will be sent to.
Customizing the Google map in the header
Goto Google maps site 'maps.google.com'. Type in your company address in the search bar. Then when your location displays, click on the 'get embed code' icon as shown in the screenshot below. Copy the code ansd paste the code into the html of the page from line 192 to line 193 as shown in the second screenshot.
Change the map display dimensions to '922 pixels wide by 201 pixels height'.
Changing color theme
Open your html page in Dreamweaver or any other editor and swtch to code view. At the top you will see:
The CSS for the theme color is easy to identify and easy to update. Select a color based on the CSS names that are located in the 'CSS' folder as shown in the screenshot below:
Let's say we like Cherry color for our theme. All we need to do is to replace the color name in the head of our document:
<link href="css/karma-teal-grey.css" rel="stylesheet" type="text/css" />
<link href="css/karma-cherry.css" rel="stylesheet" type="text/css" />
Step 3 Save the file.
Repeat the same for each page. You can use Dreamweaver 'Edit > Find & Replace tool' to replace the code for all the pages in a simple click.