Adakah cara untuk menambahkan CSS untuk satu halaman / simpul?

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.)

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:

function MYTHEME_preprocess_node($vars) {
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'foo') {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/css/foo.css");
  }
}

Ganti foo dengan nilai yang terkait dengan kode Anda sendiri.

Anda bisa melihat pada modul Code per Node . Ini juga ditampilkan dalam posting blog ini .

Buat Konteks untuk halaman / bagian Anda dan kemudian gunakan modul Aset Konteks untuk memuat CSS dan / atau javascript untuk konteks yang diberikan.

Konteks:

Konteks memungkinkan Anda untuk mengelola kondisi dan reaksi kontekstual untuk berbagai bagian situs Anda. Anda dapat menganggap setiap konteks sebagai mewakili "bagian" dari situs Anda. Untuk setiap konteks, Anda dapat memilih kondisi yang memicu konteks ini menjadi aktif dan memilih berbagai aspek Drupal yang harus bereaksi terhadap konteks aktif ini.

Pikirkan kondisi sebagai seperangkat aturan yang diperiksa selama pemuatan halaman untuk melihat konteks apa yang aktif. Reaksi apa pun yang terkait dengan konteks aktif kemudian dipecat.

Konteks Tambahkan Aset:

Menambahkan aset konteks memungkinkan Anda untuk melakukan ini. Ini memiliki UI yang mudah digunakan untuk memungkinkan Anda melakukan ini semua tanpa menulis kode apa pun. Karena menggunakan ctools, semua ini juga dapat diekspor.

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.

Anda bisa membuat modul khusus dan menggunakan hook_preprocess_node () untuk memuat stylesheet secara selektif berdasarkan id node.

Ini sebuah contoh:

function MYMODULE_preprocess_node($vars) {
  $nid = 3;
  if (arg(0) == 'node' && is_numeric(arg(1)) && arg(1) == $nid) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Ganti MYMODULE dengan nama modul Anda dan ganti MYTHEME dengan nama tema yang berisi file css.

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']).

MYTHEME_preprocess_node(&$variables) {
  if ($variables['node']->nid == 3) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

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 menggunakannya drupal_is_front_page().

MYTHEME_preprocess_page(&$variables) {
  if ($variables['is_front']) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

Untuk cara admin yang melakukannya, saya akan melihat modul CSS . Itu menambahkan bidang di mana Anda dapat menambahkan CSS ke halaman node/adddan node/edit.

CSS:

Modul CSS menambahkan, untuk pengguna dengan izin yang cukup dan node yang diaktifkan, bidang CSS pada halaman pembuatan simpul.

Pengguna mungkin memasukkan aturan CSS di bidang simpul CSS dan aturan itu akan diuraikan pada tampilan simpul.

Dengan cara ini pengguna yang berpengalaman CSS dapat membuat desain berbasis CSS yang kompleks untuk konten node.

Penting: perhatikan bahwa izin pengeditan CSS harus diberikan hanya kepada pengguna tepercaya (administrator). Pengguna jahat yang memiliki izin ini dapat merusak desain situs Anda dan juga memperkenalkan masalah keamanan (XSS).

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.

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.

/ * Contoh menggunakan tema bartik untuk menambahkan css berdasarkan tipe konten * /

function bartik_preprocess_node(&$variables) {
if(!empty($variables['node'])) {
    if($variables['node']->type == 'my_custom_content_type')
    {
      drupal_add_css(drupal_get_path('theme', 'any_theme_name') . "/css/foo.css");   
    }
  }
  // Some other code here
}

Coba tambahkan ini di file 'template.php' Anda:

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
}

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':

function hook_css_alter(&$css) {
  if (!drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  }
}

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:

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
  else {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/styles.css');
  }
}

function hook_css_alter(&$css) {
  if (drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/styles.css']);
  }
  else {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  } 
}

Juga, ganti 'mitos'.

Saya berharap ini akan membantu.

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:

name = Theme Name
...
stylesheets[all][] = css/foo.css

Maka Anda mendapat manfaat dari membuatnya di-cache dengan stylesheet utama, dan karena saya menganggap ini untuk beranda Anda, itu masuk akal.

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

Anda dapat mencetak simpul halaman dalam tag-tubuh

<body page-node-26419 ...>

Maka Anda bisa membatasi

body.page-node-26419 {
    background: red
}

Ini berguna untuk perubahan cepat kecil