Template Instructions

What's Needed:

Expression Web, Dreamweaver or any other html web editing program.

You do not need a specifc html program to edit this one-page template.

What's Included:

Latest coding using CSS3 and HTML5.
Unique one page web site in .zip format.
Responsive design with expanding and contracting cells, provides easy readability from cell phones to high resolutions.
Basic Contact Form
Google Fonts

Special Features:

Cross-browser tested. We ensure that our templates work in todayÃƒÂ¢Ã¢â€šÂ¬Ã¢â€žÂ¢s web browsers.

Slideshow (IF INCLUDED): easy to replace our images with your own.

Cascading Style Sheets

This template uses a CSS-based layout, which means that the page sections (header, sidebar, content, and footer) are positioned and styled using CSS. Because this results in cleaner code, your page may load faster and search engines may rank your page higher.

The CSS also controls all of the font colors and sizes. The six heading tags have been styled as well. We include extensive styling for images.

Note: Sometimes Expression Web may lose its formatting in "Design" view or some elements may not appear correctly. Fonts may seem too large or small; spacing between elements may seem too wide, etc. While this can be a bit disconcerting, you will find it easy to keep previewing your site in a browser as you make changes. Don't panic, it's okay, just save your page, then refresh it. This will display your page correctly. To preview your pages, save the page after each change and then go to File > Preview in Browser.

Directions for Template Development

Accordion Content:

We have used Accordions on our sample product pages and on our EULA page. They are very handy arranging large amounts of content in a relatively small space.

			   html

			   <dl id="acc"> <!-- begins definition list -->
<dt>First Topic</dt> <!-- first topic -->
<dd> <!-- begins expandable area -->
<p>Content goes here</p>
<p>You may use as many paragraphs as you need to explain your topic</p>
</dd> <!-- ends expandable area -->
<dt>Second Topic</dt> <!-- second topic -->
<dd>
<p>content for your second topic goes here goes here.</p>
</dd>
...add more items...
</dl> <!-- ends definition list -->

			

Contact Form

We have included 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 process.php script to set your email address where the form results should be sent and to set a subject line for the emails.

			   javascript

			   // EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "yourname@yourdomain.com";
$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 [Line 76 of the "process.php" page in the javascripts folder] you will need to set the absolute file path to your "Thank You" page:

			   javascript

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

			

Important: This contact form works on many web hosting platforms, but we cannot guarantee it will work on all of them. If you have configured the form according to the instructions above but have problems, your web host'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 even movement. Learn more about Font Awesome - We recommend you bookmark their page for easy reference.

			   html 

			   <i class='fa fa-car'></i>

To use an icon as a bullet or marker, for example:

Home

			   CSS 

			   .home {
   position: relative; 
   padding: 0 0 5px 25px;}
.home:before {   position: absolute; 
   font-family: 'FontAwesome'; 
   content: "\f015"; 
   top: 5px; 
   
						   left: 0; 
   font-size: 20px; 
   color: #2aaf99;}

Adding the icons for "Home," "Call," "Email," and "Hours" can done by applying a style to the paragraph tag.

If you have the style available in the dropdown style menu in the text editing box, then choose the style you need.

1. Add your text
2. Place the cursor at the beginning of the text and choose from the dropdown style box for the classes available: Home, Call, Email, Hours or Comment

Call

Comment

3. Once you choose your style, it will automatically show up! Easy stuff!

Google Fonts

By using Google fonts, you now have access to a wide variety of custom fonts. This offers quite a bit of of flexibility for getting exactly the look you want, whether fancy or all business. These fonts can easily be added to 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.

			   html 

			   <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 

			   font: 48px 'Font Name', Verdana, Helvetica, sans-serif;
color: #0d5759;
margin: .3em 0 .3em 0;
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

<a href="images/gallery/image1.jpg" class="lightbox" title="Photo 1 - Description Goes Here">
<img alt="" src="images/gallery/image1th.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

			   <<a href="images/gallery/image1.jpg" class="lightbox" data-lightbox-gallery="gallery1"
				  
title="Photo 1 - Description Goes Here"><img alt="" src="images/gallery/image1th.jpg"></a>

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

Slide Show

We may have included an easy JavaScript slideshow on the home page of this template. It is very flexible and you can use your own images sized as shown on the index page and add additional images. To make changes to the images used, the file path to the image(s), or to add a hyperlink, you make the change within the script on the .dwt template page(s). Note that you will not see the slideshow while in Design View, but it is visible when you go to File > Preview in Browser.

The Highlighted "Description" area is the text that will appear on the slide show.

			   html

<div id="slider" class="nivoSlider">
<img src="images/mainimage1.jpg" title="Description" alt="Image description 
					 goes here">
<img src="images/mainimage2.jpg" title="Description" alt="Image description goes 
					 here">
<img src="images/mainimage3.jpg" title="Description" alt="Image description goes here">
</div>

[Credit for this application: Released by http://nivo.dev7studios.com/. ]

Tips, Tricks & Miscellaneous Info:

1. Naming your pages: make all of the letters lower case and use NO spaces between words. For example - gettingstarted.html or "camel case" - gettingStarted.html

2. Do NOT copy any text from Word, etc. directly into your web. Paste the text into notepad to remove all formatting. If you copy directly into your web, you may get lots of formatting code you don't need.

3. Make use of the Heading Tags. This template has 6 heading tags and quite a few classes that you can use to give interest to your website. Check our "Typography" page for samples of things used in this template/theme.

4.Meta Tags: To help get your site listed in search engines and directories, we have added blank meta tags for keywords and description to each page. You will want to either delete these tags or add your own specific content. DO NOT leave our default content in these tags.

5. Photo / Image Tips:
a. Use all lower case in your photo / image name.
b. Use "Insert > Picture > From .... Do not drag your images into your web.
c. Use an image program to size your images. Do not grab the corner of the image and pull in to make the image smaller. It may seem like a small image to you, but your viewer's browser must load the entire huge picture!

Policies and Services

Customer Support

We offer complete customer support for our templates. We make them and know best how to fix problems that may arise. There are, however, some limitations as to what we can do:

We will support all template issues for 12 months from the date of purchase.
We support all templates for six months after they have been removed from our catalog.
We do not support templates which have been heavily modified by adding or deleting divs, heavy modifications to the CSS file, etc.

Privacy Policy

Templates in Time respects the privacy of our visitors and customers. When you order a template or a custom design, your name, email address, date and the template name are forwarded to us. This information is kept only on my personal computer. No information is ever available to be sold or viewed by any parties.

Through our shopping cart, your credit card number is encrypted and recorded on a separate secure server. The number is NEVER stored on our server or computer.

The Fine Print

Refunds

Since we offer non-tangible irrevocable goods, we do not issue refunds after the product is purchased. If you have any problems with your template, please notify us as soon as possible.

Usage

You may only use each template on a single website, belonging to either you or your client. You have to repurchase same template in order to make another project with the same design.

License

Our website grants you a nonexclusive limited license to use the web templates sold through our web site in accordance with our End User License Agreement.

Image Coding:

This template offers a variety of ways to present your images as shown below. All you have to do is add the specific image class to your image.

Image sources:

Pixabay: All comment member's quotes
Big Stock Photos: Contact us for specific image numbers

Float Left

Float an image to the left without a border:

Float Right

Float an image to the right without a border:

Float an image to the left with a border:

Float an image to the right with a border:

Float an image to the left with a border and a shadow:

Float an image to the right with a border and a shadow:

Make a square image appear to be round and float it to the left. [looks square in Design view]

Make a square image appear to be round and float it to the right. [looks square in Design view]

Float an image to the left and add a frame to it:

Float an image to the right and add a frame to it:

Float an image to the left and curve the corners.

Float an image to the right and curve the corners.

Float an image to the left and add padding and a light border.

Float an image to the right and add padding and a light border.

Float an image to the left and tilt it to the left.

Float an image to the right and tilt it to the right.

Remember that you can add numerous classes to the images. This option gives you the ability to customized how your images look!