Upload
vathur
View
619
Download
1
Embed Size (px)
Citation preview
How to Create a Basic Template You've installed Joomla!, installed all of the components, modules, and mambots you need, and you've created your content and menus. Now you want to create a custom look for your Joomla! site, but you don't know how to create a template. This article will step through the creation of a very basic template in Joomla! Hopefully, by the end of this article, you will have a basic understanding of what goes into a Joomla! template. (Note: This information only applies to Joomla! 1.0.X. It does not apply to version 1.5.) Template File Structure A basic Joomla! template will have the following file structure: /templatename
/css /template_css.css /index.html (blank file)
/images
/index.html (blank file) /... (all of your template images)
/index.php /templateDetails.xml /template_thumbnail.png
1. /templatename Your template will reside in a folder with the same name as your template.
2. /css The CSS folder contains your template CSS file, "template_css.css", and any other CSS file you feel is necessary for your template.
3. /images The images folder should contain all (if any) of your template images. The images could be stored anywhere, but storing them in the images folder keeps a consistent structure for your template. • /index.php
The index is the file that Joomla! looks for when rendering your template. I will discuss this in more detail later.
4. /templateDetails.xml The templateDetails xml file contains details about your template, which Joomla! uses to install your template from your installation ZIP file. I will discuss this in more detail later.
5. /indeThe b
Step 1 The first typographcode. Her
Step 2 Now that 'index.php2 DIV elem
ex.html ‐ blanblank "index.
1: Design
thing you shy, etc. for yore is what my
2: HTML M
you have dep' file. Becausmenets for m
<?xml v//W3C//"http://w<html xm<head> <title>Re <link hre
nk files html" files are
should do wour site. I likedesign looks
Markup
esigned the lose this is a simy site's layou
version="1.0" /DTD www.w3.org/mlns="http://
edSpheresRul
ef="css/templ
e there to pre
when creatinge to use Maclike:
ook of your temple 2‐columt. Here is the
encoding="iXHTML
/TR/xhtml1/D/www.w3.org
le.com</title>
late_css.css"
event direct a
g a templatecromedia Fire
emplate, it is n design with XHTML mark
iso‐8859‐1"?>1.0
DTD/xhtml1‐tg/1999/xhtml
>
rel="styleshe
access to the
e is to desigeworks to de
time to writh no headers kup:
><!DOCTYPE 0 Transitional.dt">
eet" type="tex
default Apac
gn the layousign my site
e some XHTMand no foote
html PUBLITransitional//td">
xt/css" />
che index pag
ut, grid, grabefore I writ
ML markup iners, I am only
C "‐/EN"
ge.
phics, te any
n your using
Notice thathe tempwould loo
Step 3 This is whour basic
</head> <body id <div id=" <h1 id= <h2 id= <!‐‐ side </div><! <div id=" <!‐‐ ma </div><! </body></html>
at I have put late. Becauseok like:
3: CSS
here we start framework in
* { margin: padding}
d="bodybg">
"sidebar">
"sitetitle"><a"siteslogan">
ebar modules
‐‐ end sideba
"mainbar">
inBody goes h
‐‐ end mainb
comments ase we have no
to see the den place. Here
: 0; g: 0;
a href="index>Your source
s go here ‐‐>
r ‐‐>
here ‐‐>
ar ‐‐>
s placeholderot written an
esign elemenis the CSS co
.php">RedSpfor red spher
s for where I ny of the CSS
ts really takede:
pheresRule.cores</h2>
will load the S code, this is
e shape. At th
om</a></h1>
modules ands what the re
e end of this
>
d the mainBoesulting html
step, we will
dy for page
l have
body { background‐color: #fff; color: #666; font‐family: Arial, Helvetica, sans‐serif; font‐size: 12px; } a, a:link, a:visited { color: #900; text‐decoration: none; } a:hover { text‐decoration: underline; color: #000; } h1#sitetitle { padding: 100px 0 0; background: #fff url('../images/logo.png') center top no‐repeat; font‐size: 20px; font‐weight: bold; text‐align: center; color: #000; } h1#sitetitle a, h1#sitetitle a:link, h1#sitetitle a:visited { text‐decoration: none; color: #000; } h1#sitetitle a:hover { text‐decoration: none; color: #000; } h2#siteslogan { font‐size: 14px; font‐weight: bold; margin: 0 0 10px; text‐align: center; color: #000; } #sidebar { width: 215px; margin: 10px 0 10px 10px; float: left; color: #000; } #mainbar {
margin: 10px 10px 10px 235px; } /* Joomla Elements Will be added in Step 4: Joomlafy */
Step 4: Joomlafy The next step is to "Joomlafy" our 'index.php' and 'template_css.css' files. Here is the XHTML markup, Joomlafied: XHTML Markup
<?php defined( '_VALID_MOS' ) or die( 'Restricted access' ); // needed to seperate the ISO number from the language file constant _ISO $iso = explode( '=', _ISO ); // xml prolog echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?> <!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"> <head> <?php mosShowHead(); ?> <?php if ( $my‐>id ) { initEditor(); } ?> <meta http‐equiv="Content‐Type" content="text/html; <?php echo _ISO; ?>" /> <link href="<?php echo $mosConfig_live_site; ?>/templates/redspheres/css/template_css.css" rel="stylesheet" type="text/css" /> </head> <body id="bodybg">
<div id="sidebar"> <h1 id="sitetitle"><a href="index.php"><?php echo $mosConfig_sitename; ?></a></h1> <h2 id="siteslogan">Your source for red spheres</h2> <?php if( mosCountModules( 'left' ) > 0 ) { mosLoadModules( 'left', ‐2 ); } ?> </div><!‐‐ end sidebar ‐‐> <div id="mainbar"> <?php mosMainBody(); ?> </div><!‐‐ end mainbar ‐‐> </body> </html>
Now that we have our "Joomlafied" XHTML markup, let's take a look at what's different. In the header, I have added the following code:
<?php defined( '_VALID_MOS' ) or die( 'Restricted access' ); // needed to seperate the ISO number from the language file constant _ISO $iso = explode( '=', _ISO ); // xml prolog echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?> <!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"> <head> <?php mosShowHead(); ?> <?php if ( $my‐>id ) { initEditor(); } ?> <meta http‐equiv="Content‐Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site; ?>/templates/redspheres/css/template_css.css" rel="stylesheet" type="text/css" /> </head>
"defined( '_VALID_MOS' )..." The first line, "defined( '_VALID_MOS')...", prevents direct access to the 'index.php' file. mosShowHead Another important part to note is the line that says "mosShowHead". I have used this in place of my "title" and "meta" tags because Joomla! uses this function to automatically show the site's title along with important meta tags. initEditor The third part I would like to point out is "initEditor". This function initializes the WYSIWYG editor for the front end of your site. It is inside a conditional statement that tests whether or not the user is logged in. The conditional statement improves load time for users who are not logged in, because it prevents Joomla! from executing the initEditor function when it is not necessary. echo $mosConfig_live_site You should also note that the link element has been changed to use an absolute href for the template's CSS file. Using $mosConfig_live_site along with the path to the template (templates/redspheres...), your template now knows exactly where its corresponding CSS file is. Now let's take a look at what else we've added to "Joomlafy" our 'index.php' file. Left Module Position The following code is used to 1) determine whether or not there are modules published to the "left" module position, and 2) load those modules in the "left" module position with a style of ‐2. (see "mosLoadModules ‐ An Explanation")
<?php if( mosCountModules( 'left' ) > 0 ) { mosLoadModules( 'left', ‐2 ); } ?>
Main Body The following code is used to load the Main Body of your Joomla! template. This is where all content items and components are loaded for your Joomla! site.
<?php mosMainBody(); ?>
CSS Code
* { margin: 0; padding: 0; } body { background‐color: #fff; color: #666; font‐family: Arial, Helvetica, sans‐serif; font‐size: 12px; } a, a:link, a:visited { color: #900; text‐decoration: none; } a:hover { text‐decoration: underline; color: #000; } h1#sitetitle { padding: 100px 0 0; background: #fff url('../images/logo.png') center top no‐repeat; font‐size: 20px; font‐weight: bold; text‐align: center; color: #000; } h1#sitetitle a, h1#sitetitle a:link, h1#sitetitle a:visited { text‐decoration: none; color: #000; }
h1#sitetitle a:hover { text‐decoration: none; color: #000; } h2#siteslogan { font‐size: 14px; font‐weight: bold; margin: 0 0 10px; text‐align: center; color: #000; } #sidebar { width: 215px; margin: 10px 0 10px 10px; float: left; color: #000; } #mainbar { margin: 10px 10px 10px 235px; } /* Joomla Elements */ /* Moduletable DIV's */ #sidebar .moduletable { margin: 10px 0; } #sidebar .moduletable h3 { border‐bottom: 1px solid #ccc; font‐size: 18px; font‐weight: bold; margin: 0 0 10px; padding: 0 0 0 5px; } /* Main Menu */ ul { padding: 0 0 0 5px; } li { list‐style‐type: none; padding: 3px 0 3px 18px; background: #fff url('../images/bullet.gif') 0 5px no‐repeat; } ul#mainlevel a, ul#mainlevel a:link, ul#mainlevel a:visited { text‐decoration: none;
color: #900; } ul#mainlevel a:hover { text‐decoration: underline; color: #000; } /* Login Form */ #mod_login_username { width: 205px; margin: 0 5px 5px; border: 1px solid #ccc; } #mod_login_password { width: 205px; margin: 0 5px 5px; border: 1px solid #ccc; } #mod_login_remember { margin: 0 0 0 5px; } input.button { border: 1px solid #ccc; background‐color: #eee; color: #666; padding: 3px; margin: 5px; font‐size: 10px; } label { margin: 0 0 0 5px; } /* Search Form */ #mod_search_searchword { width: 205px; margin: 0 5px 5px; border: 1px solid #ccc; } /* Main Content Area */ .componentheading { display: block; font‐size: 20px; color: #666; font‐weight: bold; border‐bottom: 1px solid #ccc; margin: 0 0 10px;
} .contentheading { font‐size: 20px; color: #900; font‐weight: bold; margin: 0 0 2px; } .small, .createdate, .modifydate { font‐size: 10px; font‐weight: normal; } a.readon { display: block; padding: 3px 0 3px 18px; background: #fff url('../images/bullet.gif') left center no‐repeat; margin: 5px 0 0; } .article_seperator { display: block; height: 10px; }
We also Joomlafied our CSS code. Everything below "Joomla Elements" was added to the CSS for Joomla!‐specific elements. I will not take time to discuss the Joomla!‐specific CSS elements, but rather I will just give you a link to "A Blank Template CSS file for Joomla" from CompassDesign.
Step 5: Create a Thumbnail This step is not entirely necessary. Your template will load and run properly with or without a thumbnail. This just gives you a quick look at the template from the template manager. The dimensions of a thumbnail do not have to meet specific requirements, but they should be around 225 pixels wide by 150 pixels high. Give your thumbnail the name 'template_thumbnail.png'. Here is my thumbnail:
Step 6 The next for our te
It is impo'template
6: Create
step is to cremplate:
<mosinst <name> <creatio <autho <copyriGNU/GP <autho <autho <versio <descriinstructio <files> <filena <filena <filena <filena <filena <filena <filena <filena <filena </files></mosins
ortant that eeDetails.xml' f
"templa
eate the 'tem
tall type="tem>redspheres<onDate>09/2r>Cory Webbght>CopyrighL</copyrightrEmail>your erUrl>www.hon>1.0</versioption>RedSpon. I hope we
ame>index.htame>index.phame>templatame>templatame>css/indeame>css/temame>images/ame>images/ame>images/> stall>
every file in file.
ateDetail
plateDetails.x
mplate" versi</name> 6/2006</creab</author> ht 2006 > email here</aowtojoomla.non> heres is a same all learn som
tml</filenamehp</filenamete_thumbnailteDetails.xml<ex.html</filenplate_css.css/index.html<//logo.png</fil/bullet.gif</fil
your installa
ls.xml"
xml' file. Her
on="1.0.x">
ationDate>
‐ Cory
authorEmail>net</authorU
mple Joomlamething.</de
e> e> .png</filenam</filename>name> s</filename>/filename> ename> lename>
tion package
e is the XML
Webb, R
> Url>
! template foscription>
me>
e has a corre
markup that
eleased u
or the purpos
esponding fil
t goes into th
nder
se of
ename tag i
his file
n the
Step 7: Zip It All of your template files should be in a folder that is named with your template name. Use a file compression application, like WinZip, to create a ZIP file with your template files. This ZIP file is your installation file.
Step 8: Install It In your template manager, install your new template, and set it as your default template.
Step 9: Modify It Nobody's perfect. We all make mistakes. For that reason, you should be prepared to check your template for errors, browser compatability, and overall quality. Using the Joomla! template manager, you can modify your template 'index.php' and 'template_css.css' files right from the browser. You can make changes, save them, and immediately see the result by previewing your site.