Membuat Template Joomla 1.5

TUTORIAL MEMBUAT TEMPLATE JOOMLA 1.
5
PART I
Sebenarnya saya ragu untuk menulis artikel ini. “MEMBUAT TEMPLATE JOOMLA 1.5”. Judul artikel yang
menakutkan untuk saya. Kenapa? Karena saya sadar saya masih sangat newbie dalam hal joomla. Saya
mempelajari joomla melalui sebuah buku yang di beli oleh bos saya di tempat kerja saya di Denpasar – Bali (thanx
Pak M**** karena telah meminjamkan bukunya kepada saya). Berawal dari buku tersebut akhirnya saya tertarik
utnuk terus mempelajari joomla.
Untuk pembuatan template joomla sendiri, saya juga masih sangat pemula. Awalnya saya tidak ingin membuat
artikel tentang pembuatan template joomla. Berawal dari posting situs saya yang berbasis joomla 1.5 dengan
template buatan sendiri, ada salah seorang teman di forum yang meminta saya untuk memberitahukan dia
bagaimana cara membuat template joomla. Akhirnya saya berfikir, kenapa tidak saya buat saja tutorial cara
membuat template joomla? Lagian mungkin banyak juga yang membutuhkan tutorial seperti ini. Kenapa punya
ilmu nggak di bagi-bagi? Karena dari itulah akhirnya saya memutuskan untuk mencoba menulis tutorial membuat
template joomla. Makasih banyak yach om heri (pascal_heri – id-joomla) karena telah memberikan ide membuat
tutorial ini.Selain itu, terima kasih juga untuk om rusmadi (id-joomla), karena kritikkan om rusmadi, saya memiliki
insiatif membuat template joomla sendiri. Dan terima kasih juga untuk semua teman-teman id-joomla yang mau
menjawab semua oertanyaan saya di forum.
Untuk membuat template joomla, awalnya untuk saya sangatlah susah. Saya harus belajar mengenal PHP ,
Cascading Style, dan lain-lain. Saya banyak mencari di search enggine tutorial-tutorial membuat template joomla.
Selain itu, saya juga mencoba memahami script-script template yang sudah ada sebagai referensi saya. Dan
akirnya, template pertama buatan saya, dapat anda lihat di http://artikelheri09.co.cc .
Ok. Lanjut.... udah cukup basa-basinya.
Template joomla sebenarnya tidaklah rumit, dan sangat sederhana. Hanya saja bila kita ingin template yang kita
buat sangat indah di pandang, maka ada beberapa tembahan script yang harus kita tambahkan selain script
sandart template itu sendiri. Sebenarnya, satu file layput html bisa kita konversi menjadi sebuat template joomla
yang valid.
Untuk membuat template joomla yang sederhana, sebenarnya hanya membutuhkan 4 file saja. Yaitu file
index.php, templateDetails.xml, template.css, dan template_thumbnail.png. Apa saja fungsi dari kemepat file
tersebut?
File Index.php
Menurut yang saya baca di forum id-joomla yang ditulis oleh om Andy sikumbang, file index.php adalah file yang
berisi kombinasi antara bahasa html dengan php yang merupakan file utama yang menentukan bentuk perwajahan
dari template. Kita dapat membuat file index.php ini dengan menggunakan pilihan new php file pada
Dreamweaver. Secara umum pada file index.php ini di bagi menjadi dua bagian yaitu header dan body.
Bagian awal yang harus kita isikan adalah bagian Header. Bagian ini harus ada di bagian awal setiap file
index.php. Bagian header ini adalah beberapa baris code php seperti yang ada berikut ini.
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>

<!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="<?php echo $this->language; ?>" lang="<?php echo $this-
>language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
Copyright © 2009 by heri siswanto
thanks to God and friends id-joomla
</head>
fungsi dari masing-masih bagian header in iadalah sebagai berikut:

bagian
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
berfungsi sebagai filter yang akan menyaring jenis akses yang datang terhadap file ini. Apabila akses tersebut
bersifat langsung, misalnya Anda mengetikkan alamat langsung kepada file index.php ini pada browser (misalnya :
http://www.webanda.com/templates/templateku/index.php) maka proses eksekusi script phpnya tidak akan
dilanjutkan dan pada jendela browser akan muncul tulisan ’ Restricted access’ yang menyatakan bahwa akses
langsung terhadap file yang bersangkutan tidak diizinkan.
Bagian
<!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="<?php echo $this->language; ?>" lang="<?php echo $this-
>language; ?>" dir="<?php echo $this->direction; ?>" >
Mendefinisikan tipe dokumen html yang dipergunakan yaitu XHTML 1.0 Transitional berdasarkan standar
penggunaan code html internasional.
Bagian
<jdoc:include type="head" />
Untuk penjudulan secara otomatis pada halaman joomla
Bagian
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />

<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
Iini akan memanggil file CSS yang berfungsi untuk mengatur tampilan dari index.php, dimana secara defaul akan
memanggile file css yang berada didalam folder css yang ada didalam directory template.
Bagian kedua setalah bagian header yang ada di dalam file index.php adalah bagian body dan peletakkannya
setelah header. Bagian body secara anatomi dapat di isi sebagai berikut
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="message" />

<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />

<jdoc:include type="modules" name="footer" />
</body> </html>
Fungsi dari bagian-bagian tersebut adalah:

Bagian
<jdoc:include type="modules" name="top" />

<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="right" />
<jdoc:include type="modules" name="footer" />
Untuk menampilkan module-module yang dipublish pada posisi yang bersangkutan ( top, left, right, footer)
Bagian
<jdoc:include type="message" />

<jdoc:include type="component" />
Menampilkan content utama joomla. Jadi code ini harus mutlak ada pada semua file index.php template joomla
Selain yang sudah kita bahas diatas, joomla juga memiliki format penulisan posisi dalam template. Seperti :
<jdoc:include type="modules" name="footer" style=”xhtml”/>
Atau
<jdoc:include type="modules" name="footer" style=”rounded”/>
Penjelasannya:
• Jdoc:include – maksudnya kira-kira “tambahkan ini”

• Type=”module” – mengidentifikasi bahawa yang ditambahkan bertype module. Module ini di atur di panel
administrator > extensions > module
• Name=”footer” – memberikan nama module yang di tambahkan. Jadi untuk tiap nama-nama posisi module
di tentukan disini. Misal : name=”left” atau name=”right”
• Style=”xhtml” – menentukan layout module yang akan ditampilkan. Secara default tanpa style. Style default
(sering tidak dituliskan) akan memformat module dalam bentuk tabel. Jika menggunakan style xhtml,
module akan ditampilkan tanpa tabel. Sedangkan untuk style rounded, module akan ditampilkan sama
seperti xhtml, hanya saja, lebih cocok untuk style bersudut round menggunakan stylesheet.
Untuk lebih memahami syntak diatas, berikut penjelasan secara detail fungsi dari Jdoc statement berikut :
Jdoc:include
Pernyataan <jdoc:include /> adalah metode yg di gunakan template Joomla untuk menampilkan bagian-bagian
tertentu pada halaman web. Ada bermacam macam pernyataan <jdoc:include />, masing-masing mengacu pada
bagian yang berbeda dari sebuah halaman web Joomla.
Attribute Type
Type pada pernyataan jdoc adalah atribut yg menentukan jenis konten yg akan di tampilkan pada tempat dimana
pernyataan jdoc tersebut ditempatkan. Misalnya, pernyataan <jdoc:include type="module" /> akan menampilkan
sebuah module (type="module") pada halaman web Joomla.
Component
Misal : <jdoc:include type="component" />
Adalah contoh format jdoc dalam sebuah template untuk menampilkan sebuah komponen (misalnya komponen
frontpage , remository, dll) ke halaman web Joomla. Pernyataan <jdoc:include type="component" /> hanya
boleh di tulis sekali saja dan berada di dalam tag <body>
Head
Misal : <jdoc:include type="head" />
Pernyataan ini berfungsi untuk menampilkan head pada tag <head> sebuah halaman Joomla. Pernyataan ini
hanya boleh ditulis sekali saja dan berada di dalam tag <head>
Message
Misal : <jdoc:include type="message" />
Pernyatan ini juga hanya boleh sekali ditulis dalam tag <body> dan berfungsi untuk menampilkan pesan system
(system message) dan pesan error (error message) pada saat halama joomla di panggil browser. Css untuk format
dari system message berada pada templates\system\css\system.css
Module
Misal : <jdoc:include type="module" name=”menu” /> atau <jdoc:include type="module" name=”breadcrubs” />
Pernyataan ini akan menampilkan 1 buah module yang akan di tempatkan pada posisi yang ditulis pada attribute
name, misalnya <jdoc:include type="module" name=”menu” /> akan menampilkan satu buah module pada
posisi menu (name=”menu”). Tentunya hanya module yang telah di publish dari backend yang akan ditampilkan.
Attribut tertentu juga dapat ditambahkan untuk mengatur format tampilan dari pernyataan <jdoc:include> module
tersebut. Misalnya penambahan attribute style dan id pas pernyataan berikut <jdoc:include type="module"
name=”menu” style=”rounded” id=”menu-box” />
Modules
Misal : <jdoc:include type="modules" name=”user4” />
Lebih dari satu module dapat ditampilkansesuai posisinya dengan peryataan ini. Nama posisi-posisi tersebut diatur
pada templatedetails.xml. Bermacam-macam module dapat ditampilkan sesuai posisinya dengan menggunakan
pernyataan <jdoc:include type="modules" name=”posisi_module” />
Berikut adalah contoh dari jdoc modules yang biasa digunakan oleh developer template joomla
<jdoc:include type="modules" name=”debug” />

<jdoc:include type="modules" name=”icon” />
<jdoc:include type="modules" name=”left” style=”rounded” />
<jdoc:include type="modules" name=”left” style=”xhtml” />
<jdoc:include type="modules" name=”right” style=”xhtml” />
<jdoc:include type="modules" name=”status” />
<jdoc:include type="modules" name=”syndicate” />
<jdoc:include type="modules" name=”title” />
<jdoc:include type="modules" name=”toolbar” />
<jdoc:include type="modules" name=”top” />
<jdoc:include type="modules" name=”top” style=”xhtml” />
<jdoc:include type="modules" name=”user1” style=”xhtml” />
<jdoc:include type="modules" name=”user2” style=”xhtml” />
<jdoc:include type="modules" name=”user3” />
<jdoc:include type="modules" name=”user4” />
Catatan : posisi module user3 (name=”user3”) biasanya secara default digunakan untuk module top menu.
Attribute Style
Attribute style dapat digunakan untuk pernyataan <jdoc:include /> module maupun modules. Nilai dari attribute ini
mengacu pada chrome style. Bila attribute style tidak digunakan, maka secara default nilainya adalah “none”.
Module tidak akan menampilkan H3 jika attribute file tidak diberi nilai atau diberi nilai “none”
File templatedetails.xml
fungsi daripada file templateDetails.xml adalah untuk menyimpan informasi detail tentang template, sekaligus
menyimpan intruksi-intruksi yang digunakan pada saat menginstall template pada joomla atau dengan kata lain
sebagi installer template joomla. Apa saja yang terdapat didalam file templateDetails.xml? berikut akan saya coba
jelaskan sesuai dengan yang saya pahami. Untuk mempermudah, saya akn mencoba membagi isi file ini menjadi
2 bagian. Yang pertama kita sebut saja bagian header dan yang ke dua adalah body (ntah itu benar ato tidak
yach? Hehehehehe.... soalnya saya juga masih newbie).

Header
Sama seperti file index.php, bagian header berada pada awal file. Adapun syntax yang ditulis pada bagian header
ini adalah sebagi berikut :
Bagian
<?xml version="1.0" encoding="utf-8"?>

<install version="1.5" type="template">
Mendefinisikan versi dokument xml yaitu 1.0 dan juag mendefinisikan versi joomla yang sesuai dengan template
serta membrikan type dari file yang diinstall pada joomla.
Bagian
<name>nama template</name>
<version>1.2.0</version>
<creationDate>tanggal pembuatan template</creationDate>
<author>nama pembuatan template</author>
<authorEmail>email pembuat template</authorEmail>
<authorUrl>url pembuat template</authorUrl>
<copyright></copyright>
<license>GNU/GPL version 2</license>
<description>descripsi template</description>
sebai informasi tentang template seperti nama template, versi, tanggal pembuatan, nama pembuat, email, url atau
web pembuatan template, licensi dan juga deskripsi tentang template.
Setalah header, bagian berikutnya yang terdapat dalam file templatedetails.xml adalah body. Di dalam body ini
sendiri adalah tempat untuk mendefinisikan semua file, image dan juga sebagai pengenal posisi module yang
terdapat pada template itu sendiri. Berikut sedikit penjelas mengenai isi daripada body file templatedetails.xml
Files
<files>
<filename>index.php</filename>
<filename>templatedetails.xml</filename>
<filename>css/template.css</filename>
</files>
Images
<images>
<filename>template_thumbnail.png</filename>
</images>
Positions
<positions>
<position>left</position>
<position>right</position>
.....
</positions>

Secara garis besar, file templatedetails.xml secara sederhanya bisa dilihat pada contoh dibawah ini
<?xml version="1.0" encoding="utf-8"?>

<install version="1.5" type="template">
<name>nama template</name>
<version>1.2.0</version>
<creationDate>tanggal pembuatan template</creationDate>
<author>nama pembuatan template</author>
<authorEmail>email pembuat template</authorEmail>
<authorUrl>url pembuat template</authorUrl>
<copyright></copyright>
<license>GNU/GPL version 2</license>
<description>descripsi template</description>
<files>
<filename>index.php</filename>
<filename>templatedetails.xml</filename>
<filename>css/template.css</filename>
</files>
<images>
<filename>template_thumbnail.png</filename>
</images>
<positions>
<position>left</position>
<position>right</position>
.....
</positions>
File images_thumbnail.png
Berupa file gambar berukuran kecil/snapshot dari template yang nantonya akan digunakan oleh
templatedetails.xml untuk menampilkan minipreview template. Digunakan juga pada beberapa module tertentu,
misalnya module pemilih template.
File template.css
berfungsi untuk mendefinisikan fungsi-fungsi css yang nantinya akan dipakai untuk perwajahan situs dan biasanya
file ini disimpan didalam folder dengan nama css. untuk file template.css saya sendiri awalnya juga sangat susah
untuk mengerti apa arti dari script yang ada pada file css ini dan tiap-tiap penulisan code dan apa saja efeknya
untuk template. Maklum, saya berawal dari nekat aja untuk belajar bikin template dan awalnya saya hanya belajar
untuk merombak template yang sudah ada. Ok. Sebelum saya membahas tentang CSS untuk joomla, ada baiknya
sedikit saya bahas tentang CSS.
Sebelum ditemukannya CSS, para web designer membuat design web mereka menngunakan metode tabel. Jujur
saja, dulu awalnya saya juga menggunakan metode tabel untuk mendesign web saya dan software yang saya
gunakan masih microsoft frontpage Xp. Jadi, saya harus membuat banyak sekali halaman web yang saya link anta
satu dengan yang lain. Mungkin jika hanya satu atau dua halam saja, itu tidak jadi maslah. Tapi bayang kan jika
dalam sebuah situs terdiri dari ribuan halaman, tentu saja kita harus membuat satu persatu dari halam tersebut.
Dan selain itu, akses situs yang menggunakan metode tabel juga dapat dikatakan lambat dibandingkan situs yang
mengunakan metode CSS sekarang ini.
CSS (Cascading Style Sheet) dimulai pada tahun 1994. dan CSS di fungsikan untuk memberikan solusi dati
metode tabel. Dengan css, para webdesigner bisa membuat templan website meraka labig menarik lagi. Selain itu,
CSS memudahkan dalam mendesign halaman website. Untuk melakukakn layout dari banyak halaman pada
sebuat website, hanya membutuhkan minimal stu buah file CSS. Untuk akses website yang menggunakan metode
CSS, juga di rasa lebih cepat jika dibandingkan dengan metode tabel.
CSS sendiri memberikan kemudahan dalam mengatur format halaman seperti teks, font, image dan hal lain di
dalam halaman web. Misalnya anda membuat style untuk tag heading, <H3>. Anda membuat tag <H3> berwarna
merah. Sekarang jika anda memiliki 10 buah tag <H3> didalam halaman web, dan anda berkeinginan warnanya
menjadi biru, anda tidak harus menggantinya di dalam HTML dan menuju ke 10 tag H3 dan mengganti warnanya.
Yang anda lakukan adalah menggantikan style H3 dari merah ke biru.

Jika anda menggunakan banyak halam, akan lebih mudah sika style anda disimpan didalam eksternal style sheet.
Sehingga perubahan yang dilakukan di style sheet akan berpengaruh ke semua halaman yang menggunakan file
tersebut.
Istilah-istilah dalam style sheet

Style Rule
CSS merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat
aturan style yang menentukan bahwa semua <H2> ditampilkan dengan warna orange.
Style Sheet
Style sheet dapat diembed ke HTML document. Atau disebut embedded style sheet. Style sheet juga bisa dibuat
sebagai external file dan dilink ke document HTML. Style role bisa dikenakan pada bagian tertentu web page.
Sebagai contoh anda bisa menentukan paragraph tertentu ditampilkan dengan style bold dan italic sementara yang
lain tetap seperti biasa.
Selector
Syntax dari selector kira-kira seperti ini : selector {property1:value;property2:value;...}
Sebagai contoh misalanya kita ingin membuat tag H1 dengan warna huruf green dan latar belakang orange maka
contoh penulisannya adalah : H1 { color:green; background-color:orange;}
Dengan metode seperti itu maka dapat kita artikan bahwa semua tag H1 yang ada didalam halaman web akan
berna green untuk font dan memiliki latar belakang orange. Pada penggalan script diatas, dapat kita definisikan
sebagi berikut :
• Selector adalah bagian pertama sebelum “{}” yang pada contoh diatas adalah H1
• Declaration adalah property dari selector dan memiliki nilai yang pada contoh di atas adalah color:green
atau background:orang;
Komentar dalam style sheet

Comment atau komentar bisanya digunakan oleh programer untuk memudahkan mengingat kembali script yang
sudah ditulisnya. Comment di CSS hampir sama dengan comment di C atau C++ yaitu dengan menggunakan :
/* isi comment */
Sebagai contoh, dapat lihat dibawah ini :
H1{color:blue;} /* H1 element akan menjadi biru */
Pemakaian element style
Berikut beberapa contoh script pemakaian element style:
Link ke sheet lain :
<link rel=”stylesheet” href=”style.css”> - script tersebut biasanya ditempatkan pada bagian header
dokument anda. Perintah relperlu diatur dengan pernyataan “stylesheet” agar supaya browser dapat
menemukan perintah href sebagai penunjukan ke alamat web (url) sheet.
Mengatur tepi halaman (page margin)
Body {margin-left: 10%; margin-right: 10%;} – perintah ini dituliskan dengan tujuan agar tampilan halaman
web di layar monitor emiliki batas halaman kiri 10% dan kanan 10% dari lebar monitor.
Mengatur jarak penulisan dari tepi atas dan bawah halaman
H2 {margin-top: 8em; margin-bottom: 3em; } – menentukan ruang sebelah atas dan bawah pada tag H2
Mengatur format font
H2{font-style: italic; font-weight: bold} – melakukan format font H2 menjadi italic(tulisan miring) dan bold
(tulisan tebal)

Mengatur jenis huruf
Body{ font-family: verdana, san-serif;} – menentukan jenis huruf yang aka digunakan pada halam
webpage.
Menambahkan border dan latar belakang
H2{ border: 1px solid blue;} – memberikan border pada tag H2 dengan style solid, ukuran garis 1px dan
warna garis border blue.
Mengatur warna link
:link {color: red;} – untuk warna link yang belum diakses
:visited{ color: red;} – untuk warna link yang telah diakses
:active{ color: redd;} – untuk warna link ketika diklik
:hover{ color: red’} – utnuk warna link ketika pointer berada diatasnya
Setelah kita sedikit membahas tentang CSS, sekarang saya akan memberikan beberapa pengaturan CSS standart
joomla 1.5 yang saya dapatkan dari sebuah situs develop joomla.
Joomla Css Global Formating

/* ####################### GENERAL SETTINGS ############################ */
html.body{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #666;
margin-top: 0px;
background-color: #CCCCFF;
}
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #666;
margin-top: 0px;
background-color: #FFFFFF;
}
/* Global Formatting */
h1 {font-size:16px;line-height: 1em;font-weight: 900;}
td{font-size: 12px;}
th{font-size: 12px;}
a:link {color: #CC6600;}
a:hover {color: #659FDE;}
a:visited {color: #CC6600;}
img {border: 0 none;}
/* Clears Divs */
.clr{clear: both;}
/* ####################### END GENERAL SETTINGS ############################ */

Will hold the content and component formating
/* Design by Brian Diaz of Media 65 @ http://www.m65.net All Rights Reserved */
/* ############# CONTENT - SECTIONS & CATEGORIES ###########################*/

/* Element |ID | Class |Suffix */
/* Div |NA |contentheading |pageclass_sfx*/
/* com_content AKA CORE ARTICLES FOR JOOMLA */
/* I */
/* Needs Edit component heading */

/* Div |NA |contentheading |YES */
/* Top of any article is Parameters - Component : Show Article Title*/
.componentheading {}

/* Div |NA |contentheading |YES */
.contentheading {}
/* article rating needs to turn on via the back-end */

.content_rating {}
.content_vote {}
/* .button class to be added see forms css */

/* Div |NA |contentpagetitle |YES */
/* content title and links href links happens if turned on via the back-end*/
.contentpagetitle{}
a.contentpagetitle:link{}
a.contentpagetitle:visited {}
a.contentpagetitle:hover{}
/* top box like a category description */

.contentdescription {}
/* Icons Print E-mail PDF etc.*/

.buttonheading{}
/* Writen by Authors name can also be seen on search com results href and intro text
& Category listing if it has a article count*/
.small {
background-color: #99FF00;
}
/* Dates */
.createdate {}
.modifydate {}
.newsfeeddate {}
/* Dates */
/* Main Body Text */

.contentpane {}
.contentpaneopen {}
/* edit button if you have access to it */
.contentpaneopen_edit{}
/* Article Table of contents */

table.contenttoc {}
/* Heading Top TOC */

table.contenttoc th {}
/* Table Data can add color */

table.contenttoc td {}
/* Links Article Table of contents index */

a.toclink:link, a.toclink:hover, a.toclink:visited {}
/* End Article Table of contents */
/* << Prev - Next >> */

.pagenavbar{}
.pagenavcounter{}
/* Page footer nav « StartPrev12NextEnd » */

.pagination{}
.pagination span {}
a.pagination a {}
a.pagination:hover {}
/* Table layout types "list"ings Archived, weblink etc..*/

.sectiontableheader {}
/* Table odd and Even Rows */

.sectiontableentry1 {}
.sectiontableentry2 {}
.sectiontablefooter {}
/* End Sectiontable */
/* Category */
.category {}
a.category:link, a.category:visited, a.category:hover {}
/* End category */
/* blogs Layout Style Top of the page Blog style Layouts */

.blog {}
.blog_heading {}
/* At the footer of the blog style pages */
.blog_more{}
/* UL List at the footer of the Page */
.blogsection{}
/* Read more link to full article */

.readon{}
/* space from bottom of article */

.article_separator{}
/* new and Added */

/* This is table's TD tag that goes around the hole frontpage and blog com's
the backround would cover both td's or all colums
*/
.article_column{}
/* this class add formating to the right side of the content front page.
it will overwrite the hole right and take formating over article_column after the
first col
*/
.column_separator{}

/* End blogsection */
/* Need to Edit this is not My code See plugins images */

/* thumbnails */
div.mosimage {}
div.mosimage_caption {}
div.caption {}
div.caption img {}
div.caption p {}
/* Need to Edit this is not My code See plugins images */
/* New added */
/* com_archive */
/*
li |row | 1
h4 |title |
h5 |metadata |
span |created-date |
span |author |
div |intro | */
/* It's LI in a UL list */
.row1{}
/* H4 Header tag for Title */
.title{}
/* Plugin content Items Archived Article List */

/* It a h5 HTML tag which wraps around the authors name meta etc.. */
/* needs div id forul list type layout */
.author{}
.metadata{}
.intro{}
.MsoNormal{}
/*Com Polls*/
/* Has Styles inside its own com folder */
/*td |smalldark | */
.smalldark {}
/*com_search*/
.searchintro{}
/*Search Form keyword highlight*/
.highlight {}
/* ############# END CONTENT - SECTIONS & CATEGORIES ###########################*/
Will hold the module formating

/* ##################### MODULE TABLE STYLE #################*/
/* Element |Class |Suffix */
/* table |moduletable | moduleclass_sfx*/
/* */
/* Table Control */
table.moduletable {}
/* Font Control */
/* Title Control */
table.moduletable th {}

/* Module tbody Control*/
/*table.moduletable tbody{} */
/* Module Row Control*/

/*table.moduletable tr {}*/
table.moduletable tr{}
/* Module table Data Content Control*/

table.moduletable td {}
/* List Control */
table.moduletable ul {}
table.moduletable li {}
/* Link Control*/
table.moduletable a:link{}
table.moduletable a:visited {}
table.moduletable a:hover {}
table.moduletable a:active {}
/* ##################### MODULE TABLE STYLE CUSTOM SUFFIX #################*/
/* ##################### MODULE TABLE STYLE CUSTOM SUFFIX #################*/
/* ##################### END MODULE TABLE STYLE #################*/
/* ##################### MODULE XHTML DIV STYLE #################*/

/* div |moduletable | moduleclass_sfx*/
/* h3 |moduletable |
/* */
/* Table Control */
/* Module Content Control*/
div.moduletable {}
/* Font Control */
/* Title Control */
div.moduletable h3 { }
/* List Control */
div.moduletable ul {}
div.moduletable li {}
/* Link Control*/
div.moduletable a:link{}
div.moduletable a:visited {}
div.moduletable a:hover {}
div.moduletable a:active {}
/* ##################### MODULE XHTML STYLE CUSTOM SUFFIX #################*/

/* ##################### MODULE XHTML STYLE CUSTOM SUFFIX #################*/
/* ##################### END MODULE MODULE XHTML STYLE #################*/
/* ##################### MODULE ROUNDED STYLE #################*/

/* div |module | moduleclass_sfx*/

/* h3 |module |
/* */
/* Module Content Control*/

div.module {}
/* Font Control */
/* Title Control */
div.module h3 { }
/* List Control */
.module ul {}
.module li {}
/* Link Control*/
.module a:link{}
.module a:visited {}
.module a:hover {}
.module a:active {}
/* Round Conners example */

.module {background: url(../images/bl_grey.gif) 0 100% no-repeat #dddddd; width:
20em; margin-bottom: 10px;}
.module div {background: url(../images/br_grey.gif) 100% 100% no-repeat}
.module div div {background: url(../images/tl_grey.gif) 0 0 no-repeat}
.module div div div {background: url(../images/tr_grey.gif) 100% 0 no-repeat;
padding:10px; padding-top: 0px; padding-bottom: 2px;}
.module div div div div {background: none;}
/* ##################### MODULE ROUNDED STYLE CUSTOM SUFFIX #################*/

/* ##################### END MODULE ROUNDED STYLE CUSTOM SUFFIX #################*/
/* ##################### END MODULE ROUNDED STYLE #################*/
/* ##################### MODULE HORZ #################*/

/* table |moduletable | moduleclass_sfx*>*/
/* */
/* Its a table module above has most of the control try using a suffix to have more
control*/
.nowrap{}
/* ##################### MODULE HORZ STYLE CUSTOM SUFFIX #################*/
/* ##################### MODULE BANNERS #################*/

/* mod_banners */
/*
div |bannergroup | moduleclass_sfx
div |bannerheader | moduleclass_sfx
div |banneritem | moduleclass_sfx
div |bannerfooter | moduleclass_sfx*/
/* Group */
div.bannergroup {}
/* Header */
div.bannerheader{}
/* Text advert style */

div.banneritem {}

/* footer */
div.bannerfooter {}
/* ##################### MODULE BANNERS STYLE CUSTOM SUFFIX #################*/

/* Group */
div.bannergroup-ban-sfx{}
/* Header */
div.bannerheader-ban-sfx{}
/* Text advert style */

div.banneritem-ban-sfx{}
/* footer */
div.bannerfooter-ban-sfx{}
/* ##################### END MODULE BANNERS STYLE CUSTOM SUFFIX #################*/
/* ##################### END MODULE BANNERS #################*/
/* ##################### MODULE BREADCRUMBS #################*/

/* mod_breadcrumbs Move to navigation.css*/
/* ##################### MODULE BREADCRUMBS #################*/
/* ##################### MODULE CUSTOM #################*/

/* mod_custom No styles at this time */
/* ##################### MODULE CUSTOM #################*/
/* ##################### MODULE FOOTER #################*/

/* mod_footer No styles at this time */
/* ##################### END MODULE FOOTER #################*/
/* ##################### MODULE LATESTNEWS #################*/

/* mod_latestnews */
/*
ul |latestnews | moduleclass_sfx
li |latestnews | moduleclass_sfx
a |latestnews | moduleclass_sfx */
.latestnews{}
/* List Control */
.latestnews ul {}
.latestnews li {}
/* Link Control*/
.latestnews a:link{}
.latestnews a:visited {}
.latestnews a:hover {}
.latestnews a:active {}
/* ##################### END MODULE LATESTNEWS STYLE CUSTOM SUFFIX
#################*/
/* mod_latestnews */
/*
ul |latestnews | moduleclass_sfx
li |latestnews | moduleclass_sfx
a |latestnews | moduleclass_sfx */
.latestnews-news-sfx{}
/* ##################### END MODULE LATESTNEWS STYLE CUSTOM SUFFIX

#################*/
/* ##################### END MODULE LATESTNEWS #################*/

/* ##################### MODULE FEED #################*/
/*mod_feed
Element | ID | CLASS | SUFFIX
table NA moduletable YES
ul NA newsfeed Y
*/
.newsfeed{}
/* ##################### END MODULE FEED #################*/
.newsfeed-feed-sfx{}
/* ##################### MODULE FEED SUFFIX #################*/
/* ##################### END MODULE FEED SUFFIX #################*/
/* ##################### MODULE MAINMENU #################*/

/* NOTE: see navigation.css */
/* ##################### END MODULE MAINMENU #################*/
/* ##################### MODULE LOGIN #################*/

/* mod_login */
/*
NOTE: see forms.css
/* Element |ID | Class
|Suffix
input-submit |NA | button
|NO
fieldset |NA |input
input-text |modlgn_username |inputbox |NO
input-password |modlgn_passwd |inputbox |NO
input-checkbox |modlgn_remember |inputbox |NO
input-submit |NA |button |NO
*/
/* ##################### END MODULE LOGIN #################*/
form-login{}
/* ##################### MODULE MOSTREAD #################*/

/* mod_mostread */
/*
ul |mostread | moduleclass_sfx
li |mostread | moduleclass_sfx
a |mostread | moduleclass_sfx */
.mostread{}
/* ##################### MODULE MOSTREAD STYLE CUSTOM SUFFIX #################*/
/* ul |mostread | moduleclass_sfx
li |mostread | moduleclass_sfx
a |mostread | moduleclass_sfx */
.mostread-read-sfx{}
/* ##################### END MODULE MOSTREAD STYLE CUSTOM SUFFIX #################*/
/* ##################### END MODULE MOSTREAD #################*/
/* ##################### MODULE NEWSFLASH #################*/

/* mod_newsflash */
/*
These are the same as the Componet class but if your add a suffix you can control
with affecting the main Componet class.
table |moduletable | moduleclass_sfx
table |contentpaneopen | moduleclass_sfx
td |contentheading | moduleclass_sfx
a |contentpagetitle | moduleclass_sfx
span |article_separator| */

/* ##################### END MODULE NEWSFLASH STYLE CUSTOM SUFFIX #################*/
/*
table |moduletable | moduleclass_sfx
table |contentpaneopen | moduleclass_sfx
td |contentheading | moduleclass_sfx
a |contentpagetitle | moduleclass_sfx
span |article_separator| */
moduletable-news-sfx{}
article_separator-news-sfx{}
contentpaneopen-news-sfx{}
contentheading-news-sfx{}
contentpagetitle-news-sfx{}
contentpaneopen-news-sfx{}
/* ##################### END MODULE NEWSFLASH STYLE CUSTOM SUFFIX #################*/
/* ##################### END MODULE NEWSFLASH #################*/
/* ##################### MODULE POLL #################*/

/* mod_poll */
/*
this module has a special style sheet in its front page com
loaction: componentscom_pollassetspoll_bars.css
it calls a Javascript that adds the class at rendering time of page.
table |pollstableborder |
See" forms.css
input-submit |NA |button
!Theses classes are component class see components.css!

div |componentheading | pageclass_sfx
div |contentpane | pageclass_sfx
th |sectiontableheader |
tr |sectiontableentry | pageclass_sfx |odd color 0 1
*/
/* Polls Outside Table Border */
.pollstableborder {}
/* ##################### MODULE POLL STYLE CUSTOM SUFFIX #################*/

/* NA */
/* ##################### END MODULE POLL STYLE CUSTOM SUFFIX #################*/
/* ##################### END MODULE POLL #################*/
/* ##################### MODULE RANDOM IMAGE #################*/

/* mod_random_image No styles at this time*/
/* ##################### END MODULE RANDOM IMAGE #################*/
/* ##################### MODULE REALTED ITEMS #################*/

/*mod_related_items*/
/* ul |relateditems | moduleclass_sfx */
relateditems{}
/* ##################### MODULE REALTED ITEMS STYLE CUSTOM SUFFIX #################*/
relateditems-related-sfx{}
/* ##################### END MODULE REALTED ITEMS STYLE CUSTOM SUFFIX
#################*/
/* ##################### END MODULE REALTED ITEMS #################*/
/* ##################### MODULE SEARCH #################*/

/* mod_searc & com_search */

/* should add form foramtting in the forms.css sheets */
/*Element | ID |
CLASS | SUFFIX
input-submit mod_search_searchword inputbox YES
input-image NA
button YES
input-submit NA button
YES
div NA
.search {}
/* last 2 for search class's are in com_search but added here*/
/* results if not search google */
/* End Search Form */

/* ##################### END MODULE SEARCH #################*/
/* ##################### MODULE SEARCH SUFFIX #################*/
.search-sea-sfx {}
/* last 2 for search class's are in com_search but added here*/
/* results if not search google */
/* ##################### END MODULE SEARCH SUFFIX #################*/
/* ##################### MODULE SECTIONS #################*/

/* mod_sections */
/*
ul |sections | moduleclass_sfx */
.sections{}
/* ##################### END MODULE SECTIONS #################*/
/* ##################### MODULE SECTIONS SUFFIX #################*/
.sections-sec-sfx{}
/* ##################### END MODULE SECTIONS SUFFIX #################*/
/* ##################### MODULE STATS #################*/

/* mod_stats No styles at this time */
/* ##################### END MODULE MODULE STATS#################*/
/* ##################### MODULE SYNDICATE #################*/

/* mod_syndicate No styles at this time */
/* ##################### END MODULE SYNDICATE #################*/
/* ##################### MODULE WHOSONLINE #################*/

/* mod_whosonline No styles at this time */
/* ##################### END MODULE SYNDICATE #################*/
/* ##################### MODULE WRAPPER #################*/

/* mod_wrapper */
/*Element |ID |CLASS |SUFFIX
iframe |NA |wrapper |YES*/
.wrapper{}
/* ##################### MODULE WRAPPER SUFFIX #################*/
/* ##################### END MODULE WRAPPER SUFFIX #################*/
Will hold the navigation formating

/*##################### NAVIGATION SECTION #####################*/
/* Pathway Breadcrumbs is Module*/
a.breadcrumbs pathway{}
.pathway {}
a.pathway:link {}
a.pathway:visited {}
a.pathway:active {}
a.pathway:hover {}

/* Menu J1.5 new menu */
/* level 1 or Top Level*/
.menu {
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
/*border-right: 10px solid #393939;*/
/*padding: 0 0 0 5px;*/
}
ul.menu {
background-color: #686868;
list-style: none;
}
.menu a{
color: White;
display: block;
}
.menu a:hover{
color: #F0FFFF;
background-color: #627DAA;
display: block;
}
/* end of Level 1 */
/* Level 2 Grey */
.menu ul {
color:white;
background-color: transparent;
list-style: none;
padding: 0px;
}
.menu ul a{
color:white;
background-color: #D8D5DC;
display: block;
text-indent: 1em;
}
.menu ul li a:hover{
color:white;
background-color: #A4B9CE;
}
/* End of Level 2 */
/* Level 3 Black yellow*/

.menu ul ul {
list-style: none;
}
/* */
.menu ul ul a {
color:white;
background-color: Black;
display: block;
text-indent: 2em;}

/* */
.menu ul li ul li a:hover{
color: White;
background-color: #FFD700;
}
/* Level 4 Green */
.menu ul li ul li ul li {
list-style: none;
color: White;
}
.menu ul li ul li ul li a{
color: White;
background-color: #B1CD32;
display: block;
text-indent: 3em;
}
.menu ul li ul li ul li a:hover{
color: White;
}
/* Level 5 Maroon */
.menu ul li ul li ul li ul li{
list-style: none;
color: White;
}
.menu ul li ul li ul li ul li a{
color: White;
display: block;
text-indent: 4em;
}
.menu ul li ul li ul li ul li a:hover{
color: White;
}
/* End of Level 5 Maroon */
/* Current highlighted link Icon Arrow */

#current li {
margin: 0px;
padding: 0px;
}
#current {
/* list-style: disc url(../images/mw_readon.png);*/
/* image issue with the rollover need to be add to others href link */
}
/* */
/* Legacy
Mainlevel menu */
.mainlevel {}
a.mainlevel {}
a.mainlevel:hover {}
/* End Mainlevel menu */
/* Sub Menu */
.sublevel{}

a.sublevel{}
a.sublevel:hover {}
/* End Legacy Sub Menu */
Bingung yach melihat penggalan script diatas? Kalo emang bingung, sama seperti saya waktu belajar CSS
template joomla. Tapi untungnya, ada layout CSS template joomla yang sangat membantu saya dalam
mempelajari script diatas. Untuk layout CSS template joomla, bisa dilihat pada file html yang saya sertakan satu
paket dengan ebook.
Setelah mempelajari materi diatas, lalu bagaimana sebenarnya dalam mendesign template joomla? Materi ini
memang lebih mengarah ke pengetahuan tentang file yang dibutuhkan dalam mendesign template joomla dan
Style Sheet pada joomla. Untuk materi tentang bagaimana cara membuat template joomla dari awal, akan saya
bahas pada kesempatan lain dan jika memang ada permintaan dari anda juga. Jika memang saya merasa dengan
materi ini anda sekali sudah dapat membuat template joomla sendiri dan tidak ada permintaan untuk ebook
membuat template joomla dari awal, ada kemungkinan ebook tentang template joomla ini sampai disini.
Harapan saya, dengan materi yang saya buat ini dapat membatu anda yang sedang belajar membuat template
joomla seperti saya. Sekali lagi, saya juga masih newbie dan masih perlu banyak belajar juga.

Tentang Penulis
Heri Siswanto – kelahiran Magetan tahun 1985 dan bertempat tinggal di banyuwangi. Tahun
2004 lulus dari SMKN 1 Banyuwangi kejuruan Tehnik Informatika. Setalah lulu mencoba
belajar bekerja di jember sebagai teknisi pada sebuah delaer komputer selama dua tahun.
Pertengahan tahun 2006 mencoba belajar sebagai editing video pada sebuah perusahaan
kecil di banyuwangi. Awal tahun 2007 mencoba merantau ke Denpasa – Bali. Dan sempat
bekerja sebagai teknisi pada sebuah dealer komputer. Berawal dari dealer komputer
tersebut, di akhir tahun 2008 mulai tertarik belajar joomla dan bergabung dengan forum
joomla indonesia ( http://id-joomla.com ). Hasilnya dalam 1 bulan dapat membuat website
berbasis joomla dan virtuemart untuk dealer tempat bekerja. dan sekarang, kembali ke
banyuwangi dan bekerja sebagai operator warnet di banyuwangi. Penulis dapat dihubungi di
siswanto.heri.09@gmail.com . website berbasis joomla yang sudah di buat adalah http://alumnismkn1bwi.co.cc
dan http://artikelheri09.co.cc .


Membuat Template Joomla 1.5

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Template Joomla 1.5

Diunggah oleh

Hak Cipta:

Format Tersedia

TUTORIAL MEMBUAT TEMPLATE JOOMLA 1.

Ok. Lanjut.... udah cukup basa-basinya.

<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>

fungsi dari masing-masih bagian header in iadalah sebagai berikut:

<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

<jdoc:include type="head" />

Untuk penjudulan secara otomatis pada halaman joomla

<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />

<jdoc:include type="message" />

<jdoc:include type="modules" name="right" />

Fungsi dari bagian-bagian tersebut adalah:

<jdoc:include type="modules" name="top" />

<jdoc:include type="message" />

<jdoc:include type="modules" name="footer" style=”xhtml”/>

<jdoc:include type="modules" name="footer" style=”rounded”/>

• Jdoc:include – maksudnya kira-kira “tambahkan ini”

Misal : <jdoc:include type="component" />

Misal : <jdoc:include type="head" />

Misal : <jdoc:include type="modules" name=”user4” />

<jdoc:include type="modules" name=”debug” />

Copyright © 2009 by heri siswanto

<?xml version="1.0" encoding="utf-8"?>

Copyright © 2009 by heri siswanto

<?xml version="1.0" encoding="utf-8"?>

Copyright © 2009 by heri siswanto

Istilah-istilah dalam style sheet

Komentar dalam style sheet

Sebagai contoh, dapat lihat dibawah ini :

H1{color:blue;} /* H1 element akan menjadi biru */

Pemakaian element style

Berikut beberapa contoh script pemakaian element style:

Link ke sheet lain :

Mengatur tepi halaman (page margin)

Mengatur jarak penulisan dari tepi atas dan bawah halaman

Mengatur format font

Copyright © 2009 by heri siswanto

Menambahkan border dan latar belakang

Mengatur warna link

:link {color: red;} – untuk warna link yang belum diakses

:visited{ color: red;} – untuk warna link yang telah diakses

:active{ color: redd;} – untuk warna link ketika diklik

Joomla Css Global Formating

/* ####################### END GENERAL SETTINGS ############################ */

Copyright © 2009 by heri siswanto

/* ############# CONTENT - SECTIONS & CATEGORIES ###########################*/

/* Needs Edit component heading */

/* Element |ID | Class |Suffix */

/* article rating needs to turn on via the back-end */

/* Element |ID | Class |Suffix */

/* top box like a category description */

/* Icons Print E-mail PDF etc.*/

/* Main Body Text */

/* Article Table of contents */

Copyright © 2009 by heri siswanto

/* Heading Top TOC */

/* Table Data can add color */

/* Links Article Table of contents index */

/* Main Body Text */

/* << Prev - Next >> */

/* Page footer nav « StartPrev12NextEnd » */

/* Table layout types "list"ings Archived, weblink etc..*/

/* Table odd and Even Rows */

/* blogs Layout Style Top of the page Blog style Layouts */