Adding CU3ER to a Template

Over the last few months we have been approached many a time about adding CU3ER to our templates.

This short tutorial will show you / give you the basics to add CU3ER to almost all of the templates that can be found within this website.

CU3ER support documentation with examples can be found here »

Before we begin, the end result can be found here »

Steps to Take

Now that you have downloaded your template of choice, extract the zip file and follow the steps below:

Step 1:

The extracted files should be in a folder corresponding to the template name (e.g. ost-magazine) and within that folder you should have:

  • images folder
  • scripts folder
  • styles folder
  • index.html

If you don't have a "scripts" folder, simply create one.

Step 2:

A standalone version of CU3ER, specifically for templates found in this site can be downloaded here.

Once you have downloaded the file, please extract it somewhere on your computer and follow these instructions:

(Please Note: The folder structure has been copied from the templates structure for ease of use. So the following is a little monotone, sorry.)

  1. Go to the folder called "images" and copy the images into your templates "images" folder.

  2. Go to the "Scripts" folder and copy all of the contents into your templates "scripts" folder.

  3. Go to the "styles" folder and copy the contents into your templates "styles" folder.

  4. Copy the "cu3er.swf" and place it in the same place as your "index.html" file.

  5. Copy the "cu3er.xml" and place it in the same place as your "index.html" file.

Step 3:

Open your HTML file (index.html) and locate the </head> tag (at the top of the code) and insert the following:

<link rel="stylesheet" href="styles/cu3er_slide.css" type="text/css" /> <script type="text/javascript" src="scripts/swfobject/swfobject.js"></script> <script type="text/javascript" src="scripts/cu3er.js"></script>

Your code should now look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr"> <head profile="http://gmpg.org/xfn/11"> <title>Ost Magazine - CU3ER Demonstration</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <link rel="stylesheet" href="styles/layout.css" type="text/css" /> <!-- The new code from above goes here --> <link rel="stylesheet" href="styles/cu3er_slide.css" type="text/css" /> <script type="text/javascript" src="scripts/swfobject/swfobject.js"></script> <script type="text/javascript" src="scripts/cu3er.js"></script> </head>

Step 4:

Now we add CU3ER to the HTML file between <body>…</body>, in the position that you want it to be:

<div class="wrapper"> <div id="featured"> <div id="cu3er-wrapper"> <div id="cu3er-container"> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/ download_buttons/get_flash_player.gif" alt="" /></a> </div> </div> </div> </div>

Conclusion

You can add CU3ER pretty much anywhere between <div class="wrapper"></div>.

If you take a close look at the standalone version, you will be able to follow this short tutorial quite easily.

If you want CU3ER to do other functions rather than the defaults that we have set-up, then please read the CU3ER documentation closely.

Don't be scared to play around with the "cu3er.xml" set-up file, learning by doing is a great motto to follow.

If you screw everything up, don't worry, its all here to be downloaded again :)