logoYour Business Name

1234 Your street
City, State, Country
1.800.555.5555

Template Instructions

call usCall us: 800.555.5555

All of our templates/themes contain the following:

1 Basic Questions

Can I change the template colors? You can easily modify font colors (links, headings, and text) by editing the included CSS file. Some other elements may be easily modified as well. If you feel the colors used in this template do not meet your needs, we offer custom design and modification services. Please contact us for details and pricing information.

How do I add my site name? Changing the Template Name, along with adding your own slogan, is easily done by typing in your name in the dwt or on the page in our CSS files. In Concrete5, just add a content block and type in your name.

Can I change the images used in the template/theme? You MUST replace all sample images with those of your own. The images included in this template are only shown as samples.

2 Licensing:

Copyright:

The copyright for this web template/Concrete5 theme and accompanying design remains with the designer, Templates in Time. You may not claim ownership of the design nor may you use it for any purpose other than that explicitly set forth in the separate license agreement.

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. If you wish to use this template for subsequent sites, you must purchase a license for each additional site. 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.

3 What's Needed:

Expression Web: This template, using the TNT label, was designed specifically for Expression Web. Because the template uses dynamic web template (.dwt) pages, it is not compatible with FrontPage.

Dreamweaver: You can choose the Expression Web template if you need a DWT. If not, choose the HTML template.

HTML: This template is made for almost any html web editor.

Concrete5: This theme is made for the latest version of C5.

4 Tips, Tricks & Miscellaneous Info:

1. When you name your pages, make all of the letters lower case and use NO spaces between words. For example - gettingstarted.html (Concrete5 automatically names your pages.)

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 add to give interest to your website. Check our "Typography" page for samples of things used in this template/theme.

Cascading Style Sheets (CSS):

This template uses a CSS-based layout, which means that the page sections (header, sidebar, content, and footer) are positioned using CSS rather than within a table-based grid. Because this results in cleaner code, your pages load faster and search engines may rank your page better than they would in a table-based design.

JavaScript Calendar:

We may have included a simple JavaScript calendar in many of our templates. Note that you will not be able to see the calendar while in Design view. This script is set to show the current date only. If you do not wish to include the calendar, you can delete it from the code.

<div class="calendar">
<script type="text/javascript" src="calendar.js"></script>
</div>

To change the size of the fonts in the calendar or to change the colors, you will need to edit the calendar.js file.

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

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

Home

Call

Comment

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

Vendor for Icon Images:

The three icon images used on the home page were from www.aha-soft.com.

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.

Photo / Image Tips:

Here are a few tips on naming your photos/images.

1. Use all lower case in your photo / image name.

2. Use "Insert > Picture > From .... Do not drag your images into your web.

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

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.

You will see this in the "head" area of your page:
<link href='http://fonts.googleapis.com/css?family=Muli|Philosopher' rel='stylesheet' type='text/css'> (I'm using two Google fonts, so you will see both of them listed... Muli and another font.)

In the css file, you will see coding for the h1 tag. An example of this is:
h1 {
font: 2.3em 'Philosopher', Verdana, Helvetica, sans-serif;
color: #3d3d45;
margin: .3em 0 .3em 0;
letter-spacing: 1px;
}
This controls the size, color, margin and spacing of the Philosopher Google font. If you don't want to use Philosopher, just go to Google fonts, pick out one you like and replace the name in the "head" of each page and in the css file.


 

5 What's included in this template/theme:

(Not every item will be included in all templates/themes. If items are not included, it will be noted below and/or on the specific pages.)

Expression Web/Dreamweaver/HTML:

For our HTML templates, this template package comes with the starter web site in .zip format. Unzip the package and start editing the pages. You may wish to keep a backup copy of the .zip in case you need to start over. We have included a basic site structure with common pages to help you get started. You may rename the pages, add more pages, and add your content.

  • Multi-page web template designed to be used in Microsoft Expression Web/ Dreamweaver/any web editor.
  • Dynamic Web Template page(s). There will a .dwt page for each page layout included in your template for Expression Web & Dreamweaver Templates.
  • Slideshow (IF INCLUDED): easy JavaScript that allows you to replace our images with your own.
  • Blog pages for Concrete5 see in action. You may use the blog pages in our html templates, but you will have to enter the text manually.

6 Step by Step:

Expression Web, Dreamweaver, and a variety of html web editors

Editing the Dynamic Web Template (.dwt) Pages:

Dynamic Web Template pages can be found within the Templates folder of your web and are easily identified by the .dwt extension. They contain the basic page structure for all of your web (.html) pages. You will find a .dwt for each different page layout included in your template package. If you change a .dwt page, all of the web pages based on that .dwt will also change. Dynamic Web Templates have both “editable” and “non-editable” regions. Editable Regions can change from page to page such as your page content. You open the web (.htm) page and make changes inside of the editable regions. Non-editable Regions are areas defined by the .dwt and cannot be changed on your .html pages. To change non-editable regions, you have to open the .dwt file. Changing non-editable regions will change every web page in your site that is based on that .dwt page.

Editing the Content (.html) Pages:

This template package allows you to delete the pages you do not need 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. Remember to change the page title when you make a new page or rename a page.

Important: If you delete all content from an editable region, it may disappear and be difficult to find. Switch to Code or Split view and look for the following:

<!-- #BeginEditable “content” --><!-- #EndEditable -->
Type some placeholder text between the two tags as follows:
<!-- #BeginEditable “content” --><p>Content here</p><!-- #EndEditable -->
Switch back to Design view and you will now see the editable region and can add content to that area. Make sure you type in the paragraph tags <p></p>

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.

Dreamweaver: To create a new, blank page based on a .dwt page layout, select "File > New > HTML." Go to "Modify > Templates > Apply template to page> Then choose the type of page you wish to create."

Design View - Expression Web:

When looking at your pages while in Design view, 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. This will display your page correctly. To preview your pages, save the page after each change and then go to File > Preview in Browser.

Occasionally while editing your pages, you may “lose” the formatting. When this happens, save the page and then hit F5 to refresh your page. The page should snap back into position and the styles will return.

JavaScript Slideshow:

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.

<div id="slider" class="nivoSlider">
<img src="images/mainimage1.jpg" alt="" title="#htmlcaption1">
<img src="images/mainimage2.jpg" alt="" title="#htmlcaption2">
<img src="images/mainimage3.jpg" alt="" title="#htmlcaption3">
</div>

Change the text in the #htmlcaption below the slider.

<div class="nivo-caption1">Get a Custom Look At Less Than Half The Price.</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. 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.

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

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

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

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

// 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, you will need to set the absolute file path to your Thank You page:
[Line 76 of the "process.php" page in the javascripts folder]

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

Concrete5:

The following files are included in this C5 theme:

  • home.php
  • blog_entry.php
  • full.php
  • left_sidebar.php
  • right_sidebar.php
  • three_column.php
  • simple2column.php
  • simple3column.php
  • simple4column.php
  • catalog.php
  • products.php
  • dropdown menu coding and JavaScript
  • Slideshow: If included, you must FTP your images to the images folder. You will not be able to change them with the images interface in C5.

6 Step by Step:

Concrete5 Instructions

Installation Instructions
  1. Unzip the file you received in your download from Templates in Time.
  2. You will find: the theme file, our license agreement and the images you may use in this theme.
  3. Using "*FileZilla" or another ftp program, transfer the theme file into htdocs > themes. Make sure you are only transferring the theme file, not the entire file you received in your zip file.
  4. This theme uses a dropdown menu block. Using your ftp program, transfer the autonav folder into the "blocks" folder in C5:  htdocs > blocks
  5. To activate your new theme:
    • In the Dashboard, browse to Pages and Themes > Themes
    • You will see the theme listed under "Themes to Install"
    • Click on the "Install" button to install your theme. You will be sent to a page that shows you all of the theme files contained in the theme - Scroll to the bottom of the page and click "Return to Themes"
    • You will now see the theme and be able to click the Install, Preview, and Inspect buttons
    • Click on "Install"
    • You will be taken to a page that asks if you wish to use this theme for all pages - Select YES
    • Click on "Return to Website" to see your theme in action. Remember, it will not have the slide show nor your name on it yet. For your home page, you will need to choose "Design" under the edit menu and apply the "home" page.

*You can find the free Filezilla download here: http://filezilla-project.org/   choose Download Filezilla Client and install it

Adding Your Site Name:

 Sign in to the dashboard and choose "Edit". Click in the "Add to Sitewide Logo" area, add a block. If you are using a font, then choose "Content" as the type of block. If you are using an image, you would choose "Image" as the type of block. Add your text or choose the nameplate image you uploaded.

Adding Content:
  • Click on any of the areas available and choose "Add Block"
  • Choose the type of block you wish to add: menu, content, etc.
  • Add your text, images, forms, etc.
  • When you are finished, click on the editing box and choose, "Publish My Edits"
JavaScript Slide Show:

If you have a slide show included in your theme, we use an easy JavaScript slide show instead of the default slide show that comes with Concrete5. The reason we do this is we want the slide show to be responsive and we do not want you to have to purchase an add-on (although there may be a free version). It is very flexible and you can use your own images sized as shown on the index page and add additional images.

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

Adding Slide Show Images:

The slide show images cannot be uploaded through the file manager in this template. They must be uploaded to the server via ftp. You will need to name your images the same as ours (mainimage1.jpg, mainimage2.jpg and mainimage3.jpg). Then upload them to the "images" folder in the theme. If you have questions, please give us a call or email us. We can easily walk you through it. If we are uploading your theme, we will upload the images for you as well.

JavaScript Calendar:

We may have included a simple JavaScript calendar in many of our themes. This script is set to show the current date only. If you do not wish to include the calendar, you can delete it from the code in the footer.

<script type="text/javascript" src="<?php echo $this->getThemePath()?>/javascripts/calendar.js">
</script>

To change the size of the fonts in the calendar or to change the colors, you will need to edit the calendar.js file in the JavaScript folder.

Contact Form:

The contact form shown in this template is similar to the contact form used in C5, but is coded in Concrete5 when you create it. The button coding used in this template will be used.

JavaScript Lightbox:

The lightbox shown in this template is NOT available for C5 in this template. You may be able to purchase an add-on from the Concrete5 site.



7 Contact Us:

We also offer customer support by email and phone during our regular business hours:

I work two jobs, so I will not be available during the weekday daytime hours. Please don't call after 10 pm, I'm a one woman company and I've got to sleep sometimes!

Return Policies

Morbi id dolor tellus. Cras nunc massa, congue sit amet interdum id, vulputate ac eros. Mauris eu adipiscing erat. Ut magna nunc, tincidunt in ultricies eu, elementum ut erat.

 

Shipping Information

Nunc fermentum nisi rhoncus ante tristique molestie. Proin vel tempor orci. Proin quam enim, tincidunt at lobortis a, adipiscing a leo. Cras porta cursus porta. Vivamus vitae rutrum lectus.

Contact Us

123 Main Street
Your City, Your State

1.800.123.4567

Monday-Friday: 8-5
Saturday: Noon-5
Sunday: Closed

Designed by Templates in Time