-
What's Templatica anyway?
Templatica is a membership based template club where you get full access to all templates in the css template gallery for a single and very affordable annual fee of $24!
Yup, that's right! All of this plus all of the templates released within one year from the day you join. No extra cost, no hidden fees!
You also have a possibility of purchasing a single template for as low as $5. -
Why is the fee so low?
I wanted to make premium templates available to as many of you as possible. Templates are not only meant for commercial but for educational purpose as well. I would like you to join, download templates, analyze the code and hopefully learn something new.
For those who'd like to test the quality of the templates I suggest my single template purchase option. -
What Templatica offers
Templatica offers static design templates with valid XHTML and CSS. All templates are tested in Firefox Win, IE7, IE6, Opera on Windows as well as Safari and Firefox on Mac.
Templates are highly customizable. The download package for each template includes HTML, CSS, JavaScript files and related images.
Usage
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
$("#slider2").easySlider({
controlsBefore: '<p id="controls2">',
controlsAfter: '</p>',
prevId: 'prevBtn2',
nextId: 'nextBtn2'
});
});
CSS
#slider{}
#slider ul, #slider li, #slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
p#controls, p#controls2{
margin:0;
position:relative;
}
#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{
display:block;
margin:0;
overflow:hidden;
text-indent:-8000px;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:-160px;
}
#nextBtn, #nextBtn2{
left:696px;
}
#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{
display:block;
width:30px;
height:77px;
background:url(images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #nextBtn2 a{
background:url(images/btn_next.gif) no-repeat 0 0;
}