it-swarm-id.com

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 Injector CSS apa yang saya cari?

Saya mungkin tertarik untuk menggeneralisasi ini ke node/bagian lain/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.)

79
epersonae

Ini adalah hal yang saya lakukan berdasarkan 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.

69
Decipher

Anda dapat melihat pada modul Kode per Node . Ini juga ditampilkan dalam posting blog ini .

25
rakke

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 akan 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 Tambah 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.

16
budda

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.

13
Dave Reid

Jika kriteria yang menambahkan gaya CSS tergantung dari beberapa properti node, maka saya akan mengimplementasikan MYTHEME_preprocess_node(&$variables); salah satu nilai yang diteruskan ke fungsi adalah $variables['node'] (untuk memperhatikan itu bukan $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 apa pun, maka saya akan mengimplementasikan 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 dilewati; jika Anda perlu tahu jika halaman tersebut adalah halaman depan, Anda perlu menggunakan drupal_is_front_page().

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

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.

7
Camsoft

Untuk cara admin yang melakukannya, saya akan melihat modul CSS . Itu menambahkan bidang di mana Anda dapat menambahkan [~ # ~] css [~ # ~] ke node/add dan node/edit halaman.

CSS:

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

Pengguna dapat memasukkan aturan CSS di bidang simpul CSS dan aturan-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 hanya diberikan kepada pengguna tepercaya (administrator). Pengguna jahat yang memiliki izin ini dapat merusak desain situs Anda dan juga memperkenalkan masalah keamanan (XSS).

5
Paul Jones

CodePerNode hebat, tapi CSS Injector lebih mudah dipasang (tidak perlu perpustakaan). Modul ini memungkinkan manajer konten untuk secara dinamis menambahkan CSS ke halaman tertentu, tanpa menyentuh PHP kode 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.

3
Druvision

/ * 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
}
2
tal

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.

2
mixerowsky

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.

2
Warpstone

Saya akan melewatkan menyentuh template.php sama sekali dan hanya menambahkan item lain di file .info tema Anda

Katakanlah stylesheet Anda ada di css/foo.css.

Ini adalah tampilan file theme_name.info Anda:

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

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

1

Selain pendekatan Drupal, ketika Anda hanya membutuhkan sepotong css pendek di dalam tubuh HTML5 Anda, Anda memiliki Atribut scoped css. Lihat https://stackoverflow.com/a/ 4607092/195812

Solusi ini akan menyelamatkan Anda dari mengedit kode dan memasang lebih banyak modul

1
augusto

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

0
Markus Zerres