Tutorial Membuat Template Joomla 1.5

Ukuran: px

Mulai penontonan dengan halaman:

Download "Tutorial Membuat Template Joomla 1.5"

Veronika Jayadi
7 tahun lalu
Tontonan:

1 Tutorial Membuat Template Joomla 1.5 Tempate joomla sebenarnya sangat sederhana, tidak rumit sama sekali. Satu file layout html bisa kita konversi langsung menjadi template joomla 1.5 yang valid. Tutorial kali ini mengajak anda membuat template joomla khusus untuk joomla versi 1.5, sejak joomla memiliki 2 fork yang masih terus dikembangkan, yang lain adalah versi 1.0. Struktur dan Komponen Template Joomla 1.5 Sebelumnya, mari kita mengenal struktur dan komponen template joomla 1.5. Saya menggunakan template default rhuk_milkyway theme sebagai contoh. Seperti yang anda lihat, template rhuk diletakkan didalam direktori sendiri dengan nama rhuk_milkway, didalamnya terdapat beberapa folder dan file-file. Minimal, sebuah theme harus memiliki file index.php, dan templatedetails.xml saja. File-file lain sifatnya optional, misalnya file css, javascript, favicon, template_thumbnail, params.ini dan lainnya. File index.php sama saja seperti sebuah file html biasa, karena isinya adalah layout saja. Layout ini akan diformat oleh file css, dalam kasus rhuk, diletakkan dalam folder css. File templatedetails.xml berisi metadata template. Nama template, pembuatnya, versi joomla, nama posisi dalam layout, parameter-parameter yang diatur oleh file params.ini, dan informasi lainnya. Dalam tutorial ini kita kan membuat template sederhana, cukup dengan 3 buah file saja. File

templatedetails.xml, index.php dan sebuah file style.css yang mengatur layout. Ketiga file ini akan kita simpan di dalam folder example di direktori templates instalasi joomla.

2 templatedetails.xml, index.php dan sebuah file style.css yang mengatur layout. Ketiga file ini akan kita simpan di dalam folder example di direktori templates instalasi joomla. Membuat File templatedetails.xml Sebagai awal, silahkan buka editor kesayangan anda, buat sebuah file baru. Simpan dengan nama templatedetails.xml, simpan di folder templates/example pada instalasi joomla anda. Seperti yang anda lihat, saya mengcopy dan mempaste beberapa metadata penting yang paling tidak harus ada disebuah template standar. Saya tidak bisa menjelaskan semua yang anda lihat di gambar diatas. Yang bisa saya jelaskan, anda

3 memerlukan blok informasi template, nama file yang disertakan berikut direktori di dalamnya dan posisi yang digunakan. Template yang lebih rumit, menyertakan juga blok params dan lainnya. Tetapi ini sudah cukup untuk mengaktifkan template kita. Masuk ke administrator panel, di bagian extensions > template manager, pilih dan aktifkan template example sebagai template default. Coba lihat apa yang terjadi dengan halaman depan joomla anda. Kosong! Jangan takut, kita akan melakukan sulap agar membuatnya muncul kembali. Membuat File LayOut Index.php Halaman depan joomla kita kosong, karena file index.php kita belum ditulisi satu karakter pun. Untuk ini, kita akan membuat layout dua kolom yang sederhana. SIDEBAR HEADER FOOTER CONTENT <?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="<?php echo $this->language;?>" lang="<?php echo $this->language;?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/example/style.css" type="text/css" /> </head> <body> <div id="header"> <h2 class="sname"><a href="index.php">example</a></h2> <p class="slogan">template Joomla 1.5 Sederhana</p>

4 <div id="bodywrapper"> <div id="content"> <div id="sidebar"> <br class="clear" /> </body> </html> <div id="footer"> Di template dasar diatas, bagian yang berwarna biru, jika diproses akan menghasilkan kode-kode html berikut: Hasil dari: <jdoc:include type="head" /> Selanjutnya, mari kita meletakkan posisi-posisi yang sudah kita definiskan sebelumnya di file

5 templatedetails.xml. Yang perlu anda ingat, joomla tidak mengharuskan menggunakan nama posisi dan jumlah posisi seperti pada contoh default. Kita bisa saja membuat posisi sendiri dengan nama dan jumlah sesuai keinginan kita. Ayo kita kurangi jumlah posisi yang kita gunakan ditemplate example ini. Saya sendiri merasa, posisi: left (untuk modul di sidebar) header (untuk iklan di header) footer (untuk modul tambahan di footer) sudah cukup. Joomla memiliki format sendiri untuk menuliskan posisi dalam template. Seperti: <jdoc:include type="modules" name="header" style="xhtml"/> Penjelasannya: jdoc:include maksudnya kira-kira: tambahkan ini type= modules modul ini diatur di panel administrator > extensions > modules Selain modul, joomla mengenal type lain seperti: message untuk menampilkan pesan error, success dan lainnya component untuk menampilkan component. Component utama yang langsung aktif adalah component article atau blog. Component lain seperti forum, ecommerce dan lainnya bisa anda tambahkan melalui menu component di tab extensions panel administrator. name= header sudah jelas, ini adalah nama posisi yang dapat anda pilih saat mengatur detail modul. style= xhtml layout modul yang akan ditampilkan. Defaultnya adalah tanpa style. Style default (sering tidak dituliskan) akan mem-format layout modul menggunakan tabel. Jika menggunakan style xhtml, modul akan ditampilkan tanpa tabel. Style lainnya adalah round, sama seperti xhtml, hanya saja, lebih cocok untuk di style bersudut round menggunakan stylesheet.

6 Setelah kita menambahkan posisi-posisi pada tempatnya, kita akan mendapatkan hasil seperti ini: Inilah hasil dasar tanpa style yang terlalu detil, hanya: /* Filename: style.css * /* Layout Styling */ body {margin: 0; padding: 0; font: 62.5% normal Verdana,Arial,Sans-Serif; text-align: center;} #header, #bodywrapper, #footer {margin: 0 auto; padding: 0; width: 90em; text-align: left;} #header {background: #ececec; border-bottom: 0.5em solid #ccc;} #brand {width: 40%; float: left; margin: 0; padding: 1%;} #advert {width: 54%; float: right; margin: 0; padding: 1%; text-align: right;} #content {width: 72%; float: right; margin: 0; padding: 1%; background: #ffffff;} #sidebar {width: 22%; float: left; margin: 0; padding: 1%; background: #ffffff;} #footer {background: #ececec; border-top: 0.2em solid #ccc; text-align: center;}.clear {clear: both} /* Some CSS for Basic Typography */ p, ul, ol, table, input, button, label, legend {font-size: 12px;} a {} img {border: none;} ul, ol {margin: 0; padding: 0 0 5px 18px;} /* Joomla 1.5 Specific Styles */.sname {margin: 0; padding: 0; font-size: 20px;}

7 .slogan {margin: px; padding: 0; font-weight: bold;} /* toggle feed icon text hidden */ #advert a span {display: none;} /* Content typos */.contentheading {font-size: 16px;} and go on as your creativity :-) Ok, sampai disini anda pasti sudah mendapatkan pemahaman, membuat template joomla itu sangat mudah. Anda bisa mendownload source latihan kita di Tentang Penulis: Amrin Zulkarnain menulis sebagai sebuah hobby. Tinggal di Mataram, Lombok. Bisa di kontak di amrinz@gmail.com Lisensi: miniebook ini dibuat dengan harapan diterima sebagai amal ibadah oleh Allah Yang Maha Pandai. Anda diperkenankan mempergunakan, menyebarkannya, mempublikasikannya, dengan atau tanpa perubahan dengan tetap menyertakan pernyataan lisensi ini. Copyright is Gift from Allah, The Origin of All Things Copyleft is Kindness of Human Being

dokumen-dokumen yang mirip

Design Web Dengan 2 Kolom

Design Web Dengan 2 Kolom Muh Hasan Tanjung recosmic@gmail.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial