How to Use & Integrate Our Page Templates

This tutorial is there for those users' who wish to integrate one or more of the page templates featured in our free page templates section of the website.

Before we begin with this tutorial we would like to remind you that HTML5 page templates are not compatible with XHTML website templates, so please be sure to download the correct page template file.

A rule of thumb:
Download XHTML page templates for XHTML website templates and HTML5 page templates for HTML5 website templates.

In this tutorial we will be adding a portfolio page template to a website template that has no portfolio page as default.

If your original template already has a "portfolio" or "gallery" layout and you want to replace it please use this tutorial as well.

Step 1 - Introduction

Download and unzip the page template to your desktop that you wish to add to your current template or web page.

Once you have unzipped the file you will have a folder with the name of the page template, this contains all the files we will be working on.

The folder structure that can be seen, replicates the folder structure that can be found in a large amount of our free templates, this is to make it easier to integrate the files into the template of choice.

Step 2 - Open files in your editor

Open up the "index.html" file in your editor of choice, Dreamweaver, notepad etc.

If you previously downloaded a free website template that has no "portfolio.html" simply duplicate your "full-width.html" web page and rename it to "portfolio.html".

If you already have a "portfolio.html" in the template you previously downloaded and you wish to change it, simply open it in your editor of choice and replace the portfolio code with the new code.

Step 3 - Modifying original template files

Now we combine the new code found in the downloaded page templates "index.html" with the "portfolio.html" from the original free website template or free HTML5 template.

The following is basically the same for both XHTML templates and HTML5 templates.

Both files "index.html" and the "porftolio.html" should still be open in your editor of choice.

In your "portfolio.html" find the following code:

<div class="wrapper row2"> <div id="container" class="clear"> <!-- ############################# --> LOTS OF CONTENT HERE <!-- ############################ --> </div> </div>

Please note: "row2" may well be "row3" or "col2" or something else. The important section is the "container" div.

In the above code block you can see "LOTS OF CONTENT HERE" that represents the default page content that can be found in the template when originally downloaded from our site. If this has changed in your version you will have to take care not to delete the wrong content.

The complete content needs to be removed from within the following code block:

<div id="container" class="clear"> <!-- ############################# --> LOTS OF CONTENT HERE <!-- ############################# --> </div>

The default content that must be removed looks like this:

<h1>Headline 1 Colour and Size</h1> <h2>Headline 2 Colour and Size</h2> <h3>Headline 3 Colour and Size</h3> <h4>Headline 4 Colour and Size</h4> <h5>Headline 5 Colour and Size</h5> <h6>Headline 6 Colour and Size</h6> <p>This is a W3C standards compliant free website template from <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a>. For full terms of use of this template please read our <a href="http://www.os-templates.com/template-terms">Website Template Licence</a>.</p> <p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more CSS templates visit <a href="http://www.os-templates.com/">Free Website Templates</a></p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Etiam vel sapien et est adipiscing commodo.</li> <li>Duis pharetra eleifend sapien, id faucibus dolor rutrum et.</li> <li>Donec et dui dolor, in lacinia leo.</li> <li>Mauris posuere tellus ac purus adipiscing dapibus.</li> </ul> <p>Vestibulumaccumsan egestibulum eu justo convallis augue estas aenean elit intesque sed. Facilispede estibulum nulla orna nisl velit elit ac aliquat non tincidunt. Namjusto cras urna urnaretra lor urna neque sed quis orci nulla. Laoremut vitae doloreet condimentumst phasellentes dolor ut a ipsum id consectetus. Inpede cumst vitae ris tellentesque fring intesquet nibh fames nulla curabitudin.</p> <ol> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Etiam vel sapien et est adipiscing commodo.</li> <li>Duis pharetra eleifend sapien, id faucibus dolor rutrum et.</li> <li>Donec et dui dolor, in lacinia leo.</li> <li>Mauris posuere tellus ac purus adipiscing dapibus.</li> </ol>

Once you have removed the default content you should have something like this:

<div id="container" class="clear"> <!-- ############################# --> <!-- ############################# --> </div>

Step 4 - Add the portfolio code

As each portfolio page template is different in its appearance the code below will vary in the individual page templates, for this example we are using the code from our "Portfolio 17 Page Template".

Now that the "portfolio.html" template has been cleared of the original code, we can now add the new code from the "index.html" (from the page templates zip file).

Please note: you will find a "div" called "pagination" in the portfolio code, we will come to that later, for the time being copy it as well.

For XHTML templates - find the following code (or similar) In your "index.html":

<!-- ############################# --> <div id="portfolio" class="clear"> <ul> <li> <div class="article"> <div class="figure"><a href="#"><img src="spacer.gif" alt="" /></a> <div class="figcaption"> <h2>Metridiculis conseque quis</h2> <p><strong>Tagged in:</strong> <a href="#">MyTagName</a></p> </div> </div> </div> </li> <li class="last"> <div class="article"> <div class="figure"><a href="#"><img src="spacer.gif" alt="" /></a> <div class="figcaption"> <h2>Metridiculis conseque quis</h2> <p><strong>Tagged in:</strong> <a href="#">MyTagName</a></p> </div> </div> </div> </li> </ul> </div> <!-- ############################# --> <div class="pagination">ADD PAGINATION HERE IF NEEDED</div> <!-- ############################# -->

For HTML5 templates - find the following code (or similar) In your "index.html":

<!-- ############################# --> <section id="portfolio" class="clear"> <ul> <li> <article> <figure><a href="#"><img src="spacer.gif" alt=""></a> <figcaption> <header>Metridiculis conseque quis</header> <p><strong>Tagged in:</strong> <a href="#">MyTagName</a></p> </figcaption> </figure> </article> </li> <li class="last"> <article> <figure><a href="#"><img src="spacer.gif" alt=""></a> <figcaption> <header>Metridiculis conseque quis</header> <p><strong>Tagged in:</strong> <a href="#">MyTagName</a></p> </figcaption> </figure> </article> </li> </ul> </section> <!-- ############################# --> <div class="pagination">ADD PAGINATION HERE IF NEEDED</div> <!-- ############################# -->

For both types of templates - copy the code block (as shown above) from the "index.html" and place it into the "portfolio.html" where you previously removed the default content, as seen below:

<div id="container" class="clear"> <!-- ############################# --> PLACE THE PORTFOLIO CODE HERE <!-- ############################# --> </div>

Your result should look something like this:

<div id="container" class="clear"> <!-- ############################# --> <div id="portfolio" class="clear"> <ul> <li> <div class="article"> <div class="figure"><a href="#"><img src="spacer.gif" alt="" /></a> <div class="figcaption"> <h2>Metridiculis conseque quis</h2> <p><strong>Tagged in:</strong> <a href="#">MyTagName</a></p> </div> </div> </div> </li> <li class="last"> <div class="article"> <div class="figure"><a href="#"><img src="spacer.gif" alt="" /></a> <div class="figcaption"> <h2>Metridiculis conseque quis</h2> <p><strong>Tagged in:</strong> <a href="#">MyTagName</a></p> </div> </div> </div> </li> </ul> </div> <!-- ############################# --> <div class="pagination">ADD PAGINATION HERE IF NEEDED</div> <!-- ############################# --> </div>

The pagination block is there as a place holder - if you do not intend on adding a paginated navigation to the portfolio template you can simply delete the code block:

<div class="pagination">ADD PAGINATION HERE IF NEEDED</div>

Now that we have integrated our code and completed all the major source code changes we go onto the simple stuff.

If you now open the "portfolio.html" in your browser of choice, IE, FireFox etc. you will see that there are no images and no styling.

Step 5 - Adding CSS

Now we add some styling to the portfolio page. As mentioned in Step 1 you have a "portfolio.css" file in the downloaded page templates zip file.

All you need to do is locate the "styles" folder in your original free website templates structure and simply add the "portfolio.css" file to the "styles" folder.

Once you have placed the "portfolio.css" file in the styles folder, open the "layout.css" file in your editor of choice.

Find the following CSS code (or similar):

@import url(navi.css); @import url(forms.css); @import url(tables.css); @import url(homepage.css);

Add the following code line to the "layout.css"

@import url(portfolio.css);

Your result should look something like this:

@import url(navi.css); @import url(forms.css); @import url(tables.css); @import url(homepage.css); @import url(portfolio.css);

Now open your "portfolio.html" in your browser (in some cases you will have to clear the browser cache) and you will see that the portfolio code is now styled.

Step 6 - Adding images

Adding images to your template is simple, find the following code in your "portfolio.html":

XHTML templates use:

<a href="#"><img src="spacer.gif" alt="" /></a>

HTML5 Templates use:

<a href="#"><img src="spacer.gif" alt=""></a>

All you need to do is change the "src" element to where your images are stored, an example:

src="images/portfolio/image1.jpg"

Please note:
when adding images they all need to be the same width as the "spacer.gif" provided in the downloaded zip file, but the height can be changed. Keep all of the images the same width and height.

Conclusion

Now that the portfolio code has been integrated, images have been added to the code and the CSS file has been put where it is supposed to be, you should have a basic portfolio page which can be further styled by modifying the "portfolio.css" file found in your "styles folder".

If the tutorial hasn't helped you integrate the page template that you have downloaded, we suggest you take a closer look at the live demos of the individual page templates as well as following this template tutorial.

With the tutorial and a live demo, you shouldn't have any problems integrating the page layout that you want.