Tags

Tutorial Tambahan Mini Frontpage

Catatan : Artikel ini ditunjukan untuk Anda yang sudah menguasai dasar-dasar menggunakan CMS Joomla. Juga mengerti tentang CSS. Bagi Anda yang belum mengerti kedua istilah diatas. Silahkan baca buku saya yang berjudul "Kreatif Membuat Website Profesional". Bukunya bisa dipesan lewat sini.

Mini Frontpage adalah module Joomla yang cukup populer. Module ini digunakan untuk mengatur tampilan artikel. Bagi para webmaster Joomla yang sering menggunakannya pasti paham akan bermanfaatnya Module ini. Kalau Anda ingin melihat demonya,
perhatikan gambar berikut.

Nah, seperti gambar diatas. Module Mini Frontpage akan membuat tampilan artikel diwebsite Anda seperti diatas. Itulah kegunaan dari Module Mini Frontpage. Cukup cantik bukan tampilannya.

Tapi sewaktu saya mendapat pesanan website dari klien, dia meminta tampilannya seperti ini:

Waduh, berbeda 180 derajat namanya. Saya langsung mencari info untuk merubahnya. Pergi ke website forum Mini Frontpage tersebut. Yah, meskipun isi forum masih dalam bahasa inggris tapi dikit-dikit ngerti lah. Sekarang saya akan berbagi kepada Anda apa yang saya dapat dari forum Mini Frontpage, tentunya dalam bahasa Indonesia. (Baik hati kan saya ^_^)

Melihat kondisi diatas untuk membuat artikelnya memanjang kebawah saya tinggal mengubah parameter Number of Coloumns pada pengaturan modulenya

Nah loh, itu bagaimana agar bisa mengatur parameter Number Of Coloumns? Bagi yang sudah terbiasa memakai Mini Front Page pasti sudah mengetahui dimana letak parameter itu. Silahkan bagi Anda yang pemula untuk cari info tentang penggunaan dasar Mini Frontpage diluar.

Lanjut, untuk masalah pertama sudah selesai, selanjutnya gambaran yang di minta klien saya pada huruf judulnya terlihat lebih besar

Kalau di pengaturan module pada halaman administrator Joomla jelas kita tidak akan menemukan parameter untuk mengatur warna, ukuran, dan jenis huruf judul. Mau tidak mau yah kita harus membongkar file CSS template Joomla Anda.

Untuk mengatur style judul pada module Mini Frontpage silahkan buka file CSS template yang sedang Anda pakai. nama file CSS untuk setiap template memang berbeda, dalam hal ini saya menggunakan template st_birdsign. Pada template st_birdsign yang saya gunakan file CSS utamanya terletak pada folder css/template.css. Tentunya silahkan sesuaikan dengan template Joomla yang Anda gunakan.

Nah, setelah masuk ke file utama CSS template Anda, masukan kode CSS berikut
.mfp-introtitle {
.......
}

Nah, .mfp-introtitle itulah class yang mengatur judul pada mini frontpage. Di dalam tanda kurung kurawal silahkan masukan properti CSS yang ingin Anda gunakan untuk mengatur judulnya. Yah, dalam hal ini Anda harus sudah mengerti dasar-dasar kode CSS.

Dalam kasus ini saya memasukan kode seperti ini,
.mfp-introtitle {
display:block;
margin-top:10px;
}
Sehingga tampilan huruf pada judul saya akan berubah. Oke permasalahan kedua sudah selesai. Selanjutnya tinggal mengubah tampilan text intro-nya. Kalau kita lihat tampilan intro-text yang diminta klien saya lebih besar dari default ukuran Mini Front Page.


Lagi-lagi kita tidak akan menemukan Parameter untuk mengatur ukuran intro text pada Pengaturan Module. Yah terpaksa bongkar kode lagi.

Caranya masih pada file template.css yang tadi di buka. Tinggal tambahkan kode berikut ini :
.toto {
font-size : 20px;
}
Huruf yang saya cetak tebal tersebut bebas Anda rubah. Itu adalah Class pada CSS. Sesuaikan parameter CSS-nya sesuai kebutuhan Anda. Dalam hal ini saya hanya perlu mengubah ukuran huruf menjadi 20px. Selanjutnya sesuaikan dengan kebutuhan Anda.

Simpan perubahan file template.css dan lanjut ke halaman pengaturan module Joomla. isikan nama class yang tadi Anda definisikan pada parameter Module Class Suffix. Dalam hal ini saya memberi nama toto,


Parameter tersebut dapat Anda temukan pada bagian Advanced Option. Nah, setelah itu selesailah poin-poin yang diminta klien saya. Semoga Artikel ini membantu Anda untuk mengotak-atik module Mini Frontpage.




3 comments:

Blogger Template by Kerendi Developers