Alguma maneira de adicionar CSS para uma única página / nó?

Estou limpando minhas grandes folhas de estilo malucas (possivelmente pertinentes a uma pergunta futura) e estou me perguntando a melhor maneira de adicionar CSS personalizado a um nó ou página específico.

Em particular, a página inicial do meu site de trabalho é uma página de painel e possui vários estilos diferentes. No momento, o CSS está incluído na folha de estilo do tema principal.

Existe uma maneira de dizer "se este é o nó Foo, adicione foo.css"? É CSS Injector o que estou procurando?

Eu posso estar interessado em generalizar isso para outros nós / seções / etc, mas no momento eu só quero lidar com esse item.

O que eu acabei fazendo.

Estou usando um subtema Zen e descobri na verdade lendo o template.php que há algum código comentado para incluir folhas de estilo condicionais. O código abaixo fez exatamente o que eu precisava:

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

(Linha 80 em um arquivo Zen template.php padrão, FWIW.)

Esse é o tipo de coisa que eu faria por código, mas é porque é assim que eu rolo.

No template.php você vai querer algo como:

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

Substitua foo por valores relacionados ao seu próprio código.

Você pode dar uma olhada no módulo Código por nó . Também é destaque nesta postagem do blog .

Crie um contexto para sua página / seção e use o módulo Context Assets para carregar CSS e / ou javascript para esse contexto especificado.

Contexto:

O contexto permite gerenciar condições e reações contextuais para diferentes partes do seu site. Você pode pensar em cada contexto como representando uma "seção" do seu site. Para cada contexto, você pode escolher as condições que acionam esse contexto para estar ativo e escolher diferentes aspectos do Drupal que devem reagir a esse contexto ativo.

Pense nas condições como um conjunto de regras que são verificadas durante o carregamento da página para ver qual contexto está ativo. Quaisquer reações associadas a contextos ativos são disparadas.

Adicionar Contexto de Ativos:

Recursos de adição de contexto permitem que você faça isso. Possui uma interface fácil de usar para permitir que você faça tudo isso sem escrever nenhum código. Como ele usa ctools, tudo isso também é exportável.

Se for uma pequena quantidade de CSS, talvez considere fazer seus seletores de CSS com base no nó e incluir o css no CSS do seu tema? O Drupal 7 fornece o seletor body.page-node-NODEID e o Zen for Drupal 6 fornece classes CSS de corpo semelhantes.

Você pode criar um módulo personalizado e usar hook_preprocess_node () para carregar folhas de estilo seletivamente com base no ID do nó.

Aqui está um exemplo:

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

Substitua MYMODULE pelo nome do seu módulo e substitua MYTHEME pelo nome do tema que contém o arquivo css.

Se os critérios para os quais a adição de um estilo CSS depende de algumas propriedades de um nó, eu implementaria MYTHEME_preprocess_node(&$variables); um dos valores passados ​​para a função é $variables['node'](notar que não é $variables['#node']).

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

Se os critérios não dependem de nenhuma propriedade do nó, eu implementaria MYTHEME_preprocess_page(&$variables); $variables['node']contém um objeto de nó, se a página que está sendo mostrada for uma página de nó. No Drupal 6, a função de processo também recebe $variables['is_front'], mas no Drupal 7 a mesma variável não é passada; se você precisar saber se a página é a primeira página, use drupal_is_front_page().

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

Para uma maneira de administração baseada em fazê-lo, eu olhava para o módulo CSS . Ele adiciona um campo no qual você pode adicionar CSS às páginas node/adde node/edit.

CSS:

O módulo CSS adiciona, para usuários com permissões suficientes e nós ativados, um campo CSS na página de criação do nó.

Os usuários podem inserir regras CSS no campo Nó CSS ​​e essas regras serão analisadas na visualização do nó.

Dessa maneira, usuários experientes em CSS podem criar um design complexo baseado em CSS para o conteúdo dos nós.

Importante: observe que as permissões de edição de CSS devem ser concedidas apenas a usuários confiáveis ​​(administradores). Usuários mal-intencionados com essa permissão podem interromper o design do site e também apresentar problemas de segurança (XSS).

O CodePerNode é excelente, mas o CSS Injector é mais simples de instalar (não é necessária nenhuma biblioteca). O módulo permite que o gerenciador de conteúdo adicione CSS dinamicamente a páginas específicas, sem tocar no código PHP ou nos arquivos INFO. As instalações do 15777 não podem estar erradas - esta é uma prova social de que este módulo funciona. O CSS também é armazenado em cache com o sistema de cache regular.

Como você já está usando painéis, pode ser mais fácil adicionar seu CSS como um estilo de painel para cada região do painel da sua página inicial. Você pode definir a marcação personalizada e reutilizá-la no seu site.

Você também pode simplesmente ir para a seção Geral da regra de variante do gerenciador de páginas da sua página inicial. Há uma seção aqui para adicionar IDs e regras CSS apenas para o painel atual.

Nota: isso é tudo no D7, portanto, pode ser que essa abordagem seja mais suportada pelos painéis do que nas versões anteriores.

/ * Um exemplo usando o tema bartik para adicionar css com base no tipo de conteúdo * /

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
}

Tente adicionar isso no seu arquivo 'template.php':

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

Substitua 'mytheme' pelo nome do diretório de temas e '/css/front.css' pelo caminho onde está o seu arquivo CSS.

Para desarmar o arquivo 'front.css' de outras páginas, tente adicionar ao 'template.php':

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

Mais uma vez, substitua 'mytheme' pelo nome do diretório de temas.

Se você precisar desconfigurar 'styles.css' na primeira página, basta combinar esses dois códigos.

Vamos supor que você precise de 'front.css' sem 'styles.css' na primeira página e 'style.css' sem 'front.css' em todas as outras páginas. O código será mais ou menos assim:

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

Substitua também 'mytheme'.

Espero que isso seja útil.

Eu teria ignorado completamente o template.php e apenas acrescentado outro item no arquivo .info do seu tema

Digamos que sua folha de estilo esteja dentro css/foo.css.

É assim que o seu arquivo theme_name.info ficaria:

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

Então você se beneficia de armazená-lo em cache nas folhas de estilo principais e, como presumo que seja para a sua página inicial, faria sentido.

Além da abordagem Drupal, quando você só precisa de um pequeno pedaço de css dentro do seu corpo HTML5, tem o Atributo no escopo do css. Consulte https://stackoverflow.com/a/4607092/195812

Esta solução evita que você edite código e instale mais módulos

Você pode imprimir o nó da página na etiqueta corporal

<body page-node-26419 ...>

Então você pode restringir

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

Isso é útil para pequenas mudanças rápidas