Saya sedang membersihkan style sheet besar saya yang gila (mungkin berhubungan dengan pertanyaan di masa depan) dan saya bertanya-tanya cara terbaik untuk menambahkan CSS khusus ke node atau halaman tertentu.
Secara khusus, beranda situs kerja saya adalah Halaman Panel dan memiliki banyak gaya berbeda. Saat ini CSS hanya disertakan dengan lembar gaya tema utama.
Apakah ada cara untuk mengatakan, "jika ini simpul Foo, lalu tambahkan foo.css"? Apakah CSS Injector yang saya cari?
Saya mungkin tertarik untuk menggeneralisasi ini ke node lain / bagian / etc, tetapi saat ini saya hanya ingin menangani item yang satu ini.
Apa yang akhirnya saya lakukan.
Saya menggunakan subtitle Zen, dan ternyata benar-benar membaca template.php bahwa ada beberapa kode yang dikomentari untuk menyertakan style sheet bersyarat. Kode di bawah ini melakukan apa yang saya butuhkan:
if (drupal_is_front_page()) {
drupal_add_css(path_to_theme() . "/foo.css", 'theme','all');
}
(Baris 80 di file stok template.php Zen, FWIW.)
page--front.tpl.php
danpage.tpl.php
Jawaban:
Ini adalah jenis hal yang akan saya lakukan dengan kode, tetapi itu karena itulah cara saya melakukan roll.
Di template.php Anda akan menginginkan sesuatu seperti:
Ganti foo dengan nilai yang terkait dengan kode Anda sendiri.
sumber
if(drupal_is_front_page()) {
bukanif(drupal_get_path_alias [etc]
?$vars['#node']->nid == $nid
pemeriksaan jika Anda mau.$vars['elements']['#node']->nid
sebagai gantinya di pencarian alias. Tidak ada#node
root divars
dalam Drupal 7 terbaru dari tampilannya.Anda bisa melihat pada modul Code per Node . Ini juga ditampilkan dalam posting blog ini .
sumber
Buat Konteks untuk halaman / bagian Anda dan kemudian gunakan modul Aset Konteks untuk memuat CSS dan / atau javascript untuk konteks yang diberikan.
Konteks:
Konteks Tambahkan Aset:
sumber
Jika itu adalah sejumlah kecil CSS, mungkin mempertimbangkan untuk membuat pemilih CSS Anda berdasarkan node dan termasuk css di CSS tema Anda? Drupal 7 menyediakan pemilih body.page-node-NODEID, dan Zen untuk Drupal 6 menyediakan kelas-kelas CSS tubuh yang serupa.
sumber
Anda bisa membuat modul khusus dan menggunakan hook_preprocess_node () untuk memuat stylesheet secara selektif berdasarkan id node.
Ini sebuah contoh:
Ganti MYMODULE dengan nama modul Anda dan ganti MYTHEME dengan nama tema yang berisi file css.
sumber
Jika kriteria yang menambahkan gaya CSS tergantung dari beberapa properti node, maka saya akan menerapkan
MYTHEME_preprocess_node(&$variables)
; salah satu nilai yang diteruskan ke fungsi adalah$variables['node']
(untuk memperhatikan itu tidak$variables['#node']
).Jika kriteria tidak tergantung dari properti node, maka saya akan menerapkan
MYTHEME_preprocess_page(&$variables)
;$variables['node']
berisi objek simpul, jika halaman yang ditampilkan adalah halaman simpul. Dalam Drupal 6, fungsi proses juga mendapat$variables['is_front']
, tetapi dalam Drupal 7 variabel yang sama tidak lulus; jika Anda perlu tahu apakah halaman tersebut adalah halaman depan, Anda perlu menggunakannyadrupal_is_front_page()
.sumber
Untuk cara admin yang melakukannya, saya akan melihat modul CSS . Itu menambahkan bidang di mana Anda dapat menambahkan CSS ke halaman
node/add
dannode/edit
.CSS:
sumber
CodePerNode bagus, tetapi CSS Injector lebih mudah dipasang (tidak perlu pustaka). Modul ini memungkinkan manajer konten untuk secara dinamis menambahkan CSS ke halaman tertentu, tanpa menyentuh kode PHP atau file INFO sama sekali. 15777 pemasangan tidak dapat salah - ini adalah bukti sosial modul ini berfungsi. CSS juga di-cache dengan sistem caching biasa.
sumber
Karena Anda sudah menggunakan Panel, mungkin lebih mudah untuk hanya menambahkan CSS Anda sebagai Gaya Panel untuk setiap wilayah panel beranda Anda. Anda dapat menentukan markup kustom di sana dan menggunakannya kembali di situs Anda.
Anda juga bisa langsung ke bagian Umum dari aturan varian pengelola halaman untuk beranda Anda. Ada bagian di sini untuk menambahkan ID CSS dan aturan hanya untuk panel saat ini.
Catatan: ini semua ada di D7, jadi mungkin pendekatan ini lebih baik didukung oleh Panel daripada di versi sebelumnya.
sumber
/ * Contoh menggunakan tema bartik untuk menambahkan css berdasarkan tipe konten * /
sumber
Coba tambahkan ini di file 'template.php' Anda:
Ganti 'mytheme' dengan nama direktori tema Anda dan '/css/front.css' dengan path di mana file CSS Anda.
Untuk menghapus file 'front.css' dari halaman lain, coba tambahkan ke 'template.php':
Sekali lagi, ganti 'mitos' dengan nama direktori tema Anda.
Jika Anda perlu menghapus 'styles.css' dari halaman depan cukup gabungkan kedua kode ini.
Mari kita asumsikan bahwa Anda memerlukan 'front.css' tanpa 'styles.css' di halaman depan, dan 'style.css' tanpa 'front.css' di semua halaman lainnya. Kode akan terlihat seperti ini:
Juga, ganti 'mitos'.
Saya berharap ini akan membantu.
sumber
Saya akan melewatkan menyentuh template.php sama sekali dan hanya menambahkan item lain di file .info tema Anda
Katakanlah stylesheet Anda ada
css/foo.css
.Ini adalah tampilan file theme_name.info Anda:
Maka Anda mendapat manfaat dari membuatnya di-cache dengan stylesheet utama, dan karena saya menganggap ini untuk beranda Anda, itu masuk akal.
sumber
Selain pendekatan Drupal, ketika Anda hanya membutuhkan sepotong css pendek di dalam tubuh HTML5 Anda, Anda memiliki Atribut css scoped. Lihat https://stackoverflow.com/a/4607092/195812
Solusi ini akan menyelamatkan Anda dari mengedit kode dan memasang lebih banyak modul
sumber
Anda dapat mencetak simpul halaman dalam tag-tubuh
Maka Anda bisa membatasi
Ini berguna untuk perubahan cepat kecil
sumber