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

79

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

epersonae
fonte
criar page--front.tpl.phpepage.tpl.php
M ama D

Respostas:

69

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.

Decifrar
fonte
então, para a página inicial, você usaria em if(drupal_is_front_page()) {vez de if(drupal_get_path_alias [etc]?
epersonae
Sim, as condições são inteiramente sua. Você poderia simplesmente fazer uma $vars['#node']->nid == $nidverificação, se quisesse.
Decipher
8
Decifre, não foi possível encontrar nenhuma falha no seu código. Mas espero que você não se importe de salientar que, a menos que você esteja falando sobre a configuração de permissão do Drupal, a maneira como você desempenha deve ser a maneira como você rola. ;-)
medden
2
Para sua informação, estou usando o Drupal 7 e descobri que precisava usar $vars['elements']['#node']->nida pesquisa de alias. Não há #noderaiz no varsDrupal 7 mais recente, pelo que parece.
23414 Wes Wes Johnson
não deveria ter função antes de MYTHEME__preprocess_node ($ vars)? Eu vejo todo o código lá apenas em termos de funções?
pal4life
16

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.

budda
fonte
Eu uso o Context Add Assets em literalmente todos os sites que faço - se você curte o Context (que direciona todas as seções das minhas compilações) Add Assets é perfeito!
electblake
13

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.

Dave Reid
fonte
isso é basicamente o que eu estava fazendo ... e são quase 200 linhas, então pareceu uma boa ideia movê-lo para outro lugar. (sim, ele provavelmente deve ser mais curto que pode ser um passo separado..)
epersonae
Por outro lado, sua resposta me inspirou a ler o template.php no meu modelo (filho Zen), o que me levou à resposta final.
precisa saber é
7

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.

Camsoft
fonte
hook_init () é executado em cada carregamento da página e, muitas vezes, várias vezes (AHAH), por que não usar hook_preprocess_node () (no tema ou em um módulo) que é executado apenas quando um nó é renderizado?
Decipher
Bom ponto, não sabia que o init foi carregado várias vezes.
Camsoft 03/03
Decifre, corrigi meu exemplo para usar a função de pré-processo. Ainda aprendendo!
Camsoft 03/03
Então a próxima pergunta seria por que usar arg (1) para o nid quando as variáveis ​​do nó são passadas através de $ vars :) O que levaria à próxima pergunta de como isso é diferente da minha resposta: p
Decifre
Acho que deveria ter lido a documentação do hook_preprocess_node (). Você está absolutamente correto. epersonae, sugiro que você aceite a resposta de Decipher.
Camsoft 03/03
7

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

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

Paul Jones
fonte
3

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.

Druvision
fonte
2

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.

Warpstone
fonte
2

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

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.

mixerowsky
fonte
O último pedaço de código é o que eu precisava. E funciona, ou seja, depois que removi as folhas de estilo [all] [] = css / front.css do meu theme.info - Acho que assumi erroneamente que precisamos ter isso junto com as folhas de estilo [all] [] = css / styles .css. Eu também estava preocupado que, porque estou substituindo page.tpl.php por page - front.tpl.php, ele pode não funcionar, mas tudo parece estar bem. Isso é realmente útil. Obrigado!
Sd1
Apenas para garantir que todos obtenham essa solução; certifique-se de remover styles.css (o padrão) e front.css do seu arquivo theme.info. Liberar todos os caches e deve ser bom ir.
Sd1 14/08/14
1

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.

Alexander Hripak
fonte
E, claro, você precisa qualificar seus seletores com base em atributos do nó, ou seja, nid, tipo de nó, etc
Alexander Hripak
O problema com esta abordagem é que irá afectar todas as páginas do site com o css adicionado aqui
pal4life
1

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

augusto
fonte
0

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

Markus Zerres
fonte
bem-vindo ao Drupal Answers! Esta resposta já foi fornecida acima por Dave Reid.
Kojo