Artikel ini sengaja sy tulis berdasarkan
kasus-kasus yg sedang terjadi di forum ini, daripada pusing-pusing mencari inspirasi akhirnya membuat artikel untuk membantu meringankan kesulitan rekan-rekan disini.
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 daftar
Basic 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 attach agar 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
Ini adalah alamat
URL contoh views diatas
Jika sudah menguasai cara ini silakan Anda membaca dan mempraktekan
artikel ini.
Selamat menikmati ...
EmoticonEmoticon