Afterburner merupakan template Joomla yang gratis dan tercepat sejauh ini. Ada beberapa template yang lebih cepat dari Afterburner namun murni CSS dan lumayan repot mengkustomisasinya. Mengapa harus memodifikasi template? Well, tanpa modifikasi, website yang memakai template yang sama akan tampak uhmm... sama. Dan inti Joomla adalah modifikasi. User Joomla yang sebagian besar bukanlah programer ulung yang berkepentingan mengubah core Joomla. Dan untuk pemula, modifikasi pun cukup memakan pikiran.
Template Afterburner mempunyai beberapa style. Dan penampilan aslinya bisa dilihat di sini. Afterburner dengan style default: light.
Modifikasi ini sudah dites di Chrome, Firefox, IE8, Opera, dan Safari
Apa yang dibutuhkan untuk memodifikasi template ini?
1. CMS Joomla dan template Afterburner (dan tentu saja server lokal seperti XAMPP atau WAMP! Jika Anda benar-benar pemula, baca artikel ini untuk mengetahui cara menginstall server lokal dan Joomla)
2. Browser dengan add on "inspect element", Firebug untuk Firefox; Chrome juga oke.
3. Notepad++ atau Dreamweaver
4. Image editor (untuk mengubah logo)
Yang perlu dilakukan pertama adalah mengatur setting template Afterburner.
Buka template manager, atur settingnya sebagai berikut:
Default Color Style: Light Style 1
Left Side Column Width: 180
Right Side Column Width: 225
Left dan Right Column Color: Color Style 1
Biarkan sisanya.
Modifikasi Logo
Ubah bagian logo di "light.png" di folder "images" template After
burner. Sesuaikan tinggi logo dan warna backround dengan logo di file "light.css". Jika diinginkan, ubah blok-blok warna lainnya di file tersebut. Lalu timpa file asli "light.png".
Pakai firebug atau fasilitas "inspect element" di browser untuk menemukan kode CSS.
Baris 55
#height:68px;
Baris 56
#header {overflow:hidden; background:#FFC300}
Header modifikasi menjadi seperti gambar di kanan.
Modifikasi Posisi Navigasi Main Menu
Template Afterburner memasukkan Main Menu pada posisi "nav". Terkadang, main menu yang memakai js suckerfish untuk efek dropdown menu ini tidak muncul. Coba buat "new module" lalu pilih "menu", pilih "main menu" di parameternya dan publish pada posisi "nav". Namakan misalnya "Afterburner Menu". Dan disable module "main menu".
Untuk efek dropdown, menu mesti punya submenu. Buat di menu manager, pilih "main menu" lalu tambahkan submenu dengan memposisikannya di bawah menu yang menjadi induknya (Parent item).
Lihat gambar di samping. 
Sekarang kita ingin memindahkan posisi "nav" ke bagian atas di kanan logo.
Buka "index.php" di folder template Afterburner. Pindahkan blok kode "nav" ke dalam blok "header".
Kemudian kita sesuaikan warna background dan posisinya di "light.css" pada baris ke-59
#nav {height:34px; background:#CF2700; z-index:1; position:absolute; width:600px; margin-left:362px;}
Margin left disesuaikan dengan ukuran logo plus ditambah sedikit jarak.
Untuk mengubah warna background submenu, edit "light.css" pada baris ke-68 dan 69.Jadinya seperti gambar di samping ini.
Modifikasi Posisi Top dan Newsflash
Di bawah main menu tampak kosong, sebenarnya itu posisi "top" dan secara default modul "newsflash" diletakkan di sana. Tampaknya bagus untuk membuat slogan atau keterangan website.
Copy module "Newsflash". Buat namanya, misalnya "myinfo".
Buat kategori baru di "Article Manager", misalnya "myinfo". Dan isi modul "myinfo" dengan artikel kategori "myinfo". Jangan pilih artikel "frontpage", dan pilih "random". Jadi, teks yang muncul di kanan atas tetap tidak berubah.
Buat artikel baru, pilih kategorinya "myinfo". Dan isi dengan teks Anda. Jika ingin membuat style warna dan ukuran, pakai mode html (ada ikon html di text editor tool bar), misalnya menjadi:
<h3 style="color:#036BB1">Your Information Here. Yes, it is still Newsflash! Disable random and update your text here from "Article Manager".</h3>
Hasilnya seperti gambar di samping.
Modifikasi Kolom Kanan dan Kiri
Secara default, Afterburner punya kolom kiri, tengah, dan kanan. Lebar kanan dan kiri bisa diubah, kolom tengah akan mengikuti sisa lebar yang ada. Jika ingin mengubah posisi kolom kiri dan kanan berdampingan di kanan kolom tengah, bukan "rt_utils.php" di folder template Afterburner.
Ubah baris ke-35
.s-c-s #col2 {float:left;position:relative;overflow:hidden;margin-left:-21%;}
rt_utils.php
Dan baris ke-43
.s-c-s #col1pad { margin-left:".($rightcolumn_width + 15)."px;
margin-right:".($leftcolumn_width)."px;}
Hasil akhirnya seperti ini:
Kelihatan kurang keren? Anda pasti bisa membuatnya lebih bagus.