Template Instructions

What's Needed

We offer templates in several flavors including Expression Web and generic HTML. 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, you make the template unique to your business. We recommend you be familiar with the basics of CSS and HTML.

What's Included

This is a multi-page web template, containing sample pages. Expression Web and Dreamweaver versions contain Dynamic Web Template (.dwt) pages for each page layout design.

This templates offers a variety of page layout designs. You should choose the pages that best suit your needs and use those consistently. Most will not use all of the options available.


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. As the screen becomes smaller, several things happen:

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.

Home Page Main Images:

Vendor and Copyright: http://www.bigstockphoto.com
Image(s):
#83947253, 83939444, 84811181
Required size for slideshow image(s): 1400 x 500 pixels
Optional size for smaller main images on home page: 300 x 300 pixels.

Photos Copyright Info: The images and photos listed above are included as example images only. They are used 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. 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. [Note: We cannot be responsible for when or why any photo or image is no longer available from any stock photo site.]

Vendor for Icon Images:

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 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;}

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.

Drop-Down Navigation Menu:

The navigation menu can hold a main topic and one or more sub-topic levels. The sub-topic level will expand on mouseover and will contract when you move the mouse off the menu item. You can also expand and contract menu levels by clicking on the "arrow".

You can delete main topics (and any associated sub-topics), add new ones, and change the text and links on the existing menu. You will edit the drop-down menu on the .dwt page templates. Note that the subtopic level will be difficult to see, so we recommend you edit the menu in code view. If you look at the coding, it should be relatively easy to make your changes.

For a main topic (top link) only, your code will look something like this:

html
  1. <li><a href="../index.html">Home</a></li>

For a main topic that contains sub-topics, your code will look something like this:

html
  1. <li><a href="../page.html">Main Topic</a>
  2.    <ul>
  3.      <li><a href="../page.html">Sub-Topic 1</a></li>
  4.      <li><a href="../page.html">Sub-Topic 2</a></li>
  5.      <li><a href="../page.html">Sub-Topic 3</a></li>
  6.      <li><a href="../page.html">Sub-Topic 4</a></li>
  7.    </ul>
  8.  </li>

Once you have your menu completed on one .dwt page, copy the entire menu and paste it into any additional .dwt page templates you will be using. Save your pages and allow the changes to update on the .html pages. Save and you're done. Font sizes and colors, background colors, margins, paddings, etc. are all controlled in the default.css page.

html
  1. <nav>
  2. copy all coding that appears between the opening and closing nav tags
  3. </nav>

You can set the size where the menu changes to the mobile version. We have preset the width to 1024 pixels. If your menu uses fewer main topics, you may want to reduce this size. Edit the code located at the bottom of the .dwt template pages:

javascript
  1. <script>
  2. $('ul.slimmenu').slimmenu(
  3. {
  4.     resizeWidth: '1024',
  5. ...
  6. </script>

Accordion Content:

We have added an accordion content block 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. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet
    dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola.</p>
  5. <p>Ut lacreet dolore magna. Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper
    manet sola. Ut lacreet dolore magna.</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 -->

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 home page and for testimonials on other inside pages. 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="author">Author Name or Date</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.

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 Slideshow:

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">What does your web site say about your business?</div>
  8. </div>
  9. <div id="htmlcaption2" style="display:none">
  10. <div class="nivo-caption2">Easily replace our sample images with your own.</div>
  11. </div>
  12. <div id="htmlcaption3" style="display:none">
  13. <div class="nivo-caption3">This text is easy to change. Be creative.</div>
  14. </div>

[Credit for this application: Released by http://nivo.dev7studios.com/. There are a lot of settings/effects for this script, so if you want to tweak it for your own use, visit the site to see all the possibilities.]

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

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]

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>

You also need to change a bit of code on the contact.html page.

HTML Code
  1. Change from this:
  2. <form class="contactform" name="contactform" method="post"
  3.    action="#" onSubmit="alert('The submission feature has been disabled for this example'); return false;">
  4. To this:
  5. <form class="contactform" name="contactform" method="post"
  6.    action="javascripts/send_form_email.php">

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!

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.