Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Site Builds

Memuat Template dengan Joomla: Langkah demi Langkah

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Tutorial ini akan memandumu melalui langkah-langkah yang diperlukan untuk membuat template Joomla dari awal. Kita akan membahas setiap detail terakhir; jadi mari kita mulai!

Tutorial ini adalah kutipan dari "Joomla! 1.6: A User's Guide" yang baru-baru ini dirilis, milik Pearson.


Rencana Permainan

  • Apa itu template Joomla? Fungsi apa yang dilakukan template Joomla, dan apa perbedaan antara template yang tidak memiliki konten dan template yang kontennya ditambahkan ke CMS?
  • Bagaimana proses desain localhost berbeda dari proses desain web HTML statis?
  • Apa implikasi desain tableless di Joomla, dan apa hubungan antara standar W3C, kegunaan, dan aksesibilitas?
  • File apa yang membentuk template Joomla, dan fungsi apa yang mereka lakukan?
  • Bagaimana kamu membuat tata letak tiga kolom sumber yang di pesan dengan menggunakan CSS daripada dengan tabel?
  • Apa gaya CSS dasar yang harus digunakan dengan Joomla, dan apa gaya default yang digunakan inti Joomla?
  • Bagaimana kamu menempatkan dan menata modul, dan apa sajakah teknik baru untuk membulatkan sudut?
  • Apa yang akan menjadi strategi sederhana untuk menghasilkan menu CSS yang ramping, yang itu meniru efek menu yang dikembangkan dengan JavaScript?
  • Bagaimana kamu mengontrol kapan kolom ditampilkan dan menyembunyikannya ketika tidak ada konten yang hadir?
  • Apa langkah-langkah yang tepat dalam membuat template Joomla 1.6?

Apa itu Joomla! Template?

Template Joomla adalah serangkaian file dalam CMS Joomla yang mengontrol penyajian konten

Template Joomla adalah serangkaian file dalam Joomla CMS yang mengontrol penyajian konten. Template Joomla bukan website; itu juga tidak dianggap sebagai desain website yang lengkap. Template adalah desain mendasar untuk melihat website Joomla. Untuk menghasilkan efek dari website yang "lengkap", template bekerja bersama-sama dengan konten yang disimpan dalam database Joomla.

Template ditata sedemikian rupa sehingga ketika kontenmu disisipkan, template secara otomatis mewarisi style dari stylesheet yang didefinisikan dalam template, seperti style tautan, menu, navigasi, ukuran teks, dan warna, untuk beberapa nama.

Menggunakan template untuk CMS, seperti yang dilakukan Joomla, memiliki sejumlah keunggulan:

  • Joomla melakukan semua pekerjaan untuk menempatkan konten di dalam halaman. Kamu dapat menambahkan informasi baru ke halaman blog yang ada hanya dengan mengetik artikel baru. Template dan CSS-nya memastikan itu tampak konsisten secara style dengan konten lain di situsnya.
  • Ada pemisahan yang lengkap antara konten dan presentasi, terutama ketika CSS digunakan untuk tata letak (dibandingkan dengan memiliki tabel dalam file index.php). Ini adalah salah satu kriteria utama untuk menentukan apakah suatu situs memenuhi standar web modern. Di situs yang sesuai standar, tag HTML untuk tabel dipesankan untuk menyajikan data tabular dan tidak meletakkan halaman ke dalam kolom.
  • Kamu dapat menerapkan template baru, dan karenanya tampilan yang benar-benar baru ke suatu website, secara instan. Ini dapat melibatkan lokasi yang berbeda untuk memposisikan konten dan modul, serta warna dan grafik.

Proses Desain Localhost

Halaman web yang kamu lihat di website yang didukung Joomla adalah tidak statis; hal itu dihasilkan secara dinamis dari konten yang disimpan dalam database. Ketika konten dalam basis data diubah, semua halaman yang menampilkan konten tersebut akan langsung berubah. Halaman yang kamu lihat dibuat melalui berbagai perintah PHP dalam template yang menanyakan database. Karena template terlihat seperti baris kode, bukan konten, ini menyajikan beberapa kesulitan dalam fase desain.

Tidak ada "cara yang tepat" untuk membuat halaman web.

Sudah umum sekarang untuk menggunakan editor HTML "what you see is what you get" (WYSIWYG), seperti Dreamweaver, sehingga kamu tidak perlu kode HTML. Namun, menggunakan editor semacam itu tidak dimungkinkan dalam proses desain template Joomla karena editor WYSIWYG tidak dapat menampilkan dan mengedit halaman yang dinamis. Oleh karena itu, kamu harus membuat kode template dan CSS-nya secara manual dan melihat halaman output dari PHP pada halaman yang disajikan yang sering kamu refresh ketika kamu membuat perubahan. Dengan koneksi yang cukup cepat, ini bisa menjadi server web, tetapi sebagian besar desainer menggunakan server lokal, atau localhost, di komputernya sendiri — software yang melayani halaman web di komputermu, seperti pengaturan localhost yang dijelaskan dalam Bab 2, "Mengunduh dan Memasang Joomla!"

Tidak ada "cara yang tepat" untuk membuat halaman web; bagaimana kamu melakukannya tergantung pada latar belakangmu. Mereka yang lebih condong pada grafis cenderung membuat "gambar" dari suatu halaman dalam program grafis seperti Photoshop dan kemudian memecah gambarnya sehingga dapat digunakan untuk Web (dikenal sebagai slicing dan dicing). Lebih banyak perancang berbasis teknologi sering melompat langsung ke CSS dan mulai mengodekan font, border, dan latar belakang. Namun, seperti yang baru saja disebutkan, sebagai desainer template Joomla, kamu dibatasi oleh fakta bahwa kamu tidak dapat langsung melihat efek pengkodeanmu di editor yang sama. Karena itu kamu dapat menggunakan proses desain modifikasi berikut:

  1. Miliki server localhost yang dimuat dengan konten yang berjalan di latar belakang untuk "menjalankan" Joomla.
  2. Lakukan pengeditanmu ke HTML dan CSS dengan editor dan kemudian simpan perubahanmu ke server.
  3. Lihat halaman yang dipengaruhi oleh hasil editanmu di browser web.

Opsi Server Localhost

Untuk melangkah lebih jauh pada tutorial ini, kamu harus menginstal WampServer. Jika kamu belum melakukannya, lanjutkan dan instal. Saya akan menunggu disini.

Pada server web yang dihosting, kamu dapat mengedit template HTML dan file CSS di backend saat membuka frontend di tab lain browser-mu. Saat kamu menyimpan perubahan, kamu cukup segarkan tampilan frontend untuk melihat dampaknya.

Dengan pengaturan localhost, kamu memiliki kenyamanan tambahan akses langsung ke file untuk mengeditnya dengan editor pilihanmu. Saat kamu menyimpan perubahan, tanpa harus menutup editor, kamu dapat menyegarkan tampilan frontend di browser-mu dan melihat pengaruhnya.

W3C dan Desain Tableless

Kegunaan, aksesibilitas, dan optimisasi mesin pencari (SEO) adalah semua frasa yang digunakan untuk mendeskripsikan halaman web berkualitas tinggi di Internet saat ini. Pada kenyataannya, ada sejumlah besar tumpang tindih antara kegunaan, aksesibilitas, dan SEO, dan halaman web yang menunjukkan karakteristik seseorang biasanya melakukannya untuk ketiganya. Cara termudah untuk mencapai ketiga sasaran ini adalah dengan menggunakan kerangka yang tercantum dalam standar web W3C.

Misalnya, seseorang yang memiliki penglihatan yang buruk dapat dengan mudah membaca situs yang disusun secara semantik dengan HTML melalui pembaca layar. Ini juga dapat dengan mudah dibaca oleh pengelana mesin pencari. Google secara efektif buta dalam cara membaca website; seolah-olah menggunakan pembaca layar.

Standar web menempatkan seperangkat "aturan" umum untuk semua browser web yang digunakan untuk menampilkan halaman web. Organisasi utama yang mendorong standar ini adalah W3C, yang direkturnya, Tim Berners-Lee, dikreditkan dengan menciptakan Web pada tahun 1989.

Untuk memahami dari mana standar web berasal, beberapa sejarah bermanfaat. Banyak halaman web sebenarnya dirancang untuk browser yang lebih lama. Mengapa? Browser terus berevolusi sejak World Wide Web lahir. Setiap generasi memperkenalkan fitur baru, dan produsen datang dengan hal berbeda, kadang-kadang kepemilikan, tag (nama) untuk fitur-fitur tersebut. Setiap browser cenderung memiliki sintaks yang berbeda, atau "dialek", dan permainan kata untuk menerapkan bahasa HTML dasar yang sama. Browser baru telah muncul, dan beberapa yang lama telah menghilang (ingat Netscape?).

Standar W3C saat ini berfungsi agar (semoga) mendorong produsen untuk merilis browser yang lebih kompatibel yang membaca bahasa yang sama dan menampilkan halaman lebih konsisten sehingga desainer dapat mendesain ke satu platform umum.

Faktor rumit yang lain adalah bahwa secara historis, pembuat browser lain (seperti Microsoft) cenderung memiliki browser mereka menafsirkan HTML dalam cara yang sedikit berbeda. Akibatnya, desainer web harus mendesain websitenya agar mendukung browser yang lebih lama daripada yang baru. Desainer dan pemilik situs web sering memutuskan bahwa penting bahwa halaman web muncul dengan benar di browser "peninggalan" ini. Standar W3C yang digariskan untuk kode halaman web dikembangkan untuk mencapai konsistensi. Situs yang menggabungkan standar web W3C memiliki landasan yang baik untuk menjadikan dirinya dapat diakses, digunakan, dan dioptimalkan untuk mesin pencari. Anggap ini sebagai kode bangunan untuk rumahmu: Sebuah situs web yang dibangun dengannya akan lebih kuat dan lebih aman dan bertepatan dengan harapan pengguna. Kamu dapat memeriksa halamanmu dengan layanan validasi HTML W3C (validator.w3.org). Hal ini mudah dan gratis (pastikan kamu menggunakan DOCTYPE yang benar ketika kamu mencoba memvalidasi kodemu. Pada yang paling sederhana, situs yang memenuhi validasi W3C kemungkinan juga akan menggunakan HTML semantik dan memisahkan kontennya dari presentasi dengan menggunakan CSS.

Tanyakan kepada lima desainer apa standar web, dan kamu akan mendapatkan lima jawaban yang berbeda. Tetapi kebanyakan setuju bahwa standar web didasarkan pada penggunaan kode yang valid, apakah HTML (atau yang lain), dengan cara yang ditentukan dalam versi terbaru dari standar.

Kode Semantik Yang Benar

Semantik yang benar berarti bahwa tag HTML di halaman web hanya mendeskripsikan konten, bukan presentasi

Seperti yang disebutkan sebelumnya, semantik yang benar berarti bahwa tag HTML di halaman web hanya mendeskripsikan konten, bukan presentasi. Secara khusus, ini berarti penyusunan terstruktur dari tag H1, tag H2, dan seterusnya dan menggunakan tabel hanya untuk data tabular, bukan untuk tata letak. Satu bidang di mana desainer template Joomla sedikit berkompromi agar menjadi murni semantik adalah konvensi penamaan sebagai kolom kiri dan kanan dari tata letak dua atau tiga kolom, baik kiri dan kanan, daripada sidebar atau kolom samping semantik yang lebih tepat. Jika ini hanya nama posisi yang digunakan dalam PHP template, mereka secara teknis benar. Jika mereka juga digunakan untuk mendefinisikan kelas yang cocok dalam HTML dan CSS, itu adalah kemudahan yang dapat dikompromi untuk memiliki segala yang terkait dengan menampilkan kolom kiri halaman yang bernama atau digolongkan sebagai kiri. Pada contoh yang mengikuti itu, kamu akan melihat bahwa posisi kiri ditata dengan sidebar class dan yang kanan adalah sidebar-2, yang merupakan kode semantis yang benar.

Cascading Style Sheets (CSS)

Terkait erat dengan membuat kode semantik yang benar adalah menggunakan CSS untuk mengontrol tampilan dan tata letak halaman web. CSS adalah mekanisme sederhana untuk menambahkan style/gaya (misalnya, font, warna, spasi) ke dokumen web.

CSS bersejajar dengan kode HTML dan membiarkanmu benar-benar memisahkan konten (kode) dari presentasi (CSS).

Untuk melihat ini dalam aksinya, cek CSS Zen Garden, suatu situs di mana konten HTML yang sama ditampilkan dengan cara yang berbeda dan unik, hanya dengan mengubah file CSS. Halaman yang dihasilkan terlihat sangat berbeda tetapi memiliki konten inti yang sama persis.

Mendesain situs yang didukung Joomla saat ini menghadirkan tantangan yang cukup besar dalam hal memenuhi standar validasi.

Merancang situs yang didukung Joomla saat ini menghadirkan tantangan yang cukup besar dalam hal memenuhi standar validasi. Pada rilisan seri pertama Joomla, 1.0.X, kode menggunakan sejumlah tabel yang signifikan untuk menghasilkan halaman-halamannya. Ini tidak benar-benar menggunakan CSS untuk presentasi, juga tidak menghasilkan kode semantik yang benar. Masalah ini diperparah oleh fakta bahwa banyak pengembang komponen dan modul pihak ketiga masih menggunakan tabel untuk menghasilkan tata letaknya.

Untungnya, tim pengembangan inti Joomla mengenali masalah ini dengan Joomla. Di Joomla 1.5, ada kemungkinan bagi desainer template untuk sepenuhnya menimpa output inti (disebut tampilan) dan menghapus tabel atau menyesuaikan tata letak — dengan cara apa pun yang mereka inginkan.

Perbaikan masih bisa dilakukan saat membuat template untuk memastikannya dapat diakses (misalnya, ukuran font yang dapat diskala), dapat digunakan (navigasi yang jelas), dan dioptimalkan untuk mesin pencari (sumber yang dipesan).


Membuat Template Sederhana: Langkah 1

Untuk memahami isi dari template, mari kita mulai dengan melihat template kosong Joomla.

Komponen File Template

Bagian ini meninjau proses manual pengaturan file template. Biasanya, kamu akan menginstal template menggunakan penginstal Joomla, yang menangani semua langkah ini.

Ketika membuat templatmu sendiri, kamu perlu mengatur beberapa file dan folder secara terkoordinasi. Template perlu memuat berbagai file dan folder. File-file ini harus ditempatkan di direktori /templates/ dari instalasi Joomla, masing-masing dalam folder yang ditujukan untuk template itu. Jika kamu memiliki dua template yang terpasang bernama Element dan Voodoo, direktorimu akan terlihat seperti ini:

Perhatikan bahwa nama direktori untuk template harus sama dengan nama templatenya — dalam hal ini, element dan voodoo. Nama-nama ini peka terhadap huruf besar dan tidak boleh berisi spasi.

Di dalam direktori template, ada dua file kunci:

Nama-nama dan lokasi ini harus sama persis karena ini adalah bagaimana mereka dipanggil oleh skrip inti Joomla. Yang pertama dari ini adalah file XML template.

Ini adalah file metadata format XML yang memberi tahu Joomla apa yang file lain perlukan ketika memuat halaman web yang menggunakan template ini. (Perhatikan huruf besar D.) Ini juga merinci penulis, hak cipta, dan file apa yang membentuk template (termasuk gambar apa pun yang digunakan).

Penggunaan terakhir dari file ini adalah untuk membongkar dan memasang template ketika menggunakan penginstal ekstensi di backend administrasi.

File kunci yang kedua adalah file template utama yang menghasilkan halaman, index.php.

File ini adalah yang paling penting dalam template Joomla. Ini memaparkan situs dan memberitahu Joomla CMS di mana untuk menempatkan berbagai komponen dan modul. Ini adalah kombinasi dari PHP dan HTML.

Hampir semua template menggunakan file tambahan. Ini adalah konvensional (meskipun tidak diperlukan oleh inti Joomla) untuk memberi nama dan menemukan mereka seperti yang ditunjukkan di sini untuk template yang disebut Element.

Ini hanyalah contoh. Beberapa file yang biasa ditemukan dalam template ditunjukkan di bawah ini

/element/template_thumbnail.png -- Screenshot browser web dari template (biasanya dikurangi menjadi sekitar 140 piksel lebar 90 piksel). Setelah template diinstal, ini berfungsi sebagai gambar pratinjau yang terlihat di Pengelola Template Administrasi Joomla.

/element/params.ini - Sebuah file teks yang akan menyimpan nilai dari setiap parameter yang dimiliki template.

/element/css/template.css - CSS dari template. Lokasi folder adalah opsional, tetapi kamu harus menentukan di mana itu di file index.php. Kamu dapat menyebutnya sesuai yang kamu inginkan. Biasanya, nama yang tampil yang akan digunakan, tetapi kamu akan melihat nanti bahwa ada keuntungan untuk memiliki file CSS lainnya juga.

/element/images/logo.png -- Gambar apa pun yang ada bersama template. Sekali lagi untuk alasan penyusunan, sebagian besar desainer menempatkannya dalam folder gambar. Di sini kita memiliki file gambar bernama logo.png sebagai contoh.

templateDetails.xml

File templateDetails.xml bertindak sebagai manifest, atau daftar kemasan, yang mencakup daftar semua file atau folder yang merupakan bagian dari template. Ini juga termasuk informasi seperti penulis dan hak cipta. Beberapa detail ini ditampilkan di backend administrasi di Pengelola Template. Contoh file XML yang ditunjukkan di sini:

Mari kita lihat apa arti beberapa baris ini:

  • <install version="1.6" type="template">—Isi dokumen XML adalah instruksi untuk penginstal backend. Jenis opsi type="template" memberi tahu penginstal bahwa kamu menginstal template dan itu untuk Joomla 1.6.
  • <name>960TemplateTutorialStep1 </name>— baris ini menentukan nama dari templatemu. Nama yang kamu masukkan di sini juga dapat digunakan untuk membuat direktori dalam direktori template. Oleh karena itu, seharusnya tidak mengandung karakter apa pun yang tidak dapat ditangani oleh sistem file, seperti spasi. Jika kamu menginstal secara manual, kamu perlu membuat direktori yang namanya identik dengan nama template.
  • <creationDate>—Ini adalah tanggal template dibuat. Ini adalah field form yang bebas dan dapat berupa apa pun seperti Mei 2005, 08-Juni-1978, 01/01/2004, dan seterusnya.
  • <author>—Ini adalah nama pembuat template ini—kemungkinan besar namamu.
  • <copyright>—Setiap informasi hak cipta masuk dalam elemen ini.
  • <authorEmail>—Ini adalah alamat email dimana pembuat template ini dapat dihubungi.
  • <authorUrl>—Ini adalah URL dari website pembuat.
  • <version>—Ini adalah versi dari template.
  • <files></files>—This is a list of various files used in the template. File
    yang digunakan dalam template yang ditata dengan tag <filename> dan <folder>, seperti ini:

    Bagian "File" berisi semua file generik, seperti sumber PHP untuk template atau gambar thumbnail untuk pratinjau template. Setiap file yang terdaftar di bagian ini diapit oleh tag <filename>. Kamu juga dapat menyertakan seluruh folder, seperti folder gambar, dengan menggunakan tag <folder>.

  • <positions>—Ini menunjukkan posisi modul yang tersedia dalam template. Ini adalah daftar lokasi halaman, seperti atas, kiri, dan kanan, didefinisikan dalam template di mana modul dapat diatur untuk muncul, menggunakan drop-down Posisi dari Pengelola Modul. Nama posisi dalam daftar ini harus tepat sesuai dengan kode PHP yang menghasilkan konten untuk setiap posisi yang terdaftar di dalam index.php.
  • <config>—Bagian ini menjelaskan parameter yang dapat diset di backend dan diteruskan sebagai variabel global untuk memungkinkan fungsi template tingkat lanjut, seperti mengubah skema warna dari template.

index.php

Apa yang sebenarnya dalam indeks index.php? Ini adalah kombinasi dari HTML dan PHP yang menentukan segalanya tentang tata letak dan penyajian halaman.

Mari kita lihat bagian penting untuk mencapai template yang valid: DOCTYPE di bagian atas file index.php. Ini adalah sedikit kode yang masuk di bagian atas setiap halaman web. Di bagian atas halaman kita, letakkan ini di template:

Pernyataan PHP pertama hanya menunjukkan hak cipta/lisensi dan memastikan file tidak diakses secara langsung untuk keamanan.

Halaman web DOCTYPE adalah salah satu komponen mendasar tentang bagaimana halaman web ditampilkan oleh browser—bagaimana berbagai tag HTML ditangani dan, yang lebih penting, bagaimana browser menafsirkan CSS. Pengamatan berikut dari A List Apart seharusnya menjelaskan hal-hal tersebut:

Kamu dapat menggunakan beberapa DOCTYPE. Pada dasarnya, DOCTYPE memberi tahu browser versi HTML apa yang digunakan untuk mendesain halaman, apakah itu memiliki beberapa kode peninggalan atau juga mengandung XML, dan oleh karena itu cara menafsirkan halaman.

Di sini kata-kata yang ketat dan transisi mulai mengalir di sekitar (float: left dan float: right) untuk menunjukkan apakah kode peninggalan dimasukkan. Pada dasarnya, sejak Web dimulai, browser yang berbeda memiliki tingkat dukungan yang berbeda untuk berbagai tag HTML dan versi CSS. Sebagai contoh, Internet Explorer 6 atau kurang tidak akan memahami perintah min-width untuk mengatur lebar halaman minimum. Untuk menduplikasi sebuah efek sehingga menampilkan hal yang sama di semua browser, kamu terkadang harus menggunakan "hacks" khusus browser dalam CSS yang menebus kekurangan dalam setiap kepatuhan browser terhadap standar yang dipublikasikan.

Strict berarti HTML akan ditafsirkan persis seperti yang ditentukan oleh standar. DOCTYPE transisional berarti bahwa halaman akan diizinkan beberapa perbedaan yang disepakati dari standar (misalnya, penggunaan terus-menerus dari tag yang telah dihentikan).

Untuk mempersulit hal-hal, ada sesuatu yang disebut mode "quirks". Jika DOCTYPE salah, usang, atau tidak ada, maka browser masuk ke mode quirks. Ini adalah upaya untuk kompatibel ke belakang, jadi Internet Explorer 6, misalnya, akan merender halaman seolah-olah Internet Explorer 4.

Sayangnya, orang terkadang berakhir dalam mode quirks secara tidak disengaja. Biasanya terjadi dalam dua cara:

  • Mereka menggunakan deklarasi DOCTYPE langsung dari halaman web WC3, dan tautan berakhir sebagai DTD/xhtml1-strict.dtd, yang merupakan tautan relatif di server WC3. Kamu membutuhkan jalur lengkap, seperti yang ditunjukkan sebelumnya.
  • Microsoft mengatur Internet Explorer 6 sehingga kamu bisa memiliki halaman yang valid tetapi dalam mode quirks. Ini terjadi ketika kamu memiliki pernyataan xml yang diletakkan sebelumnya, bukan setelah DOCTYPE.

Selanjutnya adalah pernyataan XML (setelah DOCTYPE):

Informasi yang saya berikan kepadamu tentang mode quirks Internet Explorer 6 adalah penting. Dalam tutorial ini, kamu hanya mendesain untuk Internet Explorer 6 dan yang lebih baru, dan kamu harus memastikan bahwa itu berjalan dalam mode standar untuk meminimalkan hacks yang harus kamu lakukan nanti.

Mari kita lihat struktur dari file index.php header; kamu menginginkannya seminimal mungkin tetapi masih cukup untuk situs produksi. Informasi header yang akan kamu gunakan adalah sebagai berikut:

Apa artinya semua ini?

Kami sudah mendiskusikan implikasi pernyataan DOCTYPE dalam file index.php. Kode <?php echo $this->language; ?< menarik bahasa dari pengaturan bahasa situs di Konfigurasi Global.

$app = Jfactory::getApplication(); adalah variabel yang memungkinkanmu untuk mengambil berbagai parameter, seperti nama situs dan menggunakannya dalam template. Baris berikutnya adalah untuk memasukkan lebih banyak informasi header: <jdoc:include type="head" />

Snipet kode ini disisipkan di halaman yang dihasilkan (yaitu, frontend-mu) semua informasi header yang diatur dalam Konfigurasi Global. Dalam instalasi default, itu termasuk tag yang ditampilkan di sini:

Sebagian besar informasi header ini dibuat secara on-the-fly, spesifik ke halaman (artikel) yang dilihat seseorang. Ini mencakup sejumlah metatag, dan setiap URL RSS-feed.

Baris terakhir di header menyediakan tautan ke file CSS untuk halaman yang dihasilkan Joomla secara umum dan juga dalam template ini:

Dua file pertama, system.css dan general.css, berisi beberapa gaya Joomla yang generik. Yang terakhir adalah semua CSS untuk template, di sini disebut template.css. Kode PHP <?php echo $this->template ?> mengembalikan nama template saat ini. Menuliskannya dengan cara ini daripada menulis jalur sebenarnya membuat kode menjadi lebih umum. Ketika kamu membuat template baru, kamu cukup menyalin baris ini (bersama dengan seluruh kode header) dan tidak perlu khawatir terkait mengedit apa pun.

CSS template dapat menyertakan sejumlah file, seperti yang bersyarat untuk berbagai browser dan untuk media yang berbeda, seperti cetak. Misalnya, kode berikut mendeteksi dan menambahkan file CSS tambahan yang menargetkan quirks Internet Explorer 6 (kita akan membiarkannya keluar dari contoh pekerjaan kita di sini):

Contoh berikut adalah bagian dari teknik untuk menggunakan parameter template. Dalam hal ini, skema warna yang dipilih sebagai parameter dalam Pengelola Template memuat file CSS yang memiliki nama yang sama dengan warna yang dipilih:

Mungkin menghasilkan ini:


Joomla! Halaman Body

Masih dalam file index.php, sekarang bagian <head> dari halaman telah diatur, kita dapat melanjutkan ke tag body. Membuat template pertamamu akan mudah! Siap?

Untuk membuat template, yang perlu kamu lakukan adalah menggunakan pernyataan Joomla yang memasukkan konten dari badan utama, ditambah modul apa pun yang kamu inginkan:

Template berisi hal berikut, dalam rangka penampil logis yang masuk akal:

  • Nama situs
  • Modul teratas
  • Modul kiri
  • Breadcrumb bar
  • Konten utama
  • Modul kanan
  • Modul footer
  • Modul debug

Pada titik ini (jika kamu melihatnya, pastikan itu adalah template default), situs tersebut tidak terlihat sangat menginspirasi.

Tutorial Image

Kamu ingin datang sedekat mungkin dengan semantik markup. Dari sudut pandang web, ini berarti halaman dapat dibaca oleh siapa saja—browser, spider, atau pembaca layar. Tata letak semantik adalah landasan aksesibilitas.

Perhatikan bahwa kamu menggunakan sejumlah perintah pertama yang spesifik untuk Joomla untuk membuat output ini:

Pernyataan echo PHP hanya menghasilkan string dari file configuration.php. Di sini, kamu menggunakan nama situs; kamu dapat dengan mudah menggunakan yang berikut ini:

Pernyataan jdoc menyisipkan berbagai jenis output HTML, baik dari modul atau komponen.

Baris ini memasukkan output dari komponen. Komponen mana yang akan ditentukan oleh item menu yang tertaut:<jdoc:include type="component" />

Baris ini memasukkan output untuk lokasi modul: <jdoc:include type="modules" name="right" />

Baris ini menghasilkan konten untuk semua modul yang posisinya diatur ke kanan. Konten yang dihasilkan untuk modul-modul tersebut ditempatkan di halaman dalam urutan yang ditetapkan di kolom Order dari Module Manager. Ini adalah sintaks lengkapnya:


Menggunakan CSS untuk Membuat Tata Letak Tableless: Tutorial Template CSS - Langkah 2

Di bagian ini, kamu akan menggunakan CSS murni untuk membuat tata letak tiga kolom untuk template Joomla. Kamu juga akan membuatnya menjadi tata letak "fixed"'. Ada tiga jenis halaman web utama layouts—fixedfluid, dan jello — dan semuanya mengacu pada bagaimana lebar halaman dikontrol.

  • Tata letak fixed memiliki lebar yang diatur ke beberapa nilai fixed.
  • Tata letak fluid yang dapat tumbuh dan menyusut ke jendela browser.
  • Tata letak jello adalah fluid tetapi antara beberapa nilai minimum dan maksimum.

Beberapa tahun yang lalu, template lebar fluid adalah semua kegilaan. Orang-orang aksesibilitas menyukainya, dan itu keren untuk mengambil sudut jendela browser-mu dan melihat semua konten yang meluncur di sekitarnya.

Tetapi sekarang, saya tidak membuat template yang fluid, tetapi fokus pada template lebar yang fixed. Saya yakin mereka adalah yang terbaik di Web hari ini. Empat tahun yang lalu, banyak yang orang masih menggunakan layar dengan lebar 800px. Titik utama lebar fluid adalah kamu bisa memiliki halaman web yang terlihat baik-baik saja pada layar 1024px, tetapi masih bisa menyusut ke layar yang lebih kecil yang masih digunakan.

Sekarang, tren di layar adalah yang sebaliknya. Orang-orang mendapatkan layar yang besar; 32% orang yang menjelajahi Joomlashack.com melakukannya dengan resolusi lebih dari 1024px.

Dengan layar besar dan tata letak dengan lebar 960px, kamu mendapatkan masalah baru—mudah dibaca. Penelitian telah menunjukkan bahwa keterbacaan pada layar menurun saat kamu melewati 960px. Jadi lebar fluid akan mengisi layar besar itu dan a) terlihat bodoh dan b) memperlambat pembacaanmu.

Desain khas mungkin menggunakan tabel untuk meletakkan halaman. Tabel berguna sebagai solusi cepat karena kamu hanya perlu mengatur lebar kolom sebagai persentase. Namun, tabel juga memiliki beberapa kelemahan. Misalnya, tabel memiliki banyak kode tambahan yang dibandingkan dengan tata letak CSS. Hal ini menyebabkan waktu muat lebih lama (yang tidak disukai peselancar) dan kinerja yang lebih buruk di mesin pencarian. Kode dapat berukuran kira-kira dua kali lipat, tidak hanya dengan markup tetapi juga dengan "spacer GIF," yang merupakan gambar transparan 1x1 yang ditempatkan di setiap sel tabel untuk menjaga agar sel-sel tidak runtuh. Bahkan perusahaan besar terkadang jatuh ke dalam perangkap tabel.

Masalah dengan Tata letak Bebasis Tabel

  • Mereka sulit untuk diurus. Untuk mengubah sesuatu, kamu harus mencari tahu apa saja semua tag tabel, seperti yang tr dan td, lakukan. Dengan CSS, hanya ada beberapa baris untuk diperiksa.
  • Konten tidak dapat dipesan sumber. Banyak peselancar web tidak melihat halaman web di browser. Mereka yang melihat dengan browser teks atau pembaca layar membaca halaman dari sudut kiri atas ke kanan bawah. Ini berarti bahwa mereka pertama melihat semuanya di kolom header dan kiri (untuk tata letak tiga kolom) sebelum mereka sampai ke kolom tengah, di mana barang-barang penting berada. Tata letak CSS, di sisi lain, memungkinkan untuk konten "sumber yang dipesan", yang berarti konten dapat disusun kembali dalam kode / sumber. Mungkin pengunjung situsmu yang paling penting adalah Google, dan menggunakan pembaca layar untuk semua maksud dan tujuan.

Ketika datang ke layout CSS, ada kecenderungan ke arah apa yang telah diciptakan framework. Idenya adalah bahwa satu set CSS yang konsisten digunakan untuk membuat tata letak, dan kemudian set itu dipertahankan untuk berbagai masalah seperti kompatibilitas browser. Untuk template ini kita akan mengadopsi sistem 960 grid yang dikembangkan oleh Nathan Smith. Ini masih tidak terlalu menarik, tapi mari kita lihat apa saja bagian-bagian yang berbeda.

Dengan sistem 960 grid, kamu hanya perlu menentukan dengan class seberapa besar kamu ingin grid dibuat. Dalam contoh ini, saya menggunakan grid 12 kolom, jadi untuk tajuk untuk berjalan di lebar penuh 960px, di index.php menggunakan:

Tutorial Image

Untuk tiga kolom, kita menambahkan grid di dalam wadah seperti ini:

Perhatikan bahwa sudah ada ruang untuk bernapas ke konten dengan jarak spasi 10px, biasa disebut gutter/talang. Ini semua otomatis dilakukan oleh framework 960 grid CSS yang cerdas, dan semua masalah browser (ya, yang kita maksud kamu, Internet Explorer) ditangani olehnya.

Kode utama untuk index.php adalah sebagai berikut:

Dalam contoh ini, saya mengganti nama file CSS ke layout.css. Dengan framework 960 grid, kita akan jarang untuk perlu menyentuh file ini dan dapat memampatkannya sebanyak mungkin. Bagian-bagian penting dari file layout.css terlihat seperti ini:

Cukup sederhana, semuanya melayang ke kiri, dan berbagai ukuran grid ditetapkan berdasarkan lebar yang diinginkan. Ini adalah grid 12 kolom, jadi, misalnya grid_6 berarti enam kolom, yang akan menjadi 460px — lebar penuhnya dikurangi padding. Tata letak sederhana ini adalah baik untuk digunakan sebagai pembelajaran tentang bagaimana menggunakan CSS dengan Joomla karena ini menunjukkan dua keuntungan dari CSS atas tata letak berbasis tabel: Ini adalah kode less, dan lebih mudah untuk diurus.

Tata letak berurutan sumber berkinerja lebih baik untuk SEO.

Namun, tata letak sederhana ini diperintahkan pada kode dalam urutan di mana kamu melihat konten di layar. Ini bukan "sumber yang dipesan" untuk menempatkan konten yang paling penting di awal sumber HTML yang dihasilkan namun masih memiliki tampilan yang sama pada layar tampilan penampil, dengan kolom kiri ditampilkan sebelumnya (yaitu, di sebelah kiri) kolom tengah .

Tata letak sumber yang dipesan berkinerja lebih baik untuk SEO daripada tata letak tempat konten penting terjadi di akhir kode. Dari perspektif situs Joomla, konten yang penting adalah yang berasal dari komponen tubuh utama. Untuk saat ini, untuk menjaga agar CSS tetap sederhana, kita akan tetap menggunakan tata letak yang dipesan oleh penampil ini, dan kita akan beralih ke tata letak sumber yang dipesan nanti di artikel. Banyak template komersial, misalnya, Joomlashack's, mengembangkan konsep sumber yang dipesan ini lebih lanjut.

Default CSS

Sejauh ini, semua CSS hanya tentang tata letak, yang membuat halaman biasa. Jadi mari kita tambahkan beberapa format, menempatkan CSS dalam file baru yang disebut typography.css. Ingat untuk menambahkannya ke file index.php!

Ketika kamu mulai mengerjakan tipografi dengan CSS, kamu harus mengatur beberapa style keseluruhan dan menyertakan pengaturan ulang global sederhana:

Tujuan dari reset global adalah untuk mengesampingkan pengaturan default yang berbeda di setiap browser dan mendapatkan titik awal yang bersih dan konsisten, terlepas dari browser mana halaman itu ditampilkan.

Semuanya diberi nol margin dan padding, dan kemudian semua elemen block-level diberi bagian bawah dan margin bawah. Ini membantu mencapai konsistensi browser. (Selector CSS pertama di atas disebut selector bintang, dan bertindak sebagai pemilih universal bahkan di Internet Explorer 6.) Kamu dapat membaca lebih lanjut tentang penyetelan ulang global di sini dan di sini.

Kamu mengatur ukuran font menjadi 76% untuk mencoba mendapatkan ukuran font yang lebih konsisten di seluruh browser. Semua ukuran font kemudian diatur dalam ems. Atur line-height: 1.3 agar membantu kemudahan bacaan. Ketika kamu mengatur font dan line height di ems, halaman lebih mudah diakses karena penampil akan dapat mengubah ukuran font untuk preferensinya sendiri, dan halaman akan direflasikan dan tetap dapat dibaca. Ini dibahas lebih lanjut di sini.

Jika kamu menambahkan beberapa warna latar belakang ke header, sidebar, dan wadah konten, kamu akan melihat sesuatu seperti apa yang ditunjukkan di bawah ini.

Tutorial Image

Perhatikan bahwa kolom samping tidak mencapai footer. Ini karena mereka hanya memperluas sejauh kontennya; di mana ruang putih di sebelah kiri dan di sebelah kanan, kolom sisi tidak ada.

Jika kamu memiliki template yang memiliki latar belakang putih untuk ketiga kolom, ini tidak masalah. Kamu akan menggunakan pendekatan ini dan akan memiliki kotak di sekitar modul. Jika kamu menginginkan kolom dengan tinggi sama yang diwarnai atau memiliki kotak, kamu harus menggunakan beberapa teknik untuk memberi ketinggian yang sama pada kolom. Salah satu solusi yang umum adalah menggunakan skrip JavaScript untuk menghitung dan mengatur ketinggian secara cepat.

Modul dalam template

Ketika sebuah modul dipanggil dalam file index.php, ada beberapa opsi untuk bagaimana ini ditampilkan. Sintaksnya adalah sebagai berikut:

Style, yang opsional, didefinisikan dalam templates/system/ html/modules.php. Saat ini, file modules.php default berisi opsi tata letak berikut: table, horz, xhtml, rounded, dan none. Mari kita melihat sekilas pada baris kode yang diperlukan untuk masing-masing opsi ini:

Modul OPTION="table" (tampilan default) ditampilkan dalam kolom. Berikut ini menunjukkan output dari Joomla jika kita menggunakan opsi "table". Perhatikan bahwa pernyataan PHP akan digantikan oleh konten yang sebenarnya:

OPTION="horz" membuat modul muncul secara horizontal. Setiap modul di-output di dalam sel pembungkus meja. Berikut ini menunjukkan output dari Joomla jika kita menggunakan opsi "horz":

OPTION="xhtml" membuat modul muncul sebagai elemen div yang sederhana, dengan judul dalam tag H3
. Hal berikut ini menunjukkan output dari Joomla jika kita menggunakan opsi "xhtml":

OPTION="rounded" membuat modul muncul dalam format yang memungkinkan, misalnya, sudut membulat yang merenggang Jika $style digunakan, nama div berubah dari moduletable ke module. Berikut ini menunjukkan output dari Joomla jika kita menggunakan opsi "rounded":

OPTION="none" membuat modul muncul sebagai output mentah yang tidak mengandung elemen dan tanpa judul.

Seperti yang kamu lihat, opsi CSS (xhtml dan rounded) jauh lebih ramping dalam kode, yang membuatnya lebih mudah untuk menata halaman web. Saya tidak menyarankan menggunakan opsi (sufiks) tabel (default) atau horz kecuali benar-benar diperlukan.

Jika kamu memeriksa file modules.php yang ditunjukkan sebelumnya, kamu akan melihat semua opsi ini yang ada untuk modul. Sangat mudah untuk menambahkan milikmu sendiri; ini adalah bagian dari kekuatan tempaan baru dari Joomla 1.6.

Untuk mengembangkan template, kamu dapat menempatkan style modul xhtml pada semua modulmu di index.php:

Mari kita hapus latar belakang dari div tata letak dan tambahkan beberapa CSS untuk memberi style pada modul dengan batas dan latar belakang untuk judul modul.

Kita menambahkan yang berikut ini ke tipografi. File CSS-mu seharusnya sekarang terlihat seperti ini:

Di sini kamu telah menambahkan aturan style khusus untuk modul yang dihasilkan dengan style="xhtml" dan karena itu dihasilkan masing-masing dengan <div> class .moduletable dan memiliki judul modul yang ditampilkan di tag <h3> di dalam <div> tersebut.

CSS tipografi yang kamu buat sekarang menghasilkan hasil yang ditunjukkan di bawah ini.

Tutorial Image

Menu dalam template

Sekali lagi, menggunakan daftar CSS daripada tabel menghasilkan pengurangan kode dan markup yang lebih mudah. Salah satu keuntungan lain menggunakan CSS untuk menu adalah banyaknya kode contoh di berbagai situs pengembang CSS. Mari kita lihat salah satunya dan lihat bagaimana itu bisa digunakan.

Halaman web di maxdesign.com memiliki pilihan lebih dari tiga puluh menu, semua menggunakan kode dasar yang sama. Ini disebut Listamatic. Ada sedikit perbedaan dalam kode yang harus kamu ubah untuk menyesuaikan menu ini dengan Joomla.

Menu-menu berdasarkan daftar ini menggunakan struktur kode umum berikut:

Ini berarti bahwa ada <div> yang disebut navcontainer, dan <ul> memiliki id navlist. Untuk menduplikasi efek ini di Joomla, kamu perlu memiliki semacam melampirkan <div>. Kamu dapat mencapai ini dengan menggunakan sufiks modul. Ingat bahwa output dari sebuah modul dengan style="xhtml" adalah sebagai berikut:

Jika kamu menambahkan sebuah modul yang disebut menu, itu akan ditambahkan ke class moduletable, seperti ini:

Jadi ketika memilih menu dari Listamatic, kamu perlu mengganti style class navcontainer di CSS dengan moduletablemenu.

Penggunaan class modul ini berguna. Hal ini memungkinkan kotak berwarna berbeda hanya dengan perubahan sederhana dari sufiks modul class.

Untuk situsmu, katakanlah bahwa kamu ingin menggunakan Daftar 10 oleh Mark Newhouse (lihat di sini). CSS-mu akan terlihat seperti ini:

Kamu perlu menambahkan menu modul sufiks (tidak ada garis bawah dalam kasus ini) ke setiap modul untuk menu yang kamu inginkan ditata menggunakan rangkaian aturan CSS ini. Ini menghasilkan menu seperti apa yang ditunjukkan di bawah ini

Tutorial Image

Menyembunyikan Kolom

Sejauh ini, kamu memiliki tata letak sedemikian rupa sehingga kamu selalu memiliki tiga kolom, terlepas dari apakah ada konten yang diposisikan di kolom tersebut. Dari perspektif template CMS, ini tidak terlalu berguna. Di situs statis, konten tidak akan pernah berubah, tetapi kamu ingin memberikan kemampuan kepada administrator situsmu untuk menempatkan konten dalam kolom apa pun, tanpa harus khawatir tentang mengedit tata letak CSS. Kamu ingin dapat mematikan kolom secara otomatis atau menutupnya jika tidak ada konten untuk ditampilkan di sana.

Joomla 1.6 menyediakan cara mudah untuk menghitung jumlah modul yang menghasilkan konten untuk posisi tertentu sehingga kamu dapat menambahkan beberapa pengujian PHP dari jumlah ini dan menyembunyikan kolom kosong atau wadah div yang tidak terpakai yang sama dan menyesuaikan tata letak yang sesuai. PHP ini jika menguji sintaks untuk modul adalah sebagai berikut:

Ada empat kondisi yang memungkinkan. Sebagai contoh, mari kita hitung jumlah modul pada Gambar 9.7. Kamu bisa memasukkan kode ini di suatu tempat di index.php:

Jadi jika kita memasukkan kode ini ke dalam template kita, kita mungkin mendapatkan hasil berikut dengan contoh konten Joomla:

  • countModules('left')—Ini mengembalikan 3 karena ada tiga modul di sebelah kiri.
  • countModules('left and right')—Ini mengembalikan 1 karena ada modul di posisi kiri dan kanan. Kedua tes itu benar (>0).
  • countModules('left or right')—Ini mengembalikan 1 karena ada modul dalam posisi kiri atau kanan. Kedua tes itu benar (>0).
  • countModules('left + right')—Ini mengembalikan 4 karena menambahkan bersama modul di posisi kiri dan kanan.

Dalam situasi ini, kamu perlu menggunakan fungsi yang memungkinkanmu untuk menghitung modul yang ada di lokasi tertentu (misalnya, kolom kanan). Jika tidak ada konten yang dipublikasikan di kolom kanan, kamu dapat menyesuaikan ukuran kolom untuk mengisi ruang itu.

Ada beberapa cara untuk melakukan ini. Kamu dapat menempatkan pernyataan kondisional di dalam body untuk tidak menampilkan konten dan kemudian memiliki gaya yang berbeda untuk konten, berdasarkan kolom apa yang ada di sana. Kita akan mengambil keuntungan dari sistem grid dan hanya melewati ukuran grid berdasarkan beberapa perhitungan.

Di header, mari kita definisikan beberapa variabel untuk memastikan mereka memiliki beberapa nilai default.

Di HTML dari template, kita dapat menggunakan variabel-variabel ini untuk mengatur class grid:

Kamu akan melihat kita menggemakan nilai-nilai colgrid dan kemudian melakukan perhitungan sederhana untuk menemukan kolom utama, seperti yang kita tahu mereka harus berjumlah 12.

Kita kemudian dapat menggunakan fungsi countModules untuk menemukan beberapa nilai. Di kepala kita, kita masukkan:

Perhatikan bahwa kita memeriksa untuk melihat apakah posisi kiri dan kanan memiliki nol modul karena kita telah menetapkan ukuran grid default ke 3. Kita juga bisa melakukan pemeriksaan ini dengan true/false daripada nilai numerik (nol) .

Kamu setengah jalan di sana, tetapi sekarang kamu telah memperluas lebar kolom tengah untuk mengakomodasi kolom samping yang kosong (akan segera disembunyikan).

Menyembunyikan Kode Modul

Saat membuat kolom yang dapat diciutkan, adalah praktik yang baik untuk menyiapkan modul agar tidak dihasilkan jika tidak ada konten di sana. Jika kamu tidak melakukan ini, halaman akan memiliki div kosong di dalamnya, yang dapat menyebabkan masalah pada lintas-browser.

Untuk tidak menghasilkan div kosong, kamu gunakan pernyataan if berikut:

Ketika kamu menggunakan kode ini, jika tidak ada yang dipublikasikan di posisi left, lalu <div id="sidebar">; juga, semua yang ada di dalamnya tidak akan dimasukkan dalam halaman yang dihasilkan.

Menggunakan teknik ini untuk kolom kiri dan kanan, file index.php mu sekarang terlihat sebagai berikut:

Template dasar yang dibuat di bagian ini menunjukkan beberapa prinsip dasar pembuatan template Joomla.

Sekarang setelah kamu memiliki dasar-dasar yang dilakukan, kamu dapat membuat template yang sedikit lebih menarik, menggunakan teknik yang telah kamu pelajari.


Membuat Joomla yang Sebenarnya! Template 1.6: 960 Tutorial Template - Langkah 3

Kamu harus mulai dengan comp. Komp, singkatan komposisi, adalah gambar atau mockup dari desain yang diusulkan yang akan menjadi dasar dari template.

Pada bagian ini, kita akan menggunakan desain oleh Dan Cedarholm dari bukunya Bulletproof Web Design. Saya sungguh-sungguh merekomendasikan buku ini, karena ini memberikan landasan luar biasa dalam beberapa teknik CSS yang berguna dalam membuat template Joomla.

Kita akan menggunakan beberapa teknik ini untuk membuat template yang sebenarnya.

Tutorial Image

Slicing dan Dicing

Langkah selanjutnya dalam proses ini adalah slicing. kamu perlu menggunakan program grafikmu untuk membuat gambar irisan kecil yang dapat digunakan dalam template. Sangat penting untuk memperhatikan bagaimana elemen dapat mengubah ukuran jika diperlukan. (Aplikasi grafis pilihan saya adalah Fire-works karena saya menemukan itu lebih cocok untuk desain web—dibandingkan dengan desain cetak—daripada Photoshop.)

Proses ini mungkin bisa mengisi seluruh buku dengan sendirinya. Untuk mendapatkan gambaran tentang cara memotong desain, kamuAnda dapat melihat folder gambar dan melihat potongannya.

Header

Gambar header memiliki gradien samar di bagian atas. Kita menempatkan gambar sebagai latar belakang yang mendatar dan kemudian menetapkan warna isian yg cocok di belakangnya. Dengan begitu, header dapat diskalakan secara vertikal jika kamu membutuhkannya (misalnya, jika font diubah ukurannya). Kamu juga perlu mengubah warna jenis apa pun menjadi putih sehingga muncul di latar belakang hitam.

Berikut adalah CSS yang harus kita tambahkan untuk mengatur style header.

Anda tidak menggunakan logo grafis di sini; Anda menggunakan teks biasa. Alasannya adalah terutama karena mesin pencari tidak dapat membaca gambar. Anda bisa melakukan beberapa pengganti gambar yang bagus, tapi aku akan meninggalkan itu sebagai latihan bagi Anda untuk melakukan Anda sendiri.

Modul Spanduk/Pesan

Kita menggunakan lokasi modul "teratas" kita dari template terakhir untuk sebuah pesan. Untuk memberinya style, kita bisa menambahkan

Header sekarang terlihat seperti yang ditunjukkan di bawah ini:

Tutorial Image

Selanjutnya, kamu perlu menerapkan teknik untuk menampilkan latar belakang di kolom samping.

Latar Belakang Kolom

Perlu diingat bahwa ketika kamu meletakkan latar belakang warna pada kolom, warna tidak meluas sampai ke footer. Hal ini karena elemen div—dalam hal ini, sidebar dan sidebar-2—hanya setinggi konten. Ini tidak tumbuh untuk mengisi elemen yang menampungnya. Ini adalah kelemahan sistem berbasis grid; kita harus menggunakan beberapa JavaScript untuk mendapatkan latar belakang di kolom samping.

Ada banyak skrip di luar sana yang menghitung tinggi kolom dan membuatnya sama. Kita akan menggunakan satu dari Dynamic Drive: http://www.dynamicdrive.com/csslayouts/equalcolumns.js.

Perhatikan bahwa kita harus mengubah kolom/elemen yang dirujuk dalam skrip agar sesuai dengan milik kita. Kita juga akan menambahkan elemen lain yang mengandung blok, "maincolbck" untuk menahan latar belakang kuning pudar untuk bagian atas konten di kolom utama.

Kode konten utama kita di index.php terlihat seperti ini:

Mari juga tempatkan latar belakang ke elemen footer sementara kita menambahkan ini. CSS yang kita tambahkan adalah:

Ini sekarang memberi kita latar belakang gradien untuk kolom kanan:

Modul yang Fleksibel

Ketika merancang modul, kamu perlu mempertimbangkan apakah mereka akan meregang secara vertikal (jika lebih banyak konten ada di dalamnya), secara horizontal, atau keduanya. Di sini kita menggunakan prinsip-prinsip desain antipeluru yang terdapat dalam buku Dan. Kita menggunakan beberapa gambar latar sederhana untuk membuat latar belakang modul yang membentang di kedua sumbu. Kita menempatkan satu latar belakang pada div yang berisi, dan yang lainnya untuk sudut berlawanan pada header h3.

Karena desain ini tidak memiliki menu horizontal, kita juga memperhatikan styling menu saat mempertimbangkan modul samping.

CSS kita akan terlihat seperti ini:

Sekarang mari fokus pada beberapa tipografi.

Tipografi

CSS untuk tipografi sangat disederhanakan dalam Joomla 1.6. Versi sebelumnya dari Joomla memiliki class yang unik untuk berbagai bagian output, seperti "contentheading". Di Joomla 1.6, output menggunakan class yang lebih dikenal seperti H1, H2 dan seterusnya, dan benar-benar tableless.

Mari style elemen-elemen ini:

Kita juga dapat menambahkan beberapa perawatan ikon berguna untuk class khusus yang dapat diterapkan pada konten:

Template yang sudah jadi harus terlihat seperti ditunjukkan di bawah ini

Tutorial Image

Rangkuman

Kutipan ini bekerja melalui empat contoh template, setiap kali meningkatkan kompleksitas dan fitur. Berikut adalah poin-poin penting yang kita ulas:

  • Situs web modern memisahkan konten dari presentasi dengan menggunakan teknologi yang dikenal sebagai Cascading Style Sheets (CSS). Di Joomla, template dan file CSS-nya mengontrol presentasi konten.
  • Saat membuat template, ada baiknya Joomla "berjalan" pada server localhost sehingga kamu dapat membuat perubahan pada tingkat file dengan editor favoritmu dan menyegarkan output halaman di browser untuk melihat dampaknya.
  • Membuat template yang valid harus berupa jalur, bukan tujuan. Idenya adalah membuat template semudah mungkin, untuk manusia dan spider, bukan untuk mendapatkan lencana untuk markup yang valid.
  • Template paling mendasar cukup memuat modul Joomla dan komponen mainbody, lebih disukai dalam urutan sumber. Tata letak dan desain adalah bagian dari CSS, bukan bagian dari template.
  • Desain web modern menggunakan CSS daripada tabel untuk memosisikan elemen. Sulit untuk belajar tetapi layak investasi. Ada banyak sumber daya (non-Joomla) yang tersedia untuk membantu.
  • Joomla secara konsisten menghasilkan elemen, ID, dan class tertentu dalam kode halaman web. Ini dapat diprediksi dan digunakan untuk melakukan style desain menggunakan CSS.
  • Output modul dapat sepenuhnya disesuaikan, atau kamu dapat menggunakan opsi output prebuilt, seperti xhtml. Semua opsi ini disebut modul chrome.
  • Sebaiknya selalu gunakan opsi daftar yang diperluas sepenuhnya untuk keluaran menu. Kamu kemudian dapat menggunakan banyak sumber daya gratis di Web untuk CSS yang akan menata dan menganimasikan menu-mu.
  • Elemen seperti kolom atau lokasi modul dapat disembunyikan (atau dirubuhkan) ketika tidak ada konten di dalamnya. Ini dilakukan dengan menggunakan pernyataan PHP bersyarat yang mengontrol apakah kode apa pun yang terkait dengan modul yang tidak digunakan dan penampungnya disertakan dalam halaman yang dihasilkan; itu juga dilakukan untuk menghubungkan ke berbagai styl CSS untuk menyesuaikan tata letak yang sesuai.
  • Membuat template Joomla pada produksi lebih merupakan masalah desain grafis dan manipulasi CSS daripada beberapa pengetahuan Joomla khusus.

Beli Bukunya

Tutorial ini adalah kutipan dari "Joomla! 1.6: A User's Guide" yang baru-baru ini dirilis, milik Pearson.


Joomla 16 A Users Guide
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.