Getting Started

Third-Party Images:

Icon-Style Graphics: The icon-styled filler images are NOT licensed for your use. It is expected you will want to add your own smaller images that relate to your specific site. If you do like this icon style of images, there are hundreds of free icon-style graphic sets available for both commercial and non-commercial use. Do a search for "free icon png images" to find out more.

Social Media Icons:  We've also added some social media icons (32px x 32px) that can be found in the icons folder located within the images folder. If you wish to use different icons, you can find the full free collection at http://www.blogperfume.com/.

This template uses a stylized image on the home page which incorporates elements from several sources. Some third-party providers require to you purchase or otherwise license the original image in order to avoid any copyright infringement issues. [Note: Please remember that we cannot be responsible for when or why any photo or image may be removed from any stock photo site.] If a vendor is listed below, you will find the link and image number as appropriate.

Vendor: Big Stock Photo
Image(s): #4678173, #209906

Adding Your Site Name:

The template uses text rather than an image for the site name and slogan. The font size, color, etc. is set within the css file. To add your site name and slogan, open the appropriate .dwt page template, switch to code view, and look for the following at approximately line 53:

<div id="nameplate"><a href="../index.html">Your Business Name</a></div>

When done, save the .dwt page and allow any attached pages to update.

NOTE: You will not see the Google font(s) when in design view. It will be seen when you preview the site in your browser. Learn more about Google fonts.

Google Fonts: By linking to a particular font stored on Google’s servers (save on bandwidth + caching benefits), you now have access to a wide variety of custom fonts. This offers a lot of flexibility for using more decorative fonts by adding just a touch of code. Quite literally, you can add these fonts into your site in under a minute.

It’s extremely simple. First there is a link to the particular Google font(s) that goes in the head area of each page:

<link href='http://fonts.googleapis.com/css?family=Font+Name' rel='stylesheet' type='text/css' />

Next the font name is added to the CSS file. For example:

h1 {
font: normal 30px 'Font Name', "Century Gothic", Verdana, Helvetica, sans-serif;
...
}

Hint: Long site name? Short site name? You can adjust the size of the font by editing the css file to make the lettering larger or smaller. Look for the #nameplate rule and edit the font line:

#nameplate {...
font: normal 38px 'Font Name', "Times New Roman", Times, serif;
...}

Cascading Style Sheets (CSS):

This template relies on an external CSS file that consists of "rules" to tell the browser how to render the pages. The CSS file sets the fonts and colors for all of the text on the page, will position items on the page such as the sidebar and content areas, and much more. You can easily modify font colors (links, headings, and text). Several elements that make up the template are actually graphic images and cannot easily be changed. If you feel the colors used in this template do not meet your needs, we offer custom design and modification services.

Note: Occasionally when adding your own text and images to your pages, the page may suddenly seem to lose the formatting. Don't panic. Continue adding your content, then Save the page (Control + S). Now Refresh the page (F5) and you will see your page "snap" back into position. Continue editing your pages. If the page loses formatting again, just Save and Refresh the page.

Editing the DWT (.dwt) Templates:

You will edit the dynamic web template (.dwt) pages (located inside of the Templates folder) to add your own site name, navigation links, and other content that is located outside of the editable region tags. When you make a change to a .dwt page and then save the page, the changes will be updated to all .html pages that are attached to that particular template. Remember that you will have to edit each .dwt template that you use and have attached to your pages.

Editing the Content (.html) Pages:

This template package allows you to delete pages you do not need, add new pages, and to rename existing pages if necessary. To edit the existing .html pages, just delete our sample content. You can then type your own text and add any additional photos. Note that you will not be able to edit any “non-editable” regions on these pages.

Creating New Pages In Expression Web: To create a new, blank page based on a .dwt page layout, go to File > New > Create From Dynamic Web Template. In the dialog box that appears, select the appropriate .dwt page (if you template offers more than one page layout). When your new page is created, save the page giving it a unique name and page title. You can then add content to the editable regions.

Creating New Pages In Dreamweaver: To create a new, blank page based on a .dwt page layout, go to File > New. From the dialog box that appears, choose Page From Template. You can navigate to the Templates folder of you web to choose the appropriate .dwt page template.

Optional Elements (May not be included in all templates)