Template Instructions

What's Included

This is a basic multi-page web template, containing sample pages. Expression Web and Dreamweaver versions contain Dynamic Web Template (.dwt) pages for each page layout design. You will need to have the appropriate software, Expression Web V4, Dreamweaver CS3+, or a modern web editor, depending on the template version you purchase.

*Not all CSS3 elements will display accurately in Design View (gradients, some fonts, etc.) We recommend you check your edits by previewing in your browser(s).

Development

Templates are also designed to be flexible. You can add more pages, delete the pages you do not need, or even rename existing pages. Your template package will contain all of the pages and images seen in this preview.

By using your own photos in place of our sample images, and making color changes in the CSS file, you make the template unique. We recommend you be familiar with the basics of CSS and HTML.

Responsive

This template is designed to expand and contract depending on the viewing device. This is done through "media queries" that detects the viewport of the visitor. As the screen becomes smaller, several things happen:

  • The horizontal menu changes to a "touch friendly" vertical menu on mobile devices.
  • Some secondary items such as blockquotes may be hidden at smaller screen sizes.
  • Larger photos are scaled down to fit the screen.

The main CSS file in each of our templates contains a lot of classes you can choose for the various elements on your pages. While you may not use them all, they are their in case you need them. Headings typically have one or more "alternate" classes in case you want to dress things up a bit. Paragraphs also have several CSS styles to align text to the left or right, make text smaller or larger, and more than one class can be applied to an item.

The best thing to do is look through the CSS file. Don't worry, it won't bite. If you need us to help explain what something does, we have more details on our Help Center. If you need more, just drop us an email and we'll be happy to describe it in more detail.

Typography

Main Images

Vendor and Copyright:
http://morguefile.com/
Image Size: 1400 x 500px

License: Photos are licensed under Creative Commons Zero which means you can copy, modify, distribute and use the photos for free, including commercial purposes, without asking permission from or providing attribution to the photographer or vendor. More information can be found on the vendor's web site.

Photos Copyright Info: Watermarked images are for demonstration purposes to give our customers a functional preview of what the template will look like once content has been added. You are responsible for replacing watermarked images with those of your own.

Miscellaneous Classes

<p class="center">This is a paragraph of text that is centered. Just apply the center class.</p>

<p class="right">This is text that is aligned to the right. Apply the right class.</p>

<p class="small">This is text that is smaller than normal. Apply the small class.</p>

<p class="center small"> You can have more than one class assigned to an element. This paragraph uses the center class as well as the small class.</p>

Note: We include a wide variety of css classes. It's a good idea to look through the css file to see what is there.

Paragraphs with Icons

<p class="home"> Adds the home icon to the paragraph

<p class="phone"> Adds the phone icon to the paragraph

<p class="hours"> Adds the clock icon to the paragraph

<p class="comment"> Adds the text bubble icon to the paragraph

<p class="noicon> When you need a second paragraph without an icon.


Bulleted Lists and Ordered Lists:

<ol class="leadingzero">
  1. Topic One
  2. Topic Two
  3. Topic Three
  4. Topic Four
<ul class="list1">
  • Topic One
  • Topic Two
  • Topic Three
  • Topic Four
<ul class="list2">
  • Topic One
  • Topic Two
  • Topic Three
  • Topic Four
<ul class="list3">
  • Topic One
  • Topic Two
  • Topic Three
  • Topic Four

Content Boxes - Two Across

<section class="contentBox2a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

<section class="contentBox2b>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>


Content Boxes - Three Across

<section class="contentBox3a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

<section class="contentBox3b>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

<section class="contentBox3c>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>


How To

Adding Your Site Name:

The site name and slogan is plain text. The size, color, and font are set within the CSS file. To add your own business name and tag line, open the .dwt template(s) and look for the following:

html
  1. <div id="logo">
  2. <img alt="" src="../images/logo.png"> <!-- you can remove or replace this logo image -->
  3. <p class="brand">Your Business Name</p>
  4. <p class="slogan">Slogan or Tag Line Goes Here</p>
  5. </div>

To change the font, size, color, or other settings, open the default.css file and look for the following:

css
  1. .brand {
  2. font: normal 2.0em 'Font Name', "Century Gothic", Verdana, Helvetica, sans-serif; color: #ffffff;
  3. . . .
  4. }

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. NOTE: You will not see the Google font when in design view. It will be seen when you preview the site in your browser. Learn more about Google fonts.

It’s extremely simple. First there is a link to one or more Google fonts that goes in the head area of each page:

html
  1. <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:

css
  1. h1 {font: normal 30px 'Font Name', "Century Gothic", Verdana, Helvetica, sans-serif;
  2. color: #996000;
  3. margin: .3em 0;
  4. letter-spacing: 1px;}

Font Awesome Icons:

Font Awesome gives you over 400 scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. 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. Learn more about Font Awesome.

html
  1. <i class='fa fa-briefcase'></i>

To use an icon as a bullet or similar:

css
  1. .newsDate {
  2.    position: relative;
  3.    color: #666;
  4.    text-align: right;
  5.    font-size: 0.90em;
  6.    letter-spacing: 1px;
  7.    padding: 0 20px 10px 0;
  8.    margin-top: -2px;}
    .newsDate:before {
  9.    position: absolute;
  10.    font-family: 'FontAwesome';
  11.    content: "\f073";
  12.    top: 0;
  13.    right: 0;}

NOTE: You will not see the Font Awesome icons when in design view. It will be seen when you preview the site in your browser.

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). Most elements that make up the template are controlled through the CSS file, including the gradient colors. We recommend you look through the CSS file taking note of the comments for areas you want to change to suit your web site needs.

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.

All of our templates are designed to meet current web standards to ensure that your web site will work in today's web browsers.

Editing Pages and DWT (.dwt) Templates:

All template packages allow you to delete the pages you do not need, create new pages, and rename existing pages if necessary.  Generic HTML templates contain only .html pages.

Expression Web and Dreamweaver versions rely on .dwt templates for the page layout designs. DWT template pages contain editable and non-editable regions. You edit non-editable regions on the .dwt template(s). This includes some elements like your site name, navigation, copyright statement, etc. Once you change a .dwt template and save the page, the changes are then applied to the .html pages that are attached to that .dwt template page.

You edit editable regions on the .html pages. This is your site content, images, etc. 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.

Calendar:

We have included a very simple javascript calendar that shows the current month and highlights the current date. Note that the calendar is not visible in Design View, but is visible when previewed in the browser.

html
  1. <p class="center">
  2. <script src="javascripts/calendar.js" type="text/javascript"></script>
  3. </p>

JavaScript Lightbox:

The Lightbox allows you to click on a small photo and have a larger image appear in a semi-transparent overlay that will appear on top of the page. The script will automatically size itself, so your images can be varying sizes. On mobile devices, the lightbox resizes the images to fit the screen.

First insert your small photo onto the page. Create a hyperlink to the larger photo. Switch to code view and add class="lightbox" which activates the JavaScript. If you wish to have a title appear, add the title attribute as shown in the example.

html
  1. <a href="images/gallery/product1lg.jpg" class="lightbox" title="Your product description goes here">
  2. <img alt="sample photo" src="images/gallery/product1.jpg"></a>

To click through a group of images, add a group name: data-lightbox-gallery="groupname". The "Previous" and "Next" buttons will now automatically appear.

html
  1. <a href="images/gallery/product1lg.jpg" class="lightbox" data-lightbox-gallery="gallery1"
  2. title="Your product description goes here">
  3. <img alt="sample photo" src="images/gallery/product1.jpg"></a>

[Credit for this application: http://dev7studios.com/plugins/nivo-lightbox/.]

Text Animations:

We're added some text animations for a bit of extra visual fun. On the home page, several areas will slide or zoom into position. You can adjust the effect, the direction, and the timed delay as shown below. You can apply the "wow" effect to any element, or you can delete it if you decide you do not want an animated effect applied to a certain item.

html
  1. For the page title text:
  2. <h1 class="wow fadeInLeft" data-wow-delay=".4s">Page Title Text Here</h1>
  3. For the paragraph text:
  4. <p class="wow fadeInRight" data-wow-delay=".8s">Page Title Text Here</h1>
  5. To animate a block to slide in, apply the class to the div:
  6. <div class="contentBox3a wow fadeInLeft" data-wow-delay=".2s">

[Credit for this application: Animate.css from http://daneden.me/animate, Copyright 2014 Daniel Eden]

Template Use:

This template comes with a site license, not a user or computer license. This template is licensed for use on one site only. Other terms and conditions may apply. Our full End User License Agreement is available on our sites.

Need Help Fast?

Need more? We also offer a variety of helpful resources as well as design services. Please visit our web site at RTBWizards.com.