Membuat Template Joomla 1.5

21
Copyright © 2009 by heri siswanto thanks to God and friends id-joomla 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" />

Transcript of Membuat Template Joomla 1.5

Page 1: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

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" />

Page 2: Membuat Template Joomla 1.5

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" />

Page 3: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

<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

Page 4: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

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).

Page 5: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

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>

Page 6: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

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.

Page 7: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

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 h alaman 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)

Page 8: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

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: 90 0;} h2 {font-size:15px;line-height: 1em;font-weight: 90 0;} h3 {font-size:14px;line-height: 1em;font-weight: 90 0;} h4 {font-size:13px;line-height: 1em;font-weight: 90 0;} h5 {font-size:12px;line-height: 1em;font-weight: 90 0;} h6 {font-size:11px;line-height: 1em;font-weight: 90 0;} 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 ## ########################## */

Page 9: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

Will hold the content and component formating /* Design by Brian Diaz of Media 65 @ http://www.m6 5.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 */ /* Element |ID | Class |Suffix */ /* Div |NA |contentheading |YES */ /* Top of any article is Parameters - Component : S how Article Title*/ .componentheading {} /* Element |ID | Class |Suffix */ /* Div |NA |contentheading |YES */ /* Top of any article is Parameters - Component : S how Article Title*/ .contentheading {} /* article rating needs to turn on via the back-end */ .content_rating {} .content_vote {} /* .button class to be added see forms css */ /* Element |ID | Class |Suffix */ /* Div |NA |contentpagetitle |YES */ /* Top of any article is Parameters - Component : S how Article Title*/ /* content title and links href links happens if tu rned 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 searc h 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 {} /* Main Body Text */ .contentpaneopen {} /* edit button if you have access to it */ .contentpaneopen_edit{} /* Article Table of contents */

Page 10: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

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:visit ed {} /* End Article Table of contents */ /* Main Body Text */ /* << 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:hov er {} /* End category */ /* blogs Layout Style Top of the page Blog style La youts */ .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 th e content front page. it will overwrite the hole right and take formating over article_column after the first col */ .column_separator{}

Page 11: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

/* End blogsection */ /* Need to Edit this is not My code See plugins ima ges */ /* thumbnails */ div.mosimage {} div.mosimage_caption {} div.caption {} div.caption img {} div.caption p {} /* Need to Edit this is not My code See plugins ima ges */ /* 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 & CATEGORIE S ###########################*/

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 {}

Page 12: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

/* 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 ### ##############*/ /* Element |Class |Suffix */ /* 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 ST YLE #################*/ /* ##################### MODULE ROUNDED STYLE ##### ############*/ /* Element |Class |Suffix */ /* div |module | moduleclass_sfx*/

Page 13: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

/* 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 1 00% 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_g rey.gif) 100% 0 no-repeat; padding:10px; padding-top: 0px; padding-bottom: 2px ;} .module div div div div {background: none;} /* ##################### MODULE ROUNDED STYLE CUSTO M SUFFIX #################*/ /* ##################### END MODULE ROUNDED STYLE C USTOM 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 S UFFIX #################*/ /* ##################### 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 {}

Page 14: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

/* footer */ div.bannerfooter {} /* ##################### MODULE BANNERS STYLE CUSTO M 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 STYL E CUSTOM SUFFIX #################*/ /* mod_latestnews */ /* ul |latestnews | moduleclass_sfx li |latestnews | moduleclass_sfx a |latestnews | moduleclass_sfx */ .latestnews-news-sfx{} /* ##################### END MODULE LATESTNEWS STYL E CUSTOM SUFFIX #################*/ /* ##################### END MODULE LATESTNEWS #### #############*/

Page 15: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

/* ##################### MODULE FEED ############## ###*/ /*mod_feed Element | ID | CLASS | SUFFIX table NA moduletable YES ul NA newsfeed YES*/ .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 |NOinput-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 CUST OM 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 you r 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| */

Page 16: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

/* ##################### 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 rende ring 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 c olor 0 1 */ /* Polls Outside Table Border */ .pollstableborder {} /* ##################### MODULE POLL STYLE CUSTOM S UFFIX #################*/ /* NA */ /* ##################### END MODULE POLL STYLE CUST OM 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 S TYLE CUSTOM SUFFIX #################*/ /* ##################### END MODULE REALTED ITEMS # ################*/ /* ##################### MODULE SEARCH ############ #####*/ /* mod_searc & com_search */

Page 17: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

/* should add form foramtting in the forms.css shee ts */ /*Element | ID | CLASS | SUFFIX input-submit mod_search_searchword inputbox YE S input-image NA button YES input-submit NA button YES div NA s .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 {}

Page 18: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

/* 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; background-color: transparent; } /* */ .menu ul ul a { color:white; background-color: Black; display: block; text-indent: 2em;}

Page 19: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

/* */ .menu ul li ul li a:hover{ color: White; background-color: #FFD700; } /* End of Level 3 */ /* Level 4 Green */ .menu ul li ul li ul li { list-style: none; color: White; background-color: transparent; } .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; background-color: #677620; } /* End of Level 4 */ /* Level 5 Maroon */ .menu ul li ul li ul li ul li{ list-style: none; color: White; background-color: transparent; } .menu ul li ul li ul li ul li a{ color: White; background-color: #660000; display: block; text-indent: 4em; } .menu ul li ul li ul li ul li a:hover{ color: White; background-color: #990000; } /* 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{}

Page 20: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

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.

Page 21: Membuat Template Joomla 1.5

Copyright © 2009 by heri siswanto thanks to God and friends id-joomla

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

[email protected] . website berbasis joomla yang sudah di buat adalah http://alumnismkn1bwi.co.cc dan http://artikelheri09.co.cc .