Template Instructions

What's Needed:

Our Foundation series are smaller multi-page web templates containing sample content. You will need to have the appropriate software, Expression Web V4, Dreamweaver CS3+, or a modern web editor.

Templates are designed to be flexible. By using your own photos in place of our sample images, you make the template unique to your business. We recommend you be familiar with the basics of CSS and HTML.

*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).

Responsive Design:

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.

The media queries are located at the bottom of the default.css file; however, we recommend that you take care when editing these parameters unless you are familiar with how any changes will affect your site.

If you need to make adjustments, we will be happy to help.

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.


Typography & CSS:

We offer a wide variety of css classes that you can apply to the various elements on your pages. You can change colors, fonts, and more by editing those items within the css file. But take care that you do not resize any widths that could affect the layout of your pages.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1 <h1 class="text-color-main">

Heading 2 <h2 class="text-color-accent">

Heading 3 <h3 class="text-color-gray">

Heading 4 <h4 class="text-color-main">

Alternate1-left

Alternate2

Alternate3

Alternate1-center

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 that you can apply to a wide range of elements. Chances are you won't need or use all of them, but it's a good idea to look through the css file to see what is there.

The Grid:

Our grid system provides stability, making it easier for you to build your site. The grid gives a guideline for how things should be aligned and laid out, so you don't have to align each series of blocks by hand. Plus, if you want to switch things around, this can be done easily when you see how these building blocks can be organized on your page.

Blocks - Two Across

<section class="contentBox2a">

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.

</section>

<section class="contentBox2b">

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.

</section>

Blocks - Three Across

<section class="contentBox3a">

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.

</section>

<section class="contentBox3b">

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.

</section>

<section class="contentBox3c">

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.

</section>

Blocks - Four Across

<section class="contentBox4a">

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.

</section>

<section class="contentBox4b">

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.

</section>

<section class="contentBox4c">

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.

</section>

<section class="contentBox4d">

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.

</section>

Content Left, Sidebar Right

<div class="contentLeft">

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. 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.

</div>

Content Right, Sidebar Left

<div class="contentRight">

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. 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.

</div>

Home Page Main Images:

Required size for home page images: 1400 x 750 pixels, 300 x 300 pixels.
Image Source: Big Stock Photo #169487987, #90119918, #90116426, #90113255 [See copyright info below.]
Logo Icon Image: FlatIcon.com 32 x 32 pixels [transparent .png format]

Creative Commons License: All non-watermarked images and photos in this template 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. For more specific vendor and photo information, contact us for details.

Copyright Info: Any watermarked images and photos are included for demonstration purposes to give our customers a functional preview of what the template will look like once content has been added. Watermarked photos may not be shared, copied, used or redistributed in any way, nor may they be uploaded to your hosting server. We can also arrange to license images for our customers to use in their web site. Contact us for more details.

Images - Float Left

sampleFloat an image to the left without a border:

<img class="img-left" src="photo.jpg">

 

sampleFloat an image to the left with a border:

<img class="img-left img-border" src="photo.jpg">

 

sampleFloat an image to the left with a frame and shadow:

<img class="img-left-shadow-frame" src="photo.jpg">

 

sampleMake a square image appear round and float to the left.

<img class="img-left-round-shadow" src="photo.jpg">

Images - Float Right

sampleFloat an image to the right without a border:

<img class="img-right" src="photo.jpg">

 

sampleFloat an image to the right with a border:

<img class="img-right img-border" src="photo.jpg">

 

sampleFloat an image to the right with a frame and shadow:

<img class="img-right-shadow-frame" src="photo.jpg">

 

Make a square image appear round and float to the right.

<img class="img-right-round-shadow" src="photo.jpg">

Note: We include a lot of classes that you can apply to images. We recommend you look through the CSS file to get an idea of what is there.

Icon Fonts

We have included Font Awesome icon fonts because they are quick and easy. For information on Font Awesome, please see our Instructions page. If you need something different, we are very partial to Flaticon.com (we used one for the "logo image" in this template) where you can create your own "collection" and easily include it in your site. Another favorite is Icomoon.io where they offer a free pack of 450 icons and full instructions on how to use them.

Directions A - Z

Accordion Content:

We have added an accordion content block on the FAQ page and on the sample product page. This allows for content to be displayed in a relatively small space. Each section will expand when you click on it and will contract when you click on it again. This accordion block uses a Definition List <dl> that is styled with a bit of css. When editing the page in Design View, the content will appear expanded for easy editing.

html
  1. <dl id="acc"> <!-- begins definition list -->
  2. <dt>First Topic</dt> <!-- first topic -->
  3. <dd> <!-- begins expandable area -->
  4. <p>Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore
    magna. Wisi e nim admin im veniam, quis nostrud.</p>
  5. <p>Ut lacreet dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper
    manet sola.</p>
  6. </dd> <!-- ends expandable area -->
  7. <dt>Second Topic</dt> <!-- next topic -->
  8. <dd><p>content goes here.</p></dd>
  9. ...add more items...
  10. </dl> <!-- ends definition list -->

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 main.dwt and inside.dwt templates and look for the following:

html
  1. <div id="logo">
  2. <img alt="" src="<img alt="" src="../images/logo.png"> [<-- Optional]
  3. <p class="brand">Your Business Name</p>
  4. <p class="slogan">Slogan or Tag Line Goes Here</p>[<-- Optional]
  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. }

Calendar:

We have included a very simple javascript calendar that shows the current month and highlights the current date. This not a dynamic or XML events calendar. Note that the calendar is not visible in Design View, but is visible when previewed in the browser. [Hint: calendar01.js is for black or dark backgrounds and calendar02.js is for white or light backgrounds.]

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

Contact Form:

We have implemented a very basic contact form. Your visitors can fill out the form and you will receive the results by email. In order to receive the results, you will need to edit a few lines on the send_form_email.php script (located in the javascripts folder) to set your email address where the form results should be sent and to set a subject line for the emails.

javascript
  1. // EDIT THE 2 LINES BELOW AS REQUIRED
  2. $email_to = "yourname@yourdomain.com";
  3. $email_subject = "Your email subject line";

Once the form has been submitted, you can redirect the user to your "thankyou.html" page. On the php script, near the bottom of the page, you will need to set the absolute file path to your Thank You page:

javascript
  1. <!-- include your own success html here -->
  2. <script type="text/javascript">
  3. <!--
  4. window.location = "http://www.yourdomain.com/thankyou.html"
  5. //-->
  6. </script>

Important: This contact form works on a wide variety of web hosting platforms, but we cannot guarantee it will work on all of them. If you have confiquired the form according to the instructions above but have problems, your web hosting's support team should be able to help with any server-side settings that may need to be made.

Font Awesome Icons:

Font Awesome gives you over 600 scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Our favorite place to learn how to use these icons is at the W3Schools site.

You can also learn more about Font Awesome on their site. They also have a handy "Cheatsheet" you can print for easy reference.

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.

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 the particular Google font 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;}

Lightbox:

Your template contains a JavaScript Lightbox script. You can use the lightbox feature on any photo in your site; it is not limited to only the product or gallery pages. The Lightbox JavaScript consists of several files. We recommend that you do not move or edit any of these files.

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/.]

Slideshow*:

*Slideshow may not be available in all templates.

Your template contains a JQuery JavaScript on the home page that will rotate through two or more images. You can set your own text for the image captions by editing the title tag shown in the example. [Note: In some templates, we might use only one image in the slideshow. That gives the appearance that only the caption changes.] You can, of course, add more images, but take note that more images will increase the load time of the page and could have a negative impact on mobile users depending on their data plans.

html
  1. <div id="slider" class="nivoSlider">
  2. <img src="../images/mainimage1.jpg" alt="Image description goes here" title="#htmlcaption1">
  3. <img src="../images/mainimage2.jpg" alt="Image description goes here" title="#htmlcaption2">
  4. <img src="../images/mainimage3.jpg" alt="Image description goes here" title="#htmlcaption3">
  5. </div>
  6. <div id="htmlcaption1" style="display:none">
  7. <div class="nivo-caption1">
  8. <p>What does your web site say about your business?</p>
  9. <p>Lorem ipsum dolor sit amet ex rationibus efficiendi ius.</p>
  10. </div>
  11. </div>
  12. <div id="htmlcaption2" style="display:none">
  13. <div class="nivo-caption2">
  14. <p>Easily replace our sample images with your own.</p>
  15. <p>Lorem ipsum dolor sit amet ex rationibus efficiendi ius.</p>
  16. </div>
  17. </div>
  18. <div id="htmlcaption3" style="display:none">
  19. <div class="nivo-caption3">
  20. <p>This text is easy to change. Be creative.</p>
  21. <p>Lorem ipsum dolor sit amet ex rationibus efficiendi ius.</p>
  22. </div>
  23. </div>

[Credit for this application: Released by http://nivo.dev7studios.com/. There are a lot of settings/effects for this script. For more information on adjusting the speed and transition effects, visit our Help Center topic.

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">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]

Ticker Content:

We have included a fun content "ticker" that fades in and out to show blocks of text. This ticker block uses an unordered list <ul> that is styled with a bit of css. When editing the page in Design View, the content will appear expanded for easy editing. We have used it for announcements on the News & Events page. You can adjust the speed by editing the ticker.js file located in the javascripts folder.

html
  1. <ul id="ticker">
  2. <li>
  3. <section class="content">
  4. <h6>Topic Title:</h6>
  5. <p class="newsAuthor">Author Name</p>
  6. <p>Since 1998 we've been focusing on the one thing we do best.</p>
  7. <p>We make templates that work for you. They are easy to use, flexible, and are designed with clean coding,
  8. HTML5, some great CSS3, and are cross-browser tested.</p>
  9. </section>
  10. </li>
  11. ...more list items...
  12. </ul>

The javascript for the ticker has been added to every page; however, you can only have one ticker block per page.

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.

If you wish to use this template for subsequent sites, you must purchase a license for each additional site. We offer additional licenses at a discounted rate. All images and source files included within the template are licensed for use with this template only. All royalty-free image vendors have their own terms of use in how their images may be used and in what context. Please check with the listed vendor(s) if you have questions.

A Checklist:

There always seems to be a rush to publish a new site. Before going live with your site, take a minute and review our list of items that should be completed first!

  • Change the page title on all pages as appropriate.
  • Preview all pages by going to File > Preview in Browser. It's a good idea to check your site in more than one browser.
  • Modify the description meta tags on each page.
  • Change or add alt text to each photo used on your site. In the template, we typically have "sample" as the alternate text or it is left blank.
  • Spell check each page.
  • Check each page in Code View. If you see embedded styles that are caused by using the formatting toolbar (.style1, .style2, .autostyle1, autostyle2), note that these embedded styles may conflict with our external css file. You can find details on how to clean up these styles by visiting our Help Center.
  • You may remove our logo and any links to our site from the template.
  • Upload your new site to your web hosting space. You do NOT need to upload the Templates folder.
  • Important! Remember that it is against our Terms of Use to upload pages that contain our demo text. Edit first, then upload! You should also replace any watermarked images with your own to avoid any possible copyright infringement issues with stock photo vendors.
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.