Documentation (Genoa and older) / English / Skins / Adding fancy JavaScript FX to your layouts

Adding fancy JavaScript FX to your layouts

First, we need to upload the required files to server. Open the unzipped folder easyslider1.7 and upload this folders: js, css and images to skins/YOUR-SKIN folder (e.g. skins/sed-light )

Now we need to insert this code:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true,
				numeric: true
			});
		});	
	</script>
	
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />

between <head></head> tags in our header.tpl.

Open skins/YOUR-SKIN/header.tpl (e.g. skins/sed-light/header.tpl) and insert the code above, before </head> tag in header.tpl

Example:

<head>
<meta http-equiv="content-type" content="{HEADER_META_CONTENTTYPE}; charset={HEADER_META_CHARSET}" />
<meta name="description" content="{HEADER_META_DESCRIPTION}" />
<meta name="keywords" content="{HEADER_META_KEYWORDS}" />
<meta name="generator" content="Cotonti http://www.cotonti.com" />
<meta http-equiv="expires" content="Fri, Apr 01 1974 00:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="last-modified" content="{HEADER_META_LASTMODIFIED} GMT" />
{HEADER_HEAD}
{HEADER_BASEHREF}
<link rel="shortcut icon" href="favicon.ico" />
<link href="skins/{PHP.skin}/{PHP.theme}.css" type="text/css" rel="stylesheet" />
{HEADER_COMPOPUP}
<title>{HEADER_TITLE}</title>
<script type="text/javascript" src="skins/{PHP.skin}/js/jquery.js"></script>
<script type="text/javascript" src="skins/{PHP.skin}/js/easySlider1.7.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true,
				numeric: true
			});
		});	
	</script>
	
<link href="skins/{PHP.skin}/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
</head>

NOTE that we need to add skins/{PHP.skin}/ in src="***" (like: src="skins/{PHP.skin}/js/jquery.js") because that's the correct path for the files. Otherwise, those files won't be included.

After that, we have to decide where we want our slider to appear. If you want it only on the index page, you'll need to insert the code inside index.tpl, but if you want it on every page you'll have to use header.tpl since we know that header.tpl and footer.tpl are "almost" static parts - meaning that they don't change when viewing different pages. (Of course, if you haven't enabled customhf function in your config.php file. But that's another story)

I will be using index.tpl file because I only want slider to appear on index page.

We have 2 ways to do this:
1. Inserting the code directly inside index.tpl
2. Inserting the code by using TPL includes {FILE "skins/mytext.tpl"}

#1. 1. Inserting the code directly inside index.tpl

1.1. Open your skins/YOUR-SKIN/index.tpl (e.g. skins/sed-light/index.tpl)
1.2. Place this code wherever you want slider to appear:

<div id="slider">
			<ul>				
				<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>			
			</ul>
		</div>

Example:

skins/sed-light/index.tpl :

<!-- BEGIN: MAIN -->
<div id="slider">
			<ul>				
				<li><a href="http://templatica.com/preview/30"><img src="skins/{PHP.skin}/images/01.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/7"><img src="skins/{PHP.skin}/images/02.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/25"><img src="skins/{PHP.skin}/images/03.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/26"><img src="skins/{PHP.skin}/images/04.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/27"><img src="skins/{PHP.skin}/images/05.jpg" alt="Css Template Preview" /></a></li>			
			</ul>
		</div>


<div id="lSide">

	{INDEX_NEWS}
	<div class="lboxHD">{PHP.skinlang.index.Newinforums}:</div>
	<div class="lboxBody">{PLUGIN_LATESTTOPICS}</div>
	
</div>
<div id="rSide">

	<div class="rboxHD">{INDEX_TOP_TAG_CLOUD}:</div>
	<div class="rboxBody">{INDEX_TAG_CLOUD}</div>
	
	<div class="rboxHD">{PHP.L.Polls}:</div>
	<div class="rboxBody">{PLUGIN_INDEXPOLLS}</div>
	
	<div class="rboxHD">{PHP.skinlang.index.Recentadditions}:</div>
	<div class="rboxBody">{PLUGIN_LATESTPAGES}</div>
	
	<div class="rboxHD">{PHP.skinlang.index.Online}:</div>
	<div class="rboxBody"><a href="plug.php?e=whosonline">{PHP.out.whosonline}</a> :<br />{PHP.out.whosonline_reg_list}</div>
</div>

<!-- END: MAIN -->

#2. 2. Inserting the code by using TPL includes {FILE "skins/mytext.tpl"}

I prefer this method because .tpl files are more clean this way.

2.1. Create a new XXX.tpl file. Mine will be slider.tpl
2.2. Paste this code inside it:

<div id="slider">
			<ul>				
				<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>			
			</ul>
		</div>

2.3. Upload XXX.tpl (slider.tpl) file in skins/YOUR-SKIN folder (e.g. skins/sed-light)
2.4. Open your index.tpl file (skins/YOUR-SKIN/index.tpl (e.g. skins/sed-light/index.tpl))
2.5. Include your XXX.tpl file wherever you want the slider to appear. The syntax of "include" function is:

{FILE "skins/YOUR-SKIN/XXX.tpl"}[/html]
Example:

[i]skins/sed-light/index.tpl[/i] :

[highlight=html]
<!-- BEGIN: MAIN -->
{FILE "skins/sed-light/slider.tpl"}
<div id="lSide">

	{INDEX_NEWS}
	<div class="lboxHD">{PHP.skinlang.index.Newinforums}:</div>
	<div class="lboxBody">{PLUGIN_LATESTTOPICS}</div>
	
</div>
<div id="rSide">

	<div class="rboxHD">{INDEX_TOP_TAG_CLOUD}:</div>
	<div class="rboxBody">{INDEX_TAG_CLOUD}</div>
	
	<div class="rboxHD">{PHP.L.Polls}:</div>
	<div class="rboxBody">{PLUGIN_INDEXPOLLS}</div>
	
	<div class="rboxHD">{PHP.skinlang.index.Recentadditions}:</div>
	<div class="rboxBody">{PLUGIN_LATESTPAGES}</div>
	
	<div class="rboxHD">{PHP.skinlang.index.Online}:</div>
	<div class="rboxBody"><a href="plug.php?e=whosonline">{PHP.out.whosonline}</a> :<br />{PHP.out.whosonline_reg_list}</div>
</div>

<!-- END: MAIN -->

The difference between 1st and 2nd way is that when you need to add/edit/delete slide, instead of opening index.tpl file and then inserting new list item you simply open your XXX.tpl (in my case it's slider.tpl) and make all the changes inside.

The 2nd way of doing it also makes it easier to include slider in more .tpl files by simply adding {FILE "skins/your-skin/xxx.tpl"} tag to any .tpl file. Then when you change something in your xxx.tpl file, it gets changed in every .tpl file which has {FILE "skins/your-skin/xxx.tpl"} tag inside itself. You don't have to edit every single file manually, which is not the case with 1st way of doing it! Learn more about includes!