8 Tips dan Teknik untuk Memodifikasi Joomla! Templat

() translation by (you can also view the original English article)

Baru memulai membuat Joomla! template dan bingung tentang bagaimana benar-benar menangani memodifikasi itu? Lihatlah tips dan trik sederhana ini yang akan memberi Anda kontrol yang lebih baik ketika merancang situs web Joomla Anda.

Ketika saya pertama kali mulai membuat templat Joomla ada beberapa hal yang saya bingung. Bagaimana saya harus memodifikasi hanya satu halaman tanpa mempengaruhi orang lain? Bagaimana cara mengubah struktur modul sehingga lebih mudah untuk bergaya? Pada artikel ini kita akan membahas cara mengatasi masalah ini serta mencari solusi cepat lain yang dapat Anda gunakan untuk mempercepat pekerjaan pengembangan template Joomla Anda.

Garis Besar Pelajaran:

Menyiapkan instalasi Joomla localhost.
Memilih framework templat yang baik untuk dikerjakan (jadi Anda tidak menciptakan kembali roda).
Menggunakan data URL dari browser untuk menata masing-masing halaman di Joomla.
Runtuh posisi modul.
Log in styling.
Menggunakan sufiks kelas modul untuk membuat modul unik.
Ubah templat modul sehingga lebih mudah untuk ditata.
Tambahkan persyaratan IE lama biasa untuk memperbaiki bug Internet Explorer

Tips 1: Instalasi Joomla Localhost

Sebelum Anda dapat memodifikasi dan mengembangkan template Anda, Anda harus memiliki instalasi Joomla untuk bekerja dengannya. Menggunakan WAMP untuk windows atau MAMP untuk Mac (saya akan menggunakan WAMP untuk contoh ini), kita akan membuat instalasi Joomla sederhana yang di-host tepat di komputer Anda sehingga Anda dapat memulai dengan modifikasi templat.

Pertama, kunjungi www.wampserver.com/en. Di halaman beranda klik "Unduh rilis terbaru Wampserver 2".

Sekarang klik tautan unduhan untuk WAMP versi 32-bit atau 64-bit (tergantung pada versi Windows yang Anda miliki). Jika Anda tidak tahu versi mana yang Anda miliki, klik bola mulai dan ketik "dxdiag" di bidang pencarian. Di dalam alat diagnostik DirectX itu akan memberi tahu Anda versi mana yang Anda jalankan di sebelah sistem operasi. Unduh WAMP dan jalankan .exe untuk menginstal program menggunakan direktori default C:\wamp. Ini juga akan menanyakan browser yang ingin Anda gunakan untuk pratinjau default, tetapi saya tidak pernah menggunakan ini jadi pilih saja explorer.exe. Kita tidak akan menggunakan SMTP atau email jadi biarkan saja itu sebagai nilai default dan kemudian jalankan WAMP.

Sebuah ikon akan muncul di taskbar tugas Anda untuk WAMP dan harus berwarna oranye. Ini berarti server localhost sedang offline. Untuk mengubahnya secara online (sehingga Anda dapat mulai bekerja dengannya) klik kiri pada ikon dan pilih "Start All Services". Kemudian klik kiri ikon itu lagi dan pilih "Put Online". Ini akan memulai server localhost di mesin Anda.

Catatan: Jika Anda memiliki hal-hal seperti Skype atau Teamviewer berjalan di komputer Anda, ini akan mencegah WAMP dari online jadi pastikan Anda mematikan program ini sebelum Anda mencoba memulai hosting lokal.

Sekarang setelah kita menyiapkan server localhost, kita dapat melanjutkan untuk mengunduh instalasi Joomla terbaru untuk bekerja dengannya. Versi terbaru Joomla saat ini adalah 1.7 tetapi kita akan menggunakan Joomla 1.5 untuk tutorial ini; itu lebih stabil dan memiliki sebagian besar ekstensi dan templat tersedia untuk itu.

Kunjungi www.joomla.org. Setelah itu klik tombol "Download Joomla" di kanan tengah halaman. Gulir ke bawah dan cari versi terbaru Joomla 1.5. Pada saat tulisan ini dibuat, 1.5.23 dan kita menginginkan paket lengkapnya, jadi klik tautan berjudul "ZIP" untuk mengunduhnya. Sekarang buka direktori C:\wamp\www directory and create a new folder called "joomla". Salin file zip Joomla yang baru saja Anda unduh ke folder ini dan ekstrak dengan alat seperti 7zip atau WinRAR yang keduanya tersedia untuk diunduh dari download.com. Ini akan mengekstrak seluruh paket Joomla ke direktori itu dan memungkinkan Anda untuk menginstalnya.

Untuk menginstal Joomla, masuk ke browser Anda dan ketik "localhost/joomla/installation". Jika semuanya berjalan dengan baik, itu akan menampilkan halaman "Choose Language". Pilih bahasa Anda dan klik tombol "next" di sudut kanan atas. Untuk pemeriksaan pra-pemasangan, Anda tidak perlu mengubah apa pun, jadi klik "next". Sekali lagi, klik "next" untuk menerima lisensi publik GNU.

Inilah bagian terpenting dari instalasi: membuat database dan pengguna. Saat ini kita belum memiliki satu pengaturan sehingga kita akan membuatnya sekarang.

Untuk membuat database dan pengguna database, kita akan menggunakan PHPmyadmin untuk WAMP. Klik kiri pada ikon WAMP di taskbar Anda dan pilih "PHYmyadmin" di bagian atas popup. Ini akan memunculkan PHPmyadmin di browser Anda. Layar pertama adalah tempat kita akan membuat database untuk Joomla.

Di bidang "Create New Database", ketikkan nama database pilihan Anda. Sesuatu seperti "templat" akan cukup. Database sekarang dibuat dan akan menunjukkan kepada Anda bahwa tidak ada tabel saat ini di dalamnya. Langkah selanjutnya adalah membuat pengguna dengan semua izin sehingga database dapat diakses oleh Joomla. Buka tab "Privileges" di bagian atas dan klik "Add new user".

Pada layar baru ini, ketikkan nama pengguna yang ingin Anda gunakan. Saya memilih "template_user" sebagai nama pengguna saya dan "1234" untuk kata sandi saya. Jelas pada server nyata Anda ingin menggunakan sesuatu yang lebih aman daripada ini untuk pengguna dan kata sandi Anda, tetapi untuk localhost itu tidak terlalu relevan. Untuk bidang host isi "localhost". Sekarang di bawahnya, di mana dikatakan database untuk pengguna, defaultnya adalah tombol radio terakhir. Jika tidak klik pada tombol radio terakhir yang mengatakan sesuatu seperti "Berikan semua hak istimewa pada 'templat' database." Tepat di bawahnya, di sebelah Global Privileges, klik tautan "Check All" dan kemudian klik tombol "Go" di sudut kanan bawah.

Di bawah ini adalah contoh yang menunjukkan seperti apa seharusnya.

Sekarang setelah pengguna dan basis data Anda dibuat, Anda dapat kembali ke layar instalasi Joomla Anda dan meletakkan item-item ini ke dalam bidang untuk basis data: pertama, tipe basis data adalah "mysql", dan kemudian Anda ketikkan "localhost" untuk host nama. Ketikkan nama pengguna yang Anda buat dan kata sandi. Untuk menyelesaikannya ketikkan nama database yang "templat" dan klik next. Pada layar konfigurasi FTP biarkan semuanya seperti adanya dan klik "next" tanpa mengaktifkan layer sistem file FTP.

Layar terakhir adalah Konfigurasi Utama untuk instalasi. Ketikkan nama situs Anda yang akan saya sebut "Template Tips". Ketikkan email Anda, kata sandi admin Anda (kita hanya dapat menggunakan 1234 lagi untuk contoh ini) dan kemudian konfirmasikan kata sandi admin. Ketika Anda pertama kali memulai membuat templat, saya akan merekomendasikan menginstal sampel data karena dapat memberikan situs rasa "lengkap" ketika Anda mencoba mendesain, daripada memulai dengan papan tulis kosong. Jika Anda tidak menginstal data sampel, ketika Anda pergi ke situs Joomla Anda setelah selesai di sini, itu akan menjadi sangat kosong tanpa konten sama sekali untuk ditata.

Catatan: Setelah Anda menjadi lebih maju dengan modifikasi templat, Anda tidak ingin menginstal data sampel lagi. Ini akan memakan waktu lebih lama bagi Anda untuk uninstall semua konten dummy daripada itu akan menghemat Anda dalam membantu memvisualisasikan tampilan template.

Jadi klik tombol "Instal Sampel Data" dan kemudian klik tombol "next".

Langkah terakhir dan terakhir untuk menginstal Joomla (saya berjanji) adalah menghapus direktori "installation" dari folder "joomla" yang Anda buat di WAMP. Pergi ke C:\wamp\joomla dan hapus direktori instalasi seluruhnya. Sekarang pergi ke localhost/joomla dan Anda akan melihat bahwa Joomla telah diinstal dan kita siap untuk pergi dengan menginstal templat yang akan dikerjakan.

Tips 2: Memilih Kerangka Template

Akhir-akhir ini dalam frameworks template Joomla telah menjadi rave karena mereka memungkinkan Anda untuk menyelesaikan template lebih cepat dan banyak pekerjaan telah dilakukan pada template itu sendiri. Beberapa frameworks yang paling populer termasuk frameworks YooTheme Warp dan frameworks Rockettheme Gantry. Kedua frameworks ini dibangun dari bawah ke atas untuk memperbaiki keharusan menyelesaikan tugas berulang yang membosankan pada setiap templat dan mereka juga menyertakan fitur-fitur hebat seperti templat seluler bawaan dan fitur-fitur backend yang memungkinkan Anda untuk mengubah cara templat tampak tanpa bahkan memodifikasi apapun menggunakan parameter backend. Untuk sisa tips dan contoh ini, saya akan menggunakan templat YooTheme yang menggunakan framework Warp 6.

Catatan: Anda harus membeli langganan templat YooTheme untuk memanfaatkan templat di situs Anda dan memodifikasinya, tetapi sepadan dengan tambahan uang yang dihabiskan untuk menghemat banyak waktu dalam jangka panjang.

Beberapa penyedia framework dan tema meliputi:

Jangan ragu untuk melihat-lihat masing-masing situs mereka dan melihat templat mana yang paling Anda sukai dan framework mana yang akan bekerja lebih baik untuk Anda. Setiap penyedia template memiliki standar sendiri yang telah mereka tetapkan untuk framework mereka sehingga itu sesuai selera pribadi dan daftar fitur yang ingin digunakan. Karena saya telah memilih untuk melanjutkan dengan framework Warp 6 YooTheme, saya akan mulai dengan memasang templat Warp 6 di server localhost saya.

Setelah mengunduh templat, pergi ke localhost/joomla/administrator. Ketikkan "admin" untuk nama pengguna Anda dan "1234" untuk kata sandi untuk masuk ke backend. Di top bar, arahkan kursor ke extensions, lalu klik "Install/Uninstall". Pada bidang file upload package, klik "Browse" dan temukan paket templat yang Anda unduh ke komputer Anda. Sekarang klik tombol "Upload File amp; Install". Template Anda sekarang diinstal, tetapi untuk benar-benar mengaktifkannya sebagai template Anda harus menyelesaikan satu langkah lagi.

Pergi ke "Extensions" di bar bagian atas backend Joomla dan kemudian klik "Template Manager". Templat yang saya instal berjudul "yoo_nano" jadi cari templat Anda di daftar templat lalu klik tombol radio di sebelah kiri itu. Kemudian klik ikon bintang yang merupakan tombol "Default" di sudut kanan atas. Sekarang templat baru Anda disetel sebagai yang akan digunakan Joomla. Refresh beranda Anda dan Anda akan melihat perubahannya!

Tip 3: Menata Masing-masing Halaman

Ini mungkin tips paling berguna yang pernah saya pelajari di Joomla, dan ini bekerja dengan menggunakan parameter URL di alamat browser untuk menentukan gaya untuk halaman tertentu. Pertama, kita harus memasukkan kode yang menarik variabel dari URL. Di bawah ini adalah kode PHP yang diperlukan untuk menggunakan variabel yang paling umum di Joomla, seperti itemid, id, view, option, dll. Salin dan tempel kode di bawah ini ke dalam dokumen <head> Anda.

<?php
$itemid = (isset($_GET['Itemid'])) ? $_GET['Itemid'] : null;
$view = (isset($_GET['view'])) ? $_GET['view'] : null;
$catid = (isset($_GET['catid'])) ? $_GET['catid'] : null;
$task = (isset($_GET['task'])) ? $_GET['task'] : null;
$id = (isset($_GET['id'])) ? $_GET['id'] : null;
$option = (isset($_GET['option'])) ? $_GET['option'] : null;
$cid = (isset($_GET['cid'])) ? $_GET['cid'] : null;
?>

Sekarang, bagian kedua ini sebenarnya menempatkan variabel-variabel ini untuk berfungsi sebagai kelas CSS pada tag <body> sehingga Anda dapat memanfaatkannya. Salin dan tempel kode di bawah ini ke class="" elemen tubuh di template Anda.

cid-<?php echo $cid; ?> id-<?php echo $id; ?> task-<?php echo $task; ?> catid-<?php echo $catid; ?> option-<?php echo $option; ?> itemid-<?php echo $itemid; ?> view-<?php echo $view; ?> option-<?php echo $option; ?>

Hasil akhir akan terlihat seperti ini:

<body class="cid-<?php echo $cid; ?> id-<?php echo $id; ?> task-<?php echo $task; ?> catid-<?php echo $catid; ?> option-<?php echo $option; ?> itemid-<?php echo $itemid; ?> view-<?php echo $view; ?> option-<?php echo $option; ?>">

Sekarang mari kita lihat parameter URL situs Joomla. Untuk memulai, klik salah satu tautan di halaman depan yang menuju ke halaman lain di situs. Misalnya, pada halaman saya, saya mengklik "Continue Reading" seperti yang ditunjukkan di bawah ini. Beberapa tautan mungkin di-hardcode jadi cari saja tautan yang memiliki variabel yang menunjukkan bahwa mesin pencari itu tidak ramah.

Sekarang jika Anda melihat address bar browser Anda, Anda akan melihat parameter yang terkait dengan URL khusus ini seperti yang ditunjukkan di sini:

http://localhost/joomla/index.php?option=com_content&view=article&id=44:joomla-security-strike-team&catid=1:latest-news&Itemid=50

Seperti yang Anda lihat di atas, opsi untuk halaman ini adalah "com_content". Tampilan untuk halaman ini adalah "article" dan itemid untuk halaman ini adalah "50". Itemid mengacu pada item menu individual mana yang dikaitkan dengan artikel ini. Ingat, di Joomla semuanya harus memiliki itemid menu yang terkait dengannya jika tidak Anda tidak dapat menetapkan modul untuk itu. Jadi menggunakan informasi ini dari URL, informasi itu sekarang tersedia untuk digunakan melalui variabel yang dibuat di <head> dokumen.

Mari kita lihat halaman kita sekarang. Di bawah ini adalah grafik yang menunjukkan bagian mana yang ingin saya modifikasi secara eksklusif untuk halaman ini, dan tidak ada yang lain.

Cara termudah untuk mengetahui di mana kode CSS untuk kedua elemen ini adalah dengan menggunakan developer tool seperti Firebug (untuk Firefox) atau developer tool Webkit (untuk Chrome). Menggunakan Firebug, saya akan mengarahkan kursor ke elemen-elemen ini dan melihat untuk melihat di mana CSS untuk setiap elemen individu.

Seperti yang Anda lihat, kita bekerja dengan tag H1 dengan kelas "title". Katakanlah kita ingin mengubah warna teks ini menjadi merah. Melihat di sisi kanan panel Firebug saya bisa melihat bahwa ada gaya yang terkait dengan elemen ini di system.css, trebuchet.css, base.css, dll. Anda biasanya ingin menggunakan CSS templat utama untuk templat Anda untuk membuat modifikasi seperti ini sehingga untuk templat ini disebut layout.css. Untuk template Anda bisa disebut sesuatu seperti template_css. atau template.css atau bahkan base.css. Apa pun itu, masuklah ke salah satu file CSS ini dengan menavigasi ke C:\wamp\joomla\templates\[template name]\css\layout.css. (Jalur ini bisa berbeda untuk template Anda). Setelah masuk, gulir ke bawah (untuk memastikan itu adalah gaya paling spesifik dalam file ini) dan tambahkan beberapa kode seperti ini.

1	.itemid-50 #system .title {
2	color: red;
3	}

Simpan file CSS dan refresh halaman. Jika Anda melakukannya dengan benar, judulnya harus diubah pada halaman ini menjadi merah. Jika Anda menavigasi ke halaman lain meskipun Anda akan melihat itu tidak berubah pada sisanya. Jika Anda hanya mengubah gaya ini secara global, itu akan memengaruhi seluruh situs. Di bawah ini adalah hasil dari perubahan gaya tersebut:

Untuk membuat perubahan kedua pada teks "Written by", saya hanya akan menyorot elemen dengan Firebug dengan cara yang sama, mencari tahu apa nama itu dan di mana ia ditata dalam file CSS, dan kemudian menggunakan variabel PHP dari URL lagi untuk menata itu. Jadi untuk gaya "written by" hanya untuk halaman ini, saya akan membuatnya lebih besar dan mewarnainya biru.

1	.itemid-50.view-article #system .meta {
2	color: blue;
3	font-size: 15px;
4	}

Perhatikan di atas saya menggunakan kombinasi yang menarik dari variabel $itemid dan variabel $view. Anda dapat menggunakan CSS untuk menggabungkan dua kelas bersama-sama untuk membuatnya lebih spesifik. Apa yang dikatakan kode di atas adalah: Itemid harus 50 untuk halaman ini dan itu harus menjadi tampilan artikel jika tidak, CSS ini tidak berlaku. Ini memungkinkan Anda menargetkan elemen dengan lebih spesifik.

Menggunakan gagasan yang sama tetapi dengan pernyataan PHP if: Menggunakan gagasan yang sama ini, kita juga dapat menjalankan pernyataan PHP if di index.php atau template.php dari template situs Anda untuk membuat perubahan berdasarkan pada variabel URL ini. Sebagai contoh, katakanlah kita memiliki posisi modul yang diatur dengan kelas div yang disebut "slideshow". Berikut ini sebuah contoh:

1	<div class="slideshow">
2	here is my slideshow position
3	</div>

Saya hanya ingin tampilan slide ini muncul pada halaman dengan itemid 50 - tempat lain. Ini bahkan akan menimpa pengaturan yang Anda tentukan untuk modul di backend di mana Anda memberi tahu item menu yang Anda inginkan muncul. Jadi untuk melakukan ini kita bungkus pernyataan if di sekitar blok div seperti yang ditunjukkan di bawah ini:

	<?php if($itemid == '50') : ?>
		<div class="slideshow">
			here is my slideshow position
		</div>
	<?php endif; ?>

Sekarang div ini hanya muncul di Halaman ini dan akan dihapus dari kode jika kita tidak pada itemid 50. Saya menggunakan teknik-teknik ini sepanjang waktu dengan template, dan mereka sangat berguna, jadi saya sarankan mendapatkan sangat terbiasa menggunakan mereka.

Tips 4: Collapsing Module Positions

Menggunakan collapsible module positions di Joomla adalah suatu keharusan kecuali Anda ingin posisi muncul bahkan untuk modul kosong. Sebagai contoh, katakanlah Anda memiliki modul di kolom kanan situs Anda dalam div yang disebut "right_col". Pada halaman tertentu Anda tidak ingin kolom kanan muncul jika tidak ada di dalamnya. Jika Anda tidak memiliki pernyataan runtuh if di sekitar posisi modul tertentu, bahkan jika tidak ada yang diaktifkan pada halaman itu untuk posisi itu masih akan ditampilkan. Anda akan berakhir dengan kolom kanan kosong tanpa ada di dalamnya.

Untuk memastikan kolom kanan collapses saat kosong, Anda dapat menemukan posisi modul yang ada atau membuat posisi Anda sendiri. Template yang berbeda memiliki berbagai cara untuk membuat modul hitung if pernyataan (countModules adalah pernyataan collapsing if). Untuk templat Warp 6, ditulis seperti ini:

//this is the warp 6 framework style of displaying a module position and wrapping a countModules if statement around it

<?php if ($this['modules']->count('breadcrumbs')) : ?>
	<section id="breadcrumbs"><?php echo $this['modules']->render('breadcrumbs'); ?></section>
<?php endif; ?>

Tetapi untuk template lain, ini bisa lebih sederhana seperti ini: (kode di bawah ini adalah cara yang lebih umum untuk menulis countModules if pernyataan)

//this is the warp 5 framework style of displaying a module position and wrapping a countModules if statement around it

<?php if($this->countModules('right')) : ?>
		<div class="right_column">
				<jdoc:include type="yoomodules" name="right" style="yoo" />
		</div>
<?php endif; ?>

Catatan: Agar countModules berfungsi, harus ada posisi modul di antara pernyataan if sehingga dapat melihat apakah ada sesuatu yang diterbitkan di posisi itu atau tidak. Jadi misalnya, dalam kode di atas, countModules mencari untuk melihat apakah ada sesuatu yang diterbitkan pada posisi "right". Jika tidak, seluruh kelas div right_column tidak akan ditampilkan. Jika ada sesuatu yang diterbitkan dalam posisi ini, itu akan menunjukkan segalanya antara awal pernyataan if dan endif penutup.

Intinya, ini adalah konsep sederhana yang memungkinkan halaman Anda menjadi lebih dinamis, jadi jika Anda ingin halaman yang berbeda memiliki tata letak yang berbeda, inilah yang memungkinkan Anda melakukannya. Coba gabungkan countModules if pernyataan dengan tips variabel URL di atas untuk membuat template lebih fleksibel. Karena Joomla adalah sistem manajemen konten, seluruh ide di baliknya adalah dinamis dan fleksibel.

Tips 5: Masuk dalam Styling

Katakanlah Anda ingin menunjukkan elemen tertentu pada halaman hanya jika pengguna login. Ini bisa berguna jika Anda ingin orang mendaftar untuk situs Anda sebelum mereka dapat mengakses konten. Ada banyak cara yang lebih kuat untuk menggunakan kontrol akses di Joomla selain ini, tetapi sebagai cara cepat untuk mengubah sesuatu berdasarkan jika pengguna yang login di tip ini berfungsi dengan sempurna. Di bawah ini adalah kode yang Anda butuhkan:

<?php /*Add class for people who are logged in */
	$user =& JFactory::getUser();
	if($user->id){ echo "<div id=\"members\">";}else{}
?>

<?php /*Add class for people who are logged in */
	$user =& JFactory::getUser();
	if($user->id){ echo "</div>";}else{}
?>

Kedua potongan kode identik, kecuali satu membuka id anggota dan kemudian potongan kedua kode menutup div itu. Apa yang Anda lakukan adalah mengambil bagian pertama dari kode dan meletakkannya tepat di bawah tag <body> pembuka Anda. Ambil potongan kode kedua dan letakkan tepat sebelum tag </body> penutup Anda. Simpan halaman dan segarkan. Sekarang jika Anda pergi ke situs Anda, lihat firebug dan gulir melalui DOM (modul objek dokumen) di panel kiri Anda akan melihat bahwa id id "members" sekarang membungkus seluruh situs. Div ini hanya akan muncul jika orang tersebut login.

Mari kita lihat contoh sederhana apa yang dapat Anda lakukan dengan kode ini. Katakanlah karena alasan tertentu saya ingin warna header background pada halaman saya berbeda untuk pengguna terdaftar. Ini sangat mudah dilakukan sekarang karena saya dapat menggunakan id #members untuk menentukannya.

1	#members #header {
2	background:blue;
3	}

Cukup banyak yang ada di sana. Ini bisa berguna untuk mengubah background pada modul, atau posisi lain di seluruh situs Anda (untuk mencerminkan promosi atau apa pun yang dapat Anda pikirkan).

Tip 6: Modul Class Suffixes

Mungkin akan tiba saatnya ketika Anda mengembangkan template di mana Anda ingin membuat modul tertentu yang merasa tidak ada yang lain berbagi. Sebagai contoh, katakanlah Anda memiliki modul posting forum yang seseorang ingin mensponsori dan mereka ingin logo mereka di sebelah judul modul yang mengatakan "Powered by XYZ" atau sesuatu untuk efek itu. Ini dimungkinkan oleh apa yang disebut modul class suffix. Akhiran kelas modul adalah kelas tambahan yang ditambahkan melalui parameter backend dari modul itu sendiri. Sebagai contoh, pertama mari kita lihat bagaimana menambahkan modul class suffix.

Sekali lagi, frameworks yang berbeda bekerja dalam berbagai cara tetapi dalam kasus ini cara untuk menambahkan akhiran kelas modul adalah dengan meletakkan style-[apa pun suffiks yang akan terjadi]. Template lain mungkin hanya perlu -[nama suffix] tanpa gaya di depannya. Saya sarankan melihat dokumentasi framework khusus Anda untuk menjelaskan.

Pergilah ke backend instalasi Joomla localhost di localhost/joomla/administrator. Kemudian arahkan ke top bar, pergi ke "Extensions" dan kemudian klik pada Module Manager. Temukan modul spesifik yang ingin Anda kerjakan, atau bahkan buat modul baru jika Anda mau. Untuk contoh ini saya membuat modul yang disebut "Module Class Suffix" dan meletakkannya di kolom kanan template saya. Di bawah ini adalah grafik dari bagaimana halaman itu terlihat:

Perhatikan di sisi kanan ada bidang bernama "Modul class suffix" dan saya memasukkan style-water sebagai suffix saya karena ini adalah template Warp. Terapkan perubahan ini ke modul dan kemudian pergi ke frontend. Jika Anda menggunakan firebug dan mengarahkan kursor ke modul yang Anda buat, itu akan menunjukkan bahwa suffix kelas Anda sekarang menjadi kelas CSS pada modul itu sendiri.

Anda sekarang dapat menggunakan ini untuk mendesain modul sesuka Anda dan itu hanya akan mempengaruhi modul ini (atau lainnya yang Anda gunakan untuk kelas suffix modul ini). Berikut adalah contoh kode yang saya gunakan untuk membuat gaya sederhana dari modul ini:

.style-water h3.module-title {
	color: blue;
}

.style-water {
	background: #ecf9ff;
	padding: 10px;
}

Dan berikut screenshot sebelum dan sesudah perubahan:

Jika saya tidak ingin modul ini terlihat seperti ini lagi, saya hanya menghapus modul class suffix dari parameter di manajer modul dan kembali ke default. Selanjutnya kita akan melihat bagaimana memodifikasi templat modul yang sebenarnya sehingga Anda memiliki kontrol yang lebih baik untuk output dan gaya.

Tip 7: Template Modul Lebih Mudah

Sufiks kelas modul sangat bagus untuk menata masing-masing modul, tetapi apa yang terjadi ketika Anda ingin mengubah template aktual untuk modul? Setiap kali saya membuat template, salah satu hal yang ingin saya lakukan adalah membuat modul lebih mudah untuk ditata dengan membuat struktur div seperti ini:

	<div class="module_wrapper module <?php echo $style; ?>">
		<div class="module_header">
		
		</div>
		
		<div class="module_middle">
		
		</div>
		
		<div class="module_bottom">
		
		</div>
		
		<div style="clear: both;"></div>
	</div>

Ini sangat baik untuk dimiliki sebagai template modul karena Anda dapat mencapai banyak tampilan berbeda untuk sebuah modul hanya dengan tiga div ini. Mengiris dari Photoshop dan mengonversinya menjadi templat jauh lebih mudah dengan cara ini. Lihatlah tata letak modul asli dalam template yang digunakan:

Kita memiliki tag h3, tag paragraf, dan hanya itu. Tidak dapat melakukan banyak gaya pada modul ini hanya dengan dua elemen ini, jadi untuk membuatnya lebih mudah untuk gaya ini kita harus memodifikasi template modul yang sebenarnya itu sendiri. Sekali lagi, ini bervariasi per template, tetapi secara umum Anda mencari file yang sama - mereka mungkin berada di tempat yang berbeda.

Untuk templat khusus ini, saya mencari file-file ini:

[template name]\warp\layouts\modules\templates\default-1.php
[template name]\layouts\module.php

default-1.php adalah file templat modul aktual dan module.php mengontrol templat modul mana yang dikaitkan dengan posisi mana. Bagaimana saya tahu bahwa default-1.php adalah template modul yang digunakan untuk kolom kanan? Dengan menggunakan module.php saya bisa melihat template mana yang dikaitkan dengan kolom kanan oleh kode ini:

// set default module types
if ($style == '') {
	if ($module->position == 'top-a') $style = 'line';
	if ($module->position == 'top-b') $style = 'line';
	if ($module->position == 'bottom-a') $style = 'line';
	if ($module->position == 'bottom-b') $style = 'line';
	if ($module->position == 'innertop') $style = 'line';
	if ($module->position == 'innerbottom') $style = 'line';
	if ($module->position == 'sidebar-a') $style = 'line';
	if ($module->position == 'sidebar-b') $style = 'line';
}

Seperti yang Anda lihat di atas, setiap posisi modul memiliki $style yang terkait dengannya. Dalam hal ini mereka semua disebut "garis". Untuk templat ini, kolom kanan sebenarnya disebut sidebar-a jadi saya mencari sidebar-a dan menemukan bahwa $style sama dengan "line". Menggulir lebih jauh ke bawah file ini saya bisa melihat templat modul mana yang dikaitkan dengan $style "line".

switch ($style) {

	case 'line':
		$template		= 'default-1';
		$style			= 'mod-'.$style;
		$style			.= ($color) ? ' mod-line-'.$color : '';
		$split_color	= 1;
		$subtitle		= 1;
		$title_template = '<h3 class="module-title">%s</h3>';
		break;

	case 'dropdown':
		$template		= 'dropdown';
		$subtitle		= 1;
		break;

	case 'raw':
		$template		= 'raw';
		break;

	default:
		$template		= 'default-1';
		$style			= $suffix;
		$title_template = '<h3 class="module-title">%s</h3>';
}

Dalam case switch ini Anda dapat melihat case 'line' memiliki $template "default-1". Gaya modul default untuk semua posisi adalah default-1 juga, kecuali ditentukan lain. Sekarang saya tahu templat modul mana yang terkait dengan posisi modul ini, saya dapat mengeditnya sesuai kebutuhan saya.

Membuka default-1.php sekarang, kita dapat melihat kode seperti ini:

<div class="module <?php echo $style; ?> deepest">

	<?php echo $badge; ?>
	<?php if ($showtitle) echo $title; ?>
	<?php echo $content; ?>
		
</div>

Seperti yang Anda lihat, itu sangat sederhana. Tidak banyak divs di sana untuk ditata. Kita ingin menambahkan div yang saya tunjukkan di atas untuk membuat modul ini lebih mudah dikendalikan. Ubah kode di atas agar terlihat seperti ini:

	<div class="module_wrapper module <?php echo $style; ?>">
		<div class="module_header">
			<?php if ($showtitle) echo $title; ?>
		</div>
		
		<div class="module_middle">
			<?php echo $content; ?>
		</div>
		
		<div class="module_bottom">
		
		</div>
		
		<div style="clear: both;"></div>
	</div>

Saya menyingkirkan lencana karena saya tidak ingin itu muncul di template modul saya, tetapi Anda bisa menyimpannya jika Anda mau. Lencana hanyalah gaya yang telah dikaitkan template Warp dengan modul class suffixes. Sekarang kita sudah memiliki tata letak ini, jauh lebih mudah untuk menata modul. Di bawah ini adalah contoh lebih banyak fleksibilitas:

Dan ini adalah kode untuk mencapai gaya ini (saya tahu ini adalah kombinasi warna yang benar-benar jelek, tetapi mereka digunakan untuk tujuan ilustrasi:

.style-water {
	background: #ecf9ff;
	padding: 10px;
}

.style-water .module_header {
	font-size: 18px;
	font-weight: bold;
	background: blue;
	color: white;
	padding: 10px;
}

.style-water .module_header h3 {
	margin: 0;
}

.style-water .module_middle {
	background: white;
	padding: 10px;
} 

.style-water .module_bottom {	
	height: 15px;
	background: red;
}

Tip 8: Memperbaiki Bug Internet Explorer

Kita semua tahu bahwa Internet Explorer adalah kutukan keberadaan kita, jadi saya tidak dapat menyelesaikan tutorial ini tanpa menyertakan persyaratan IE dasar yang memungkinkan Anda untuk mendesain elemen pada halaman berdasarkan pada versi IE yang Anda targetkan. Ini bukan tip khusus Joomla, tapi saya akan menunjukkan kepada Anda bagaimana menerapkannya di Joomla.

Catatan: Metode ini untuk perbaikan cepat dan tidak boleh digunakan untuk memperbaiki semua bug IE. Jika Anda memiliki banyak bug yang perlu diperbaiki, Anda harus menggunakan stylesheet khusus IE yang hanya dimuat ketika orang menggunakan browser tertentu.

Cukup mudah untuk memasukkan persyaratan ini ke dalam template Joomla Anda. Memanfaatkan cara sistem manajemen konten bekerja, Anda bisa menempatkan persyaratan dalam file template utama Anda dan itu akan berfungsi di seluruh situs yang menghemat banyak waktu. Di bawah ini adalah contoh dari persyaratan IE:

1	<!--[if IE 7]>
2	<div id="ie7">
3	<![endif]-->
4
5	<!--[if IE 7]>
6	</div>
7	<![endif]-->

Seperti yang Anda lihat di atas, saya menargetkan Internet Explorer 7 dengan persyaratan ini. Anda juga dapat dengan mudah menargetkan versi IE lainnya hanya dengan mengubah 7 menjadi 6 atau 8. 8. Pasang kondisional pertama tepat di bawah tag <body> pembuka Anda dan kemudian letakkan kondisional kedua tepat di atas tag </body> penutup sama seperti dilakukan dengan anggota login bersyarat yang digunakan sebelumnya. Sekarang menggunakan CSS Anda dapat membuat perubahan kecil untuk memperbaiki bug di situs Anda. Katakanlah Anda memiliki search bar dan teks terlalu tinggi di IE7. Jika Anda mengubah CSS untuk elemen secara langsung, itu akan memengaruhi setiap browser yang merendernya dengan benar dan malah mengacaukannya. Cara yang lebih baik adalah menulis css seperti ini:

1	#ie7 .searchbar {
2	line-height: 20px;
3	}

Sekarang saya menggunakan pemilih tertentu yang membungkus seluruh halaman web untuk menargetkan hanya bug di Internet Explorer 7 dan itu tidak akan mempengaruhi browser lain yang lebih modern yang membuatnya dengan benar untuk memulai. Sekali lagi, saya tidak akan memperbaiki setiap bug untuk IE dengan cara ini karena Anda akan mengasapi style sheet utama untuk situs tersebut. Untuk perbaikan cepat, ini adalah cara mudah untuk menyelesaikan pekerjaan.

Kesimpulan

Itu saja untuk tips cepat tentang template Joomla ini! Saya harap tips ini akan berguna dengan petualangan Anda dalam desain template Joomla dan membuatnya lebih mudah bagi Anda untuk menyesuaikan situs web Anda. Terima kasih sudah membaca.