Merubah Gaya CSS untuk block tertentu di Drupal

Mayoritas block dalam satu region di drupal, memiliki gaya (style) yang sama. Bagaimana jika hendak merubah gaya untuk tampilan block tertentu saja?

Ternyata setiap block di Drupal memiliki identitas yang unik, sehingga tinggal menambahkan baris CSS untuk block tertentu tersebut, sudah dapat merubah tampilan sesuai keinginan user yang kadang mintanya arbitrarily navel itself (sak penak udele dewe).

ID Block memiliki format penamaan : block-jenis-identitas.

Cara mengetahui ID dari block tertentu yang paling sederhana adalah menggunakn firebug, untuk para developer web pasti sudah terbiasa menggunakan alat ini.

mengetahui ID BLOCK dengan firebug

Langkah-langkah setelah firebug diaktifkan:

  1. Tekan tombol pengaktifan hover. Agar ketika mouse melintasi objek pada web, firebug langsung mengarahkan pada format objek tersebut.
  2. Arahkan mouse pada block yang ingin diketahui id blocknya.
  3. Saksikan hasil yang ditinjuk oleh firebug (dalam gambar tertulis id block-nya adalah block-block-3 yang artinya block dengan type block dengan nomer identitas 3.

Untuk ID Block model lain contohnya adalah sebagai berikut:

  • Block yang terbuat dari views dan tidak di setting, dibiarkan apa adanya:
    Block dari Views tanpa setting
    ID Block dari block seperti pada gambar diatas adalah : block-views-ccbd0fea46d937d2a9ec888017442cea
     
  • Block yang terbuat dari views dan nama block yang sudah ditentukan.
    ID Block dari views yang namanya sudah ditentukan
    ID Block dari block seperti pada gambar diatas adalah : block-views-suratmasuk-block-daftarundangan.
     
  • Block yang terbuat dari calendar.
    Block Dari Calendar
    ID Block dari block seperti pada gambar diatas adalah : block-views-agenda-block-1.

Setelah diketahui ID Block-nya, tinggal tambahkan kode css sontohnya sebagai berikut:

{syntaxhighlighter class="SYNTAXHIGHLIGHTER-OPTIONS" [title="title"]}#block-views-ccbd0fea46d937d2a9ec888017442cea {
background-color: yellow;
}{/syntaxhighlighter}

Selesai.

Add new comment

CAPTCHA
mari kita ingat kembali masa-masa di TK dulu...
Target Image
By submitting this form, you accept the Mollom privacy policy.