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:
drupal_add_css(path_to_theme() . "/foo.css", 'theme','all');
(Linha 80 em um arquivo Zen template.php padrão, FWIW.)
— epersonae
Relacionados: drupal.stackexchange.com/questions/736/...
criar page--front.tpl.phpepage.tpl.php
— M ama D
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
então, para a página inicial, você usaria em if(drupal_is_front_page()) {vez de if(drupal_get_path_alias [etc]?
Sim, as condições são inteiramente sua. Você poderia simplesmente fazer uma $vars['#node']->nid == $nidverificação, se quisesse.
— Decipher
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
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?
Você pode dar uma olhada no módulo Código por nó . Também é destaque nesta postagem do blog .
— rakke
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.
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.
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!
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
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..)
Por outro lado, sua resposta me inspirou a ler o template.php no meu modelo (filho Zen), o que me levou à resposta final.
Você pode criar um módulo personalizado e usar hook_preprocess_node () para carregar folhas de estilo seletivamente com base no ID do nó.
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
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?
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!
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.
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']).
if ($variables['node']->nid == 3) {
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) {
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.
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
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
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
/ * 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");
Tente adicionar isso no seu arquivo 'template.php':
function mytheme_preprocess_page (&$variables)
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':
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:
drupal_add_css(drupal_get_path('theme','mytheme'). '/css/styles.css');
unset($css[drupal_get_path('theme', 'mytheme') . '/css/styles.css']);
Substitua também 'mytheme'.
Espero que isso seja útil.
— mixerowsky
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
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
E, claro, você precisa qualificar seus seletores com base em atributos do nó, ou seja, nid, tipo de nó, etc
O problema com esta abordagem é que irá afectar todas as páginas do site com o css adicionado aqui
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