it-swarm-eu.dev

Jakým způsobem přidat CSS pro jednu stránku / uzel?

Vyčisťuji své velké šílené styly stylů (pravděpodobně související s budoucí otázkou) a zajímalo by mě, jak nejlépe přidat vlastní CSS do konkrétního uzlu nebo stránky.

Konkrétně domovskou stránkou mého pracoviště je stránka panelu a má spoustu různých stylů. Právě teď je CSS právě součástí hlavní šablony stylů témat.

Existuje způsob, jak říct, „pokud je to uzel Foo, přidejte foo.css“? Je CSS Injector to, co hledám?

I možná mít zájem o zobecnění na jiné uzly/sekce/atd., Ale v tuto chvíli chci jen zvládnout tuto jednu položku.

Co jsem nakonec udělal.

Používám podtéma Zen a při čtení skrz template.php jsem zjistil, že existuje nějaký kódovaný komentář pro zahrnutí podmíněných stylů. Níže uvedený kód udělal přesně to, co jsem potřeboval:

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

(Řádek 80 v souboru Zen template.php, FWIW.)

79
epersonae

To je druh věcí, které bych dělal kódem, ale to proto, že to je přesně ten způsob, jak se hodím.

V template.php budete chtít něco jako:

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

Nahraďte foo hodnotami souvisejícími s vaším vlastním kódem.

69
Decipher

Můžete se podívat na modul Kód na uzel . Je také uveden v tomto blogový příspěvek .

25
rakke

Vytvořte pro svou stránku/sekci Context a poté pomocí modulu Context Assets načtěte CSS a/nebo javascript pro daný kontext.

Kontext:

Kontext vám umožňuje spravovat kontextové podmínky a reakce pro různé části vašeho webu. Můžete si představit, že každý kontext představuje „část“ vašeho webu. Pro každý kontext si můžete vybrat podmínky, které tento kontext aktivují, a vybrat různé aspekty Drupal), které by měly reagovat na tento aktivní kontext.

Představte si podmínky jako sadu pravidel, která jsou kontrolována během načítání stránky a uvidíte, jaký kontext je aktivní. Všechny reakce, které jsou spojeny s aktivním kontextem, jsou potom vyvolány.

Kontextová aktiva:

Prostředky pro přidání kontextu vám to umožňují. Má snadno použitelné uživatelské rozhraní, které vám umožní vše provést bez nutnosti psaní kódu. Protože používá ctools, vše je také exportovatelné.

16
budda

Pokud je to malé množství CSS, možná byste měli zvážit, zda by vaše selektory CSS byly založeny na uzlu a zahrnout CSS do CSS vašeho motivu? Drupal 7 poskytuje selektor body.page-node-NODEID a Zen pro Drupal 6 poskytuje podobné třídy CSS pro tělo).

13
Dave Reid

Pokud kritéria, pro které přidání stylu CSS závisí na některých vlastnostech uzlu, implementuji MYTHEME_preprocess_node(&$variables); jedna z hodnot předaných funkci je $variables['node'] (všimněte si, že to není $variables['#node']).

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

Pokud kritéria nezávisí na vlastnostech uzlu, implementoval bych MYTHEME_preprocess_page(&$variables); $variables['node'] Obsahuje objekt uzlu, pokud je zobrazovaná stránka uzlovou stránkou. V Drupal 6) procesní funkce také získá $variables['is_front'], Ale v Drupal 7 stejná proměnná není předána; pokud potřebujete vědět) Pokud je stránka přední stránka, musíte použít drupal_is_front_page().

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

Mohli byste vytvořit vlastní modul a použít hook_preprocess_node () pro selektivní načtení stylů stylů na základě id uzlu.

Zde je příklad:

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

Nahraďte MYMODULE názvem vašeho modulu a nahraďte MYTHEME názvem motivu, který obsahuje soubor css.

7
Camsoft

Pro způsob administrace, jak to udělat, bych se podíval na modul CSS . Přidá pole, kam můžete přidat [~ # ~] css [~ # ~] k node/add a node/edit stránky.

CSS:

Modul CSS přidává pro uživatele s dostatečným oprávněním a povolenými uzly pole CSS na stránce vytváření uzlů.

Uživatelé mohou vložit pravidla CSS do pole uzlu CSS a tato pravidla budou analyzována při prohlížení uzlu.

Tímto způsobem mohou uživatelé zkušení CSS vytvořit komplexní návrh CSS pro obsah uzlů.

Důležité: : Všimněte si, že oprávnění k úpravám CSS by měla být udělena pouze důvěryhodným uživatelům (správcům). Škodliví uživatelé, kteří mají toto oprávnění, by mohli narušit návrh vašich stránek a také by mohli představovat bezpečnostní problémy (XSS).

5
Paul Jones

CodePerNode je skvělý, ale CSS Injector je jednodušší instalace (nejsou potřeba žádné knihovny). Modul umožňuje správci obsahu dynamicky přidávat CSS na konkrétní stránky, aniž by se dotýkal PHP kód nebo soubory INFO vůbec. 15777 instalací nemůže být špatně - toto je sociální důkaz, že tento modul funguje). CSS je také uložen do mezipaměti pomocí běžného systému ukládání do mezipaměti.

3
Druvision

/ * Příklad použití bartikového motivu k přidání CSS na základě typu obsahu * /

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

Zkuste to přidat do souboru 'template.php':

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

Nahraďte 'mytheme' názvem vašeho adresáře motivů a '/css/front.css' cestou, kde je váš soubor CSS.

Chcete-li zrušit soubor „front.css“ z jiných stránek, zkuste přidat do „template.php“:

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

Znovu nahraďte „mytheme“ názvem vašeho adresáře témat.

Pokud potřebujete zrušit nastavení „styles.css“ z přední strany, stačí kombinovat tyto dva kódy.

Předpokládejme, že potřebujete „front.css“ bez „styles.css“ na přední stránce a „style.css“ bez „front.css“ na všech ostatních stránkách. Kód bude vypadat asi takto:

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

Nahraďte také „mýtus“.

Doufám, že to bude užitečné.

2
mixerowsky

Protože již panely používáte, může být pro každou oblast panelu domovské stránky jednodušší přidat svůj CSS jako styl panelu. Můžete zde definovat vlastní označení a znovu použít na vašem webu.

Můžete také přejít na domovskou stránku do části Obecné pravidla varianty správce stránek. Zde je sekce pro přidání ID a pravidel CSS pouze pro aktuální panel.

Poznámka: to vše je v D7, takže je možné, že tento přístup panely lépe podporují než v předchozích verzích.

2
Warpstone

Přeskočil bych dotykem template.php úplně a jen přidám další položku do souboru .info vašeho motivu

Řekněme, že vaše šablona stylů je v css/foo.css.

Takto by vypadal váš soubor theme_name.info:

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

Pak budete mít z mezipaměti hlavní stylové listy, a protože předpokládám, že je to pro vaši domovskou stránku, mělo by to smysl.

1
Alexander Hripak

Kromě přístupu Drupal), když v těle HTML5 potřebujete pouze krátkou část css, máte atribut css s rozsahem. Viz https://stackoverflow.com/a/ 4607092/195812

Toto řešení vás ušetří při úpravách kódu a instalaci dalších modulů

1
augusto

Uzel stránky můžete vytisknout ve značce body

<body page-node-26419 ...>

Pak můžete omezit

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

To je užitečné pro drobné rychlé změny

0
Markus Zerres