Sebenarnya artikel ini akan diberi judul memanipulasi style views melalui custom css, biar kesannya lanjutan tentang artikel views jadinya judulnya seperti yang tertulis di artikel ini. Jika Anda mengikuti rangkaian artikel tentang dasar views yang sy tulis, seharusnya Anda sudah bisa memahami tampilan gambar dibawah ini:
1. Pertama kali Anda harus memilih beberapa field dari daftar field yakni:
- Image attach: Attached images (jika dgn Drupal 6x, Anda harus menambah modul image dan mengaktifkan sub-modul image-attach pada tipe konten Blog)
- Node: Title
- Node: Post date, ganti labelnya dgn dikirim
- User: Name, ganti labelnya dgn oleh
- Node: Teaser
2. Pada daftar Sort Criteria, Pilih field Node: Post date, dan aktifkan opsi descending.
3. Pada daftar Filters, Pilih field Node: Type = Artikel, Anda bisa memilih jenis Blog atau konten jenis lain.
Jika setting diatas dijalankan, pada situs ini akan tampak tampilan sebagai berikut:
Perhatikan gambar diatas, semua field ditampilkan sesuai urutan dengan daftar field yang dipilih. Sekarang kita sedikit mengubah setting pada posisi fieldnya, Klik link teks Row style: Fields pada daftarBasic settings, kemudian pilih opsi field dan klik settings, dan contreng field-field seperti gambar berikut dan klik update.
Seting diatas adalah pengaturan field data untuk ditampilkan secara inline (satu baris). Sekarang tampilannya menjadi seperti:
Secara data, isinya sudah sesuai dgn yg sy ingingkan, tetapi tampilannya masih kurang sreg. Sekarang kita buka file custom.css yang ada di direktori tema kita, kadangkala namanya local.css atau jika masih kurang yakin bisa menggunakan file style.css yang merupakan file standar konfigurasi css tema-tema Drupal. Kita tambahkan sedikit kode untuk memanipulasi posisi image yang diambil dari field image attachagar posisinya disebelah kiri-atas konten dan keterangan konten lainnya berada di sebelah kanannya.
#view-id-view_img_teaser-page_1 img { float: left; border: 1px solid grey; padding: 4px; margin-right: 5px; background: yellow; }
Keterangan kode:
- #view-id-view_img_teaser-page_1 , ini adalah ID layer dari views yang sy buat, ID ini mungkin berbeda tergantung dengan nama views dan jenis display yg Anda gunakan (pada contoh sy menambahkan display jenis page). Jika Anda masih gagal coba dahulu dgn menuliskan kode
img {float: left; border: 1px solid grey; padding: 4px; margin-right: 5px; },
(setingan ini akan diterapkan pada semua data image yang anda miliki, tidak spesifik pada views tertentu.)
- float : left, untuk memposisikan image agar menempel desebelah kiri area konten.
- border: 1px solid grey, membuat kotak dgn garis ketebalan 1 piksel dan warnanya abu-abu
- margin-right: 5px, menambahkan jarak antara image dengan teks sejauh 5 piksel
Catatan : untuk mendapatkan nilai #view-id-view_img_teaser-page_1 img anda bisa memanfaatkan menu inspect element pada browser Anda dengan Cursor berada diatas data image.
Sekarang tampilannya menjadi
Jika sudah menguasai cara ini silakan Anda membaca dan mempraktekan
artikel ini.
EmoticonEmoticon