Introdução ao Desenvolvimento de Temas para Drupal

Tamanho: px

Começar a partir da página:

Download "Introdução ao Desenvolvimento de Temas para Drupal"

Lorenzo Rodrigues Castilhos
8 Há anos
Visualizações:

1 Introdução ao Desenvolvimento de Temas para Drupal por Sheena Donnelly traduzido por Frederick van Amstel DrupalCamp Atlanta September 18, 2009

2 Parte I Introdução à camada de temas do Drupal

3 O que é um tema do Drupal? I. HTML, CSS e PHP II.arquivo.info Configurações básicas do tema III.arquivo.tpl.php Templates IV..css e.js Aparência e comportamento V.Template.php Para funções avançadas

4 Onde os temas se encontram

5 .info I. Informações básicas sobre o tema Nome Versão Drupal Theme Engine Regiões CSS files JS files

6 Regiões I. Elementos principais da página II.Os blocos são postos nas regiões III.Gera uma variável de mesmo nome no page.tpl.php IV.Use o mínimo possível de regiões para evitar problemas de performance

7 Arquivos CSS I. Declarado no.info file ou carregado por drupal_add_css() O core do Drupal organiza a cascata de arquivos CSS automaticamente Drupal comprime os arquivos CSS II. Style.css é declarado automaticamente para cada tema

8 Arquivos Javascript I. Declarado no.info ou adicionado por drupal_add_js() Drupal pode comprimir javascript para ficar mais leve II.Drupal Core inclui a biblioteca JQuery III. script.js declarado automaticamente para todos os temas

9 page.tpl.php I. template básico em HTML para todas as páginas (é como uma casca) II. III. Recebe e mostra o conteúdo dos nós, regiões e alguns módulos Requer compreensão básica de PHP para leitura e edição

10 Outros Templates I. node.tpl.php aparece na variável $content do page.tpl.php pode ser específico para um tipo de conteúdo: node-type.tpl.php II.block.tpl.php, comment.tpl.php, etc. III.Copie arquivos.tpl.php dos módulos e coloque na pasta theme para configurá-lo

11 Página de configurações do tema I. Liga/desliga certas variáveis II.Opções globais e opções customizáveis III.Envia o $site_logo e ícones favicon

12 Página de informações do site I. Identificação do site $site_name $site_slogan $mission $footer_message II.Seleciona que nó aparece na página inicial

13 Parte II Do PSD ao Page.tpl.php

14 Variáveis de página básicas I. Regiões $header, $left, $right, $content, $footer II.Variáveis de configurações do tema $site_name, $site_slogan, $logo, $primary_links, $secondary_links, $mission, $footer_message, $search_box III. Variáveis importantes do sistema $head, $head_title, $styles, $scripts, $title, $tabs, $messages, $feed_icons, $closure

15 Variáveis adicionais I. Variáveis úteis Verificar algo na página Ex. - $is_front responde se a página atual é a página inicial

16 Relacionando elementos de Design às variáveis da página I. Isole os elementos que são únicos para aquela página daqueles que são compartilhados com outras páginas II.Determine que elementos serão blocos e quais as regiões onde estarão III. Crie novas regiões no.info se necessário IV. Finalmente, formate os elementos HTML no page.tpl.php

17 Isolando os elementos no.psd

18 Isolando elementos Regiões e outras variáveis

19 Isolando elementos Blocos em regiões Arquivo PSD Administração de blocos

20 Usando variáveis no page.tpl.php

21 Parte III Ferramentas e recomendações

22 Temas populares básicos I. Zen - project/zen O melhor para começar Bem documentado Opções de layout fixo ou fluido

23 Temas prontos I. II. III. IV. V.

24 Módulos essenciais I. Admin/Development Admin Menu Devel Conditional Stylesheets II.Menu Help Menu Icons Menu Block Menu Trails Pathauto Nice Menus III. Taxonomy Taxonomy Image Taxonomy Menu IV. Images Imagecache Imagecache Crop Galleria Thickbox V. Other Block Class Dynamic Rendering

25 Referências I. drupal.org theming guide II.irc.freenode.net #drupal-themes #drupal-design #drupal-support #drupal-nc III. IV.

26 Obrigado! I. Veja mais slides e dicas aqui:

Documentos relacionados

Treinamento Plone. Unirio

Treinamento Plone. Unirio Treinamento Plone Unirio Autenticando no Site Ao abrir o site Plone, no canto superior direito você verá a aba acessar. Clique nela. Autenticando no Site Autenticando no Site Ao clicá-la, abrirá uma janela