it-swarm-tr.com

Tek bir sayfa / düğüm için CSS eklemenin bir yolu var mı?

Büyük çılgın tarzı sayfalarımı (muhtemelen gelecekteki bir soru ile ilgili) temizliyorum ve belirli bir düğüme veya sayfaya özel CSS eklemenin en iyi yolunu merak ediyorum.

Özellikle, çalışma sitemin ana sayfası bir Panel Sayfasıdır ve farklı stilleri vardır. Şu anda CSS sadece ana tema stil sayfasına dahil edildi.

"Bu Foo düğümü ise foo.css ekleyin" demenin bir yolu var mı? CSS Injector aradığım şey mi?

I might bunu diğer düğümlere/bölümlere/vb. Genelleştirmekle ilgileniyorum, ama şu anda sadece bu öğeyi ele almak istiyorum.

Sonunda ne yaptım.

Bir Zen alt teması kullanıyorum ve aslında koşullu stil sayfaları dahil etmek için bazı yorumlanmış kod olduğunu template.php aracılığıyla okuma keşfetti. Aşağıdaki kod tam olarak ne gerekli yaptı:

if (drupal_is_front_page()) {
  drupal_add_css(path_to_theme() . "/foo.css", 'theme','all'); 
}

(Bir stok Zen template.php dosyasındaki satır 80, FWIW.)

79
epersonae

Bu, kodla yapacağım bir şey, ama bunun nedeni sadece yuvarlanma şeklim.

Template.php içinde şöyle bir şey isteyeceksiniz:

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");
  }
}

Foo'yu kendi kodunuzla ilgili değerlerle değiştirin.

69
Decipher

Düğüm Başına Kod modülüne bakabilirsiniz. Ayrıca bu blog yazısı özellikli.

25
rakke

Sayfanız/bölümünüz için bir Bağlam oluşturun ve ardından verilen bağlam için CSS ve/veya javascript yüklemek için Bağlam Varlıkları modülünü kullanın.

Bağlam:

Bağlam, sitenizin farklı bölümleri için bağlamsal koşulları ve reaksiyonları yönetmenize olanak tanır. Her bağlamı, sitenizin bir "bölümünü" temsil ediyor olarak düşünebilirsiniz. Her bağlam için, bu bağlamın aktif olmasını tetikleyen koşulları seçebilir ve Drupal bu aktif bağlama tepki vermesi gereken farklı yönlerini seçebilirsiniz.

Koşulları, hangi bağlamın etkin olduğunu görmek için sayfa yüklenirken kontrol edilen bir dizi kural olarak düşünün. Daha sonra aktif bağlamlarla ilişkili reaksiyonlar tetiklenir.

Bağlam Varlık Ekle:

Bağlam ekleme varlıkları bunu yapmanızı sağlar. Tüm bunları herhangi bir kod yazmadan yapabilmeniz için kullanımı kolay bir kullanıcı arayüzüne sahiptir. Ctools kullandığından, bunların hepsi de dışa aktarılabilir.

16
budda

Az miktarda CSS ise, CSS seçicilerinizi düğüme göre yapmayı ve css'yi temanızın CSS'sine eklemeyi düşünebilirsiniz? Drupal 7 body.page-node-NODEID seçicisini, Zen için Drupal 6 benzer vücut CSS sınıfları sağlar.

13
Dave Reid

CSS stili eklemenin bir düğümün bazı özelliklerine bağlı olması durumunda, MYTHEME_preprocess_node(&$variables); işleve iletilen değerlerden biri $variables['node'] 'dır (bunun $variables['#node'] olmadığını fark etmek için).

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

Ölçütler herhangi bir düğüm özelliğine bağlı değilse, o zaman MYTHEME_preprocess_page(&$variables); $variables['node'], Gösterilen sayfa bir düğüm sayfasıysa, bir düğüm nesnesi içerir. Drupal 6'da, işlem işlevi de $variables['is_front'] Alır, ancak Drupal 7'de aynı değişken geçilmez; bilmeniz gerekiyorsa sayfa ön sayfaysa, drupal_is_front_page() kullanmanız gerekir.

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

Özel bir modül oluşturabilir ve düğüm sayfa kimliğine bağlı olarak stil sayfalarını seçici olarak yüklemek için hook_preprocess_node () kullanabilirsiniz.

İşte bir örnek:

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");
  }
}

MYMODULE yerine modülünüzün adını ve MYTHEME yerine css dosyasını içeren temanın adını kullanın.

7
Camsoft

Yönetici tabanlı bir yol için CSS modülüne bakardım. node/add Ve node/edit Sayfalarına [~ # ~] css [~ # ~] ekleyebileceğiniz bir alan ekler.

CSS:

CSS modülü, yeterli izinlere ve etkin düğümlere sahip kullanıcılar için, düğüm oluşturma sayfasına bir CSS alanı ekler.

Kullanıcılar CSS düğümü alanına CSS kuralları ekleyebilir ve bu kurallar düğüm görüntülemesinde ayrıştırılır.

Bu şekilde CSS deneyimli kullanıcıları düğüm içerikleri için karmaşık CSS tabanlı tasarımlar oluşturabilir.

Önemli: CSS düzenleme izinlerinin yalnızca güvenilir kullanıcılara (yöneticilere) verilmesi gerektiğini unutmayın. Bu izne sahip kötü niyetli kullanıcılar site tasarımınızı bozabilir ve ayrıca güvenlik sorunları (XSS) getirebilir.

5
Paul Jones

CodePerNode harika, ancak CSS Injector kurulumu daha basit (kitaplığa gerek yok). Modül, içerik yöneticisinin PHP kod veya INFO dosyalarına dokunmadan) belirli sayfalara dinamik olarak CSS eklemesine izin verir. 15777 yüklemeleri yanlış olamaz - bu, bu modülün çalıştığı sosyal bir kanıttır. CSS ayrıca normal önbellek sistemi ile önbelleğe alınır.

3
Druvision

/ * İçerik türüne göre css eklemek için bartik temasını kullanan bir örnek * /

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

Bunu 'template.php' dosyanıza eklemeyi deneyin:

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

'Mytheme' yerine tema dizininizin adını ve '/css/front.css' ifadesini CSS dosyanızın bulunduğu yolla değiştirin.

'Front.css' dosyasını diğer sayfalardan kaldırmak için 'template.php' dosyasına eklemeyi deneyin:

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

Yine, 'efsaneyi' tema dizininizin adıyla değiştirin.

'Styles.css' öğesinin ön sayfadan ayarını kaldırmanız gerekiyorsa, bu iki kodu birleştirmeniz yeterlidir.

Ön sayfada 'styles.css' olmadan 'front.css' ve diğer tüm sayfalarda 'front.css' olmadan 'style.css' gerektiğini varsayalım. Kod şöyle görünecektir:

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']);
  } 
}

Ayrıca, 'efsaneyi' değiştirin.

Umuyorum ki faydalı olacaktır.

2
mixerowsky

Zaten Paneller kullandığınız için, CSS'nizi ana sayfa panelinizin her bölgesi için Panel Stili olarak eklemek daha kolay olabilir. Burada özel işaretleme tanımlayabilir ve sitenizde yeniden kullanabilirsiniz.

Ana sayfanız için sayfa yöneticisi varyant kuralının Genel bölümüne de gidebilirsiniz. Burada sadece geçerli panel için CSS kimlikleri ve kuralları eklemek için bir bölüm var.

Not: bunların hepsi D7'de, bu nedenle bu yaklaşım Paneller tarafından önceki sürümlerde olduğundan daha iyi destekleniyor olabilir.

2
Warpstone

Template.php'ye tamamen dokunarak atladım ve temanızın .info dosyasına başka bir öğe eklerdim

Stil sayfanızın css/foo.css.

Theme_name.info dosyanız şöyle görünür:

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

O zaman ana stil sayfaları ile önbelleğe alınmasından faydalanırsınız ve bunun ana sayfanız için olduğunu varsaydığım için mantıklı olacaktır.

1

Drupal yaklaşımının yanı sıra, HTML5 gövgenizin içinde yalnızca kısa bir css parçasına ihtiyacınız olduğunda, css kapsamlı bir Özniteliğe sahip olursunuz. Bakınız https://stackoverflow.com/a/ 4607092/195812

Bu çözüm sizi kod düzenlemekten ve daha fazla modül yüklemekten kurtaracak

1
augusto

Sayfa düğümünü gövde etiketinde yazdırabilirsiniz

<body page-node-26419 ...>

Sonra kısıtlayabilirsiniz

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

Bu, küçük hızlı değişiklikler için kullanışlıdır

0
Markus Zerres