Upload
pablo-chavarria-campos
View
233
Download
0
Embed Size (px)
Citation preview
8/6/2019 How to Build a Joomla Template Start to Finish
1/24
RSS Subscribers
75,215
Twitter Followers
39,888
Facebook Fans
10,292
Photoshop toHTMLIn Photoshop to HTML, Nettuts+
editor Jeffrey Way takes you through
the entire process of converting a
design from Photoshop into a
complete HTML/CSS website!
eBook comes with 14 screencastlessons.
Find Out More
Latest SnippetElegant Pubsub with jQuery
posted 26 January 2011 3:01 AM
View All Nettuts+ on Snipplr
Follow Nettuts+and Tuts+ onTwitter
Excellent new #WordPress
theme from @makedesign
- http://bit.ly/e2BSJA
@ryanfaceryan Ryan - you
think it's cool to post your
video on Nettuts+?
RT @ryanfaceryan: oh look
my talk is up on blip.tv!
Tutorial Details
Topic: Joomla Template CreationDifficulty: Basix
Estimated Completion Time: 2 Hours
How to Build a JoomlaTemplate: Start to FinishRyan Olson on Oct 21st 2010 with 121 comments
Tutorials \ PHP
Tweet
To begin, I am not even going to touch the inevitable flame war here. Joomla vs WordPress vs who cares?
And frankly, neither should you. You wouldnt hammer a nail with a saw, would you? So let s bear in mind
that every job requires the correct tool.
That being said, this tutorial will demonstrate how to proceed from design to deployment of a complete
Joomla template theme, including core override and template option parameters that you can use and
abuse to your hearts content.
Getting AroundThe PSD
The HTML
The CSS
The JavaScript
Joomla Conversion
Frontpage Override
Dynamic Parameters
Installation
My goal is to provide something useful not ammunition. There are so many wonderful WordPress
resources and so few for Joomla. This is my attempt to aid in the effort; I hope you find it useful. So lets
begin!
Download SOURCE FILES Demo VIEW IT ONLINE
Home Tutorials Articles Tips Sessions Basix Videos Premium Search...
Advertise Write for Us About Usage
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 1 / 24
http://wcmelb.blip.tv/file/4821532?filename=Wcmelb-ScalingWordPressForHiTraffic939.mhttp://www.twitter.com/ryanfaceryanhttp://www.twitter.com/ryanfaceryanhttp://bit.ly/e2BSJAhttp://www.twitter.com/makedesignhttp://twitter.com/#search?q=%23WordPresshttp://twitter.com/tutsplushttp://twitter.com/envatowebdevhttp://snipplr.com/users/Nettutshttp://snipplr.com/view/47893/http://rockablepress.com/books/photoshop-to-html/http://rockablepress.com/books/photoshop-to-html/http://rockablepress.com/books/photoshop-to-html/http://facebook.com/nettutsplushttp://twitter.com/envatowebdevhttp://feeds.feedburner.com/nettutshttp://facebook.com/nettutsplushttp://twitter.com/envatowebdevhttp://feedburner.google.com/fb/a/mailverify?uri=nettutshttp://feeds.feedburner.com/nettutshttp://demos.thatryan.com/joomla_tutorial/http://nettuts.s3.amazonaws.com/826_joomla/source.ziphttp://reddit.com/submit?url=http%3A%2F%2Fnet.tutsplus.com%2Ftutorials%2Fphp%2Fhow-to-build-a-joomla-template-start-to-finish%2Fhttp://twitter.com/sharehttp://net.tutsplus.com/author/ryan-olson/http://net.tutsplus.com/category/tutorials/php/http://net.tutsplus.com/category/tutorials/http://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/http://twitter.com/envatowebdevhttp://feeds.feedburner.com/nettutshttp://net.tutsplus.com/tag/premium/http://net.tutsplus.com/tag/premium/http://net.tutsplus.com/tag/videos/http://net.tutsplus.com/tag/basix/http://net.tutsplus.com/sessions/http://net.tutsplus.com/tag/tips/http://net.tutsplus.com/category/articles/http://net.tutsplus.com/category/tutorials/http://net.tutsplus.com/http://net.tutsplus.com/about/termshttp://net.tutsplus.com/about/http://net.tutsplus.com/about/write-a-tutorial/http://buysellads.com/buy/detail/197http://net.tutsplus.com/8/6/2019 How to Build a Joomla Template Start to Finish
2/24
http://wcmelb.blip.tv/file/4821532?
filename=Wcmelb-
ScalingWordPressForHiTraffic939.
@andrew8088 But that's
set in your vimrc file, right?
I commented that line out,
and it fixed that for me.
Top Sellingon Codecanyon
CSS3 Mega Drop
Down Menu only
$4.00 by Keliah
jQuery Banner
Rotator / Slid ...
only $8.00 by
webtako
New Tutorialson Tuts+ Marketplace
Rails 3 Part II -
PeepCode S ...
only $12.00 by
PeepCode
Play by Play: Gary
Bernhardt ... only
$12.00 by
PeepCode
Theo Thermometer - More
Freelance
Jobs
More Freelance Jobs
Web BasixJust getting started? Start with our
basix tutorials on the fundamentals.
View All Basix Tutorials
Other Plus Sites ...
The PSD
Back Up
Here is the design I am starting with. I found a free PSD file online here, and modified it for this tut. The
easiest and fastest way I have found to get from PSD to HTML is how I will demonstrate here. Begin by
making sure a u t o s e l e c t l a y e r s is enabled in Photoshop, and then make note of which images you
need to grab. Concentrate on parts that either you cannot, or do not want to duplicate, via CSS. This
includes things, such as actual imagery, logo, and buttons (possibly). Shadows and gradients are your call,
considering the new CSS3 properties, and should be decided on a case by case basis. For this tut, we will
achieve those effects with CSS.
Start by clicking on the logo to highlight its corresponding layer in the layers panel. Now, move the cursor to
the thumbnail and o p t i o n + c l i c k it to auto select the entire layer; you should should see ants dancing
around it now.
Old browsers get solid colorsfine with me!
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 2 / 24
http://tutsplus.com/http://vector.tutsplus.com/http://audio.tutsplus.com/http://ae.tutsplus.com/http://net.tutsplus.com/tag/basix/http://net.tutsplus.com/tag/basix/http://jobs.freelanceswitch.com/http://creattica.com/css/latest-designshttp://feedproxy.google.com/~r/creattica-css/~3/rfnas1BDxig/54109http://marketplace.tutsplus.com/item/play-by-play-gary-bernhardt-peepcode-screencast/164591http://marketplace.tutsplus.com/item/rails-3-part-ii-peepcode-screencast/164622http://marketplace.tutsplus.com/http://codecanyon.net/item/jquery-banner-rotator-slideshow/109046http://codecanyon.net/item/css3-mega-drop-down-menu/126387http://codecanyon.net/http://www.twitter.com/andrew8088http://wcmelb.blip.tv/file/4821532?filename=Wcmelb-ScalingWordPressForHiTraffic939.mhttp://theodin.co.uk/blog/design/everlyn-marketing-and-pr-site-template.html8/6/2019 How to Build a Joomla Template Start to Finish
3/24
SmashingThis site is part of the
Smashing network.
Create aTutorial, GetPaid!Have something to teach the world?
Want to earn money doing it?
Tutorials, screencasts, and articles
published here on Nettuts+ are
largely contributed by readers just
like you! We'll pay you great money
for good content. Find Out More
Next, hit copy, create a new file, (cmd+c, cmd+n if you are rocking a Mac) and you will notice that the height
and width are automatically set; so simply hit e n t e r, then paste (cmd+v) and you have the logo. You may
not see it as the background blends with the text, so the next step, for all images you copy that have
transparency, is to turn off the background layer.
Next, save it as a . p n g file to preserve the pretty see-through-nessand name it something obvious like
logo or such. BAM! Image one is done. Rinse and repeat for all the images you need to grab.
A tricky one can be the button dots used for the slider navigation. The easiest way that I ve found to do this
is to copy the layer or group that makes up one of the dots, and then put it into a new file, bigger than its
actual size. Then turn off the background layer, go to t r i m in the edit menu,
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 3 / 24
http://www.smashingmagazine.com/the-smashing-network/http://net.tutsplus.com/about/write-a-tutorial/http://net.tutsplus.com/about/write-a-tutorial/http://webdesign.tutsplus.com/http://mobile.tutsplus.com/http://active.tutsplus.com/http://psd.tutsplus.com/http://net.tutsplus.com/http://cg.tutsplus.com/http://photo.tutsplus.com/http://tutsplus.com/http://vector.tutsplus.com/8/6/2019 How to Build a Joomla Template Start to Finish
4/24
and get rid of the transparent pixels so that the size is precise.
Continuing on, edit the image canvas size to be 200% height, and simply copy, (o p t i o n + c l i c k) the layer or
group and drag it down to duplicate it. Make a change to this one and you now have an active state! Easy
as pie right? Save this new image and our buttons are now ready!
Once you have gathered the pics, drop them into a folder, called images, and now it is time to begin
building the HTML structure; lets dig into some HTML.
The HTML
Back Up
So we have our design and images; now its time to turn them into something usable. You can skip this step,
and very well may learn to as you become more adept at templating a site; however, I still find it helpful to
construct the static version before full conversion into a theme. Create a simple folder structure like so, and
then in i n d e x . h t m l, build a standard HTML skeleton with a structure.
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 4 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
5/24
Joomla! Template Tutorial
This is the base HTML5 we are going to use to create this site. Its based on the HTML5 Boilerplate. You will
notice the inclusion of the Moderizr script, so be sure to download it there if you need it. Starting from the
top, lets go ahead and add in our logo and navigation sections, so inside the header_container, add the
following chunk:
Custom Template
Home
About
Sub Link
Sub Link
Sub Link
Sub Link
Sub Link
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 5 / 24
http://www.modernizr.com/http://html5boilerplate.com/8/6/2019 How to Build a Joomla Template Start to Finish
6/24
Sub Link
Blog
Contact
This covers the logo link and a simple menu system, complete with dropdown goodness. I used the new tag,
na v, for the semantic HTML5 markup. Up next is our featured content slider area, so, inside of our wrapper
section, add the following to create an image list:
Testing Caption!
Testing Caption!
Testing Caption!
Testing Caption!
Feel free, obviously, to change the text and image links to suit your own setup, or simply follow along here.
Be sure that you are not hopping into a browser to check this out yet, because it will look dreadful!
The list of elements inside the slider u l will all start out hidden, except for the first one, which is why it has a
class assigned to it: f i r s t. This way, we keep all of the images from briefly displaying on page load,
bypassing that annoying flicker.
Next, we add some main content stuff; drop in these two sections. I am simply duplicating what was in the
PSD when we started.
Why Joomla?
Well it is pretty awesome. How about that? Also, the model - view - controller structure is a strong base for
Why Am I Writing This Stuff?
I don't know! I should just use some Lorem Ipsum and be done with it here, right? But hey, I thought this woul
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum torto
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 6 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
7/24
I gave the first chunk an a s i d e tag as I feel it tangentially relates to the rest of the content, and the main
content gets the article tag as it would be the main area.
Now to incorporate our tri-column section:
Base Info
Did I design this?
Nope, not really.
It is based off a free PSDYou can find
8/6/2019 How to Build a Joomla Template Start to Finish
8/24
Some Links
PSD Base
thatryan.com
myappshelf.com
twitter.com/ryanolson
More Links
Lorem
Ipsum
Ipsum
Lorem
About This Template
So a few fun things should work in this bad boy. We will have a cool animated menu, some sweet popup lightbox imag
And finally, just outside of the closing section tag for the f o o t e r _ c o n t a i n e r, paste in our lower copyright
area that includes the link to jump back to top.
Go Up!
Copyright yo!
Notice how the h r e f points to the header ID; this will allow a click here to jump the page right back up to the
top-most section. Later, we will enhance this with some scrolling fun.
Onto some styling now; if you take a look in a browser, you will find something similar to this but dont
worry, we are about to rectify the situation!
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 8 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
9/24
The CSS
Back Up
Lets work on the styling a bit. Inside your s t y l e . c s s file, begin by dropping in this base here. It contains a
reset and basic setup of the elements, and of course, the ubiquitous clearfix.
/*
*Reset
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,
hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, figure, footer, header,
hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
body { font:14px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 9 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
10/24
h1,h2,h3,h4,h5,h6 { font-weight: lighter; text-rendering: optimizeLegibility; }
html { -webkit-font-smoothing: antialiased; }
a:hover, a:active { outline: none; }
a, a:active, a:visited { color:#37592f;text-decoration:none; }
a:hover { color:#036; }
small { font-size:85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align:top; }
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #FF5E99; }
html { overflow-y: scroll; }
button { width: auto; overflow: visible; }
.alignleft{float: left; margin: 0px 20px 10px 0px;}
.alignright{float: right; margin: 0px 0px 10px 20px;}
.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.clearfix { display: block; }
Ok, that part is done yay; now lets add in our own styling!
Here we have some basic typography setup, colors and sizes.
body, select, input, textarea {font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#111; }
h1,h2,h3,h4,h5,h6{font-family:Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;color:#37592f;margin:5px 0;}
h1{font-size:36px;}
h2{font-size:32px;}
h3{font-size:28px;}
h4{font-size:24px;}h5{font-size:18px;}
h6{font-size:14px;}
Now, give some styling to the top region.
body
{
background: #e8e8e8;
}
hr
{
border-top: 1px inset #37592f;
margin: 10px;
}
#header
{
background: #37592f;
width: 100%;
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 10 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
11/24
}
#header_container
{
height: 220px;
margin: 0 auto;
position: relative;
width: 940px;
z-index: 5;
}
.logo
{
background: url(../images/logo.png) no-repeat;
float: left;
height: 49px;
margin-top: 40px;
width: 170px;
}
.logo a
{
display: block;
height: 100%;
text-indent: -9999px;
width: 100%;
}
Note the image in the logo styling; if you did not name yours the same, be sure to change it here.
The menu comes next. Here, we take care of positioning and text sizing, as well as handling multi-level lists!
#main_nav
{
float: right;
margin-top: 40px;
position: relative;
z-index: 6;
}
#main_nav ul
{
margin: 0;
padding: 0;
}
#main_nav ul li
{
float: left;
list-style: none;
margin-left: 10px;
position: relative;
}
#main_nav ul li a
{
color: #fff;font-size: 22px;
text-decoration: none;
text-shadow: 0px -1px 0px #37592f;
}
#main_nav ul li a:hover
{
color: #999;
}
#main_nav ul li ul
{
background: #37592f;
border-bottom: 1px solid #555;
border-left: 1px solid #555;
border-right: 1px solid #555;
display: none;
left: -10px;
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 11 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
12/24
margin: 0;
moz-border-radius-bottomleft: 10px;
moz-border-radius-bottomright: 10px;
padding: 10px;
position: absolute;
top: 100%;
webkit-border-bottom-left-radius: 10px;
webkit-border-bottom-right-radius: 10px;
width: 140px;
z-index: 7;
}
#main_nav ul li:hover ul
{
display: block;
}
#main_nav ul li ul li
{
margin: 5px 0;
padding: 0;
}
#main_nav ul li ul li:hover
{
margin-left: 1px;
}
Theres some scary CSS3 in there, but it adds a pretty little curve to the bottom part of the drop down list, sotake it or leave it
Also, note how initially we start with the submenu ul as hidden, and only display it when we hover over its
parent list item. This ensures that the menu is still accessible for folks without JavaScript enabled, because
we will enhance this later on.
Well next add in more structure styles to handle the main wrapper and the uber fancy slider component we
are putting to use.
#wrapper
{
margin: 0px auto 20px auto;
position: relative;width: 940px;
z-index: 1;
}
#wrapper p
{
text-shadow: 0px -1px 0px #f1f1f1;
}
#wrapper h3
{
text-shadow: 0px -1px 0px #f9f9f9;
}
#columns h3, #images h3
{
margin-left: 10px;
}
#featured
{
background: #e8e8e8;
border: 1px solid #555;
box-shadow: 0px 5px 15px #666;
height: 280px;
margin-top: -100px;
moz-box-shadow: 0px 5px 15px #666;
position: relative;
webkit-box-shadow: 0px 5px 15px #666;
width: 940px;
z-index: 2;
}
.slider
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 12 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
13/24
{
margin: 0;
padding: 0;
}
.slider li
{
display: none;
list-style: none;
position: relative;
}
.slider .first
{
display: block;
}
.slider li img
{
}
.slide_caption
{
background: rgba(0,0,0,.5);
bottom: 3px;
height: 40px;
left: 0;
position: absolute;
width: 940px;
}
.slide_caption p
{
color: #fff;
font-size: 24px;
margin: 5px 10px;
text-align: right;
text-shadow: none;
}
.slide_nav
{
bottom: 10px;left: 10px;
position: absolute;
width: 200px;
z-index: 9;
}
.slide_nav a
{
background: url(../images/dots.png) no-repeat;
float: left;
height: 17px;
margin: 0 2px;
text-indent: -9999px;
width: 16px;
}
.slide_nav a:hover,.slide_nav a.activeSlide
{
background-position: 0px -18px;
}
Continuing, well configure the footer section.
#footer
{
background: #393939;
margin-top: 40px;
padding-top: 20px;width: 100%;
}
#footer hr
{
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 13 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
14/24
8/6/2019 How to Build a Joomla Template Start to Finish
15/24
height: 16px;
text-indent: -9999px;
width: 18px;
}
#copyright p
{
color: #fff;
float: right;
}
Finally, lets style some of the main text.
#main
{
margin: 40px 0 20px 0;
}
#why
{
float: left;
width: 30%;
}
#content
{
float: right;
width: 59%;
}#columns
{
clear: both;
margin: 40px 0;
width: 100%;
}
.col
{
float: left;
margin: 0 1%;
padding: 0;
width: 30%;
}
.left ul li
{
list-style-image: url(../images/info_bullet.png);
}
.center ul li
{
list-style-image: url(../images/more_bullet.png);
}
.right ul li
{
list-style-image: url(../images/warn_bullet.png);
}
#images
{
margin: 40px 0;
width: 100%;
}
#images figure
{
float: left;
margin: 0 10px;
position: relative;
width: width:290px;
z-index: 2;
}
#images figure a
{
text-decoration: none;
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 15 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
16/24
}
.zoom_out
{
position: relative;
z-index: 3;
}
.zoom_in
{
background: url(../images/img_zoom.png) no-repeat;
display: block;
filter: alpha(opacity=0);
height: 141px;
left: 0;
moz-opacity: 0;
opacity: 0;
position: absolute;
top: 0;
width: 290px;
z-index: 9;
}
Take a note of the final classes in the code above, zoom_out and zoom_in. This is another enhancement
for the popup images, to add a little flare you will see soon enough!
At this point you should have something along the lines of this:
Hey, that isnt too bad, but note that some parts may not work as awesomlyyet, because the scripts to make
them function we have not yet been created! So, time to get on that.
The JavaScript
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 16 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
17/24
Back Up
This part should be a snap! Mostly, because we are going to use a couple of awesome plugins. First up is
the Cycle plugin, by @malsup. We will use this to build our slider, and also the PrettyPhoto plugin, by
@scaron will be used for our lightboxing. Enhancing this will be the easing plugin for some more spice, and
localscroll to handle our ups and downs. Each of the links above should link to the authors page where you
can find and download the script you wish. Once we have the plugins downloaded, we need to include them
within our code, like so:
Be sure to put this in the footer after we include the jQuery library, in order for this to all function. Bear in
mind we will be combining all of these shortly. Now to make these take effect, we have to write a small bit of
scripting.
$(document).ready(function(){
});
Firstly, drop in this line of code to handle the hash tag scrolling:
$.localScroll({duration:600});
This ensures that our back to top button will smoothly glide back up. Next, let s work with the slider core.
$('.slider')
.after('')
.cycle({
fx: 'scrollHorz',
timeout: 4000,
slideExpr:'li',
easing: 'bounceout',
pager: '.slide_nav'
});
This will add the bullet navigation for the slides, and setup the duration and easing parameters. Next, we
handle the lightbox with the p r e t t y p h o t o code, like so:
$("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_rounded'});
This instructs each image, that we assign the prettyPhoto r e l to, to behave in the proper manner. In order
to spruce up the images, add in the following,
$('#images figure').animate({'opacity' : 1}).hover(function() {
$(this).animate({'opacity' : 0.5}).find('span').addClass("zoom_in").animate({'opacity' : 1});
}, function() {
$(this).animate({'opacity' : 1}).find('span').removeClass("zoom_in");
});
This will add a nice hover in, fade out effect when we mouse over the images. Pretty!
And finally the menu; add the following snippet, still in between the document ready tags.
var mainLi = $('#main_nav ul li');
mainLi
.find('ul')
.hide()
.end()
.hover(function () {
Note that, at the time of production, try to group these scripts
into one file, in order to limit the number of HTTP requests.
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 17 / 24
http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.htmlhttp://gsgd.co.uk/sandbox/jquery/easing/http://twitter.com/scaronhttp://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/http://twitter.com/malsuphttp://jquery.malsup.com/cycle/8/6/2019 How to Build a Joomla Template Start to Finish
18/24
$(this).find('> ul').stop(true, true).slideDown('slow');
}, function() {
$(this).find('> ul').stop(true, true).fadeOut('fast');
});
This simply makes sure that the submenu is hidden on page load, and then sets up the animations to take
place when we hover over the corresponding menu items. Simple and fun!
Okay, now check the page and make sure that all the functions and JavaScripts are working as expected.
We are now going to combine these multiple files. Go ahead and open the file named plugins.js and inside
paste the following:
// remap jQuery to $
(function($){
})(window.jQuery);
We will pass all of the plugin source code in between this function. Granted, these plugins are by good
developers and have been created the right anyway, but this is a good habit to prevent potential conflicts
with the jQuery namespace. Grab the source for cycle, easing, localscroll, scrollto and prettyphoto and
paste each one in, one at a time, in between the remap function in p l u g i n s . j s. Once that is done, save
the file and open up s c r i p t . j s. Here, we will take all the code in between the s c r i p t tags in our f o o t e r
and paste it in, inside one document ready function.
Now, we only need to import these two files and are good to go. Once done, be sure to recheck and make
sure that everything still works correctly on the page.
So we installed the PrettyPhoto plugin and its script, but we also need to grab its default images and styling.So grab the folder named prettyPhoto from the plugin file you downloaded; it will be in the images folder.
Simply copy that folder in its entirety to your templates images folder. While you are there, copy the
p r e t t y P h o t o . c s s into your templates c ss folder as well. At this point, your file structure should look
something close to:
Now, hey, guess what? Refresh your h t m l page to see some pretty sweet stuff going on! Hopefully, you
have a functional menu, slider, and scrollable and lightbox imagery. Take a moment to revel in the fact that
you just made some awesomeness happen.
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 18 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
19/24
Back? Okay, now its time to tear this boy apart and templatize it for the homestretch of our Joomla Templatetutorial!
Joomla Construct
Back Up
We now have a fully functional static HTML site, and it is time to templatize this monster. Joomla has a
standard file structure that we need to adhere to. Create a folder structure like so, and be sure to include all
the files I will explain what each of them do shortly.
Starting with component.php ; this file is a structure template that Joomla uses to display content called with
the component parameter. Essentially, when you want to see part of the site that is just its content, and not
the header/footer etc. For now, you will simply be copying mine for the default usage. The CSS folder will
hold, you know, CSS and the same with the images. I n d e x . h t m l is simply a generic page that display
nothing, and it is a good practice to keep one of these empty index files in the root of each folder you create
to keep prying eyes away.
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 19 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
20/24
I n d e x. p h p will be the main file; nearly everything will take place in here. Template_thumbnail.png is, you
guessed it, an image of the template itself that will show in the admin section of Joomla, and
t e m p l a t e _ d e t a i l s . x m l is the main control file that Joomla reads to install your template. It contains basic
information about the file structure of your theme, as well as template parameters and module position
names.
The P a r a m s. i n i file needs to be here and can remain blank for now. This will be a writeable file that stores
the template parameter data that Joomla can access later on.
Finally, the HTML folder is where we will store files to override the default Joomla behavior for certain display
types, such as the frontpage. So inside, you will find another folder named f r o n t p a g e, which itself holds a
few more files. Each one will take precedence over the default core files that would be used to display the
frontpage content. The benefit of this is that we can alter the structure here completely, or simply remove aline we dont want or need. Be sure to copy over your CSS and Images folders into this directory for your
template as well.
SidestepTo gain an idea of where the files and folders inside the HTML folder come from, head to your root
installation of Joomla and look in the a d m i n i s t r a t o r folder, then in the components folder and finally open
the com_content folder. You will find a nice list of core components components being the way Joomla
displays information in an abstract way from logic. This is only an overview; you can override just about
every aspect of Joomla output by adding a folder to the HTML folder in your theme root and creating a new
vi e w file. For example, to override the main menu output, you would create a path such as
[YOUR_TEMPLATE_NAME]/html/mod_mainmenu/default.php where mod_mainmenu is the name of the
core module you wish to override.
Breaking Into Pieces
So, easiest thing first; take a snapshot of your HTML page and save it as template_thumbnail.png. This
should be placed in the root of the template folder. For i n d e x . h t m l, simply open it up and paste the
following inside:
Make a few copies of this file and put them in the root of each folder.
Wow, two files down already!
Now, for component.php, I suggest you use the one from the accompanying download, as it is too much to
paste in here, and it is just default behavior we are not going to touch, but is helpful to have in your theme,
depending on usage. Again, for the HTML folder, use the provided download and drop the entire folder and
contents into your template root.
I like to break things up a bit more, so create a folder called i n c l u d e s, and, inside two more folders, one
named s e c t i o n s, and the other named s c r i p t s. You guessed correctly: inside the s c r i p t s folder, copy
all of the contents of your HTML folder versions j s folder. Now, head into the s e c t i o n s folder and create a
few new files:
head.php
header.php
footer.php
scripts.php
setup.php
It seems like a lot, but it is really not. This is simply a good method to separate content and keep things as
modularized as possible. Well start with se t u p . p h p, so open that one up and paste the following in:
This is really a personal preference, but, for the sake of ease, I suggest you follow along with it. First, we
ttp://net.tutsplus.com/tutorials/php/how-to-build-a-joomla-template-start-to-finish/ Page 20 / 24
8/6/2019 How to Build a Joomla Template Start to Finish
21/24
instruct Joomla to include the hook for its head, thus enabling core functions access. Following that, I
manually unset the mootools that is loaded by default.
Save and done! For now, we are finished with the set up, so open head.php and add:
8/6/2019 How to Build a Joomla Template Start to Finish
22/24
You already know whats happening in here now. Again, we simply create our sections and close out the
site. We also do a few more checks for module positions so we can append their contents when needed.
And here, we come to i n d e x. p h p, the main attraction. Add the following code:
Yup, it is everything that was left over! Now top to bottom: we start by declaring the new Doctype in HTML5
fashion. Next, weve added the no- j s class to the h t m l tag if you are using Modernizr. We immediately
include two of the files we already setup: our head.php and se t u p . p h p. This time, note how we use a new
variable,jPATH_ROOT to concatenate our way into our template. Once again, we re keeping things as
dynamic as possible so that we can transport this code across multiple templates. After we include the top
section, we close out the head and start building our page. Including the header.php kicks that off and
brings in the top section of our soon to be awesome website.
Now, open the main section and drop in another Joomla call:
This call to component essentially tells Joomla to output right here exactly what is put into the WYSIWYG
editor for the page currently being viewed.
Next we include the f o o t e r . p h p file to end things up, and then the last file we created in the s e c t i o n s
folder, s c r i p t s . p h p.
What? Yes I know that file is empty still! So, let s go fill it up. Open s c r i p t s . p h p and paste in the following:
8/6/2019 How to Build a Joomla Template Start to Finish
23/24
$("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_rounded'});
$.localScroll({duration:600});
$('.slider')
.after('')
.cycle({
fx: 'scrollHorz',
timeout: 4000,
slideExpr:'li',
easing: 'bounceout',
pager: '.slide_nav'
});
$(document).ready(function() {
$('.zoom_out').animate({'opacity' : 1}).hover(function() {
$(this).animate({'opacity' : 0.5}).find('span').addClass("zoom_in").animate({'opacity' : 1});
}, function() {
$(this).animate({'opacity' : 1}).find('span').removeClass("zoom_in");
});
$('#main_nav ul li ul').hide();
$('#main_nav ul li').hover(function () {
$(this).find('> ul').stop(true, true).slideDown('slow');
}, function() {
$(this).find('> ul').stop(true, true).fadeOut('fast');
});
});
});
And we are good to go. Moving on!
The Frontpage
Back Up
You may have noticed that i n d e x. p h p seems to be quite lacking in, stuff like everything that we built into
i n d e x . h t m l for the first version. Why is that? Well, because that is for our homepage. Now, we are going to
override Joomlas frontpage to show our custom homepage. Head into the h t m l folder, and then into
com_contentand the f r o n t p a g e directory. Inside should be two PHP files; make one called d e f a u l t . p h p
and one called d e f a u l t _ i t e m . p h p. We are going to rip 95% of the guts from these to make our own, so
open up d e f a u l t _ i t e m . p h p. If anything is there, delete it and replace it with:
Nice, right? This is setting up the output for whatever text was entered into the homepage component. Now
open d e f a u l t . p h p and again, delete all that may be there and paste in:
8/6/2019 How to Build a Joomla Template Start to Finish
24/24
$image2 = $slider->get( 'image2' );
$caption2 = $slider->get( 'caption2' );
$image3 = $slider->get( 'image3' );
$caption3 = $slider->get( 'caption3' );
$image4 = $slider->get( 'image4' );
$caption4 = $slider->get( 'caption4' );
$document = &JFactory::getDocument();
$renderer = $document->loadRenderer('modules');
$options = array('style' => 'xhtml');$columns = 'columns';
$images = 'images';
?>