O documento discute temas em Drupal, incluindo onde encontrar temas existentes, como criar seu próprio tema modificando um existente ou começando do zero, e ferramentas para desenvolvimento de temas. É apresentada uma visão geral dos níveis de complexidade de temas, desde iniciantes a avançados.

1. Temas em
Drupal
DrupalCamp Lisboa 2011 - 26 de Março
Catarina Clemente (cvclemente)
João Belchior (Jolidog)

2. Temas em Drupal 2 | 18
INICIADO INTERMÉDIO AVANÇADO
Sistema de camadas / Layers
O tema é o último layer
antes do utilizador ver o
site no seu browser.

3. Temas em Drupal 3 | 18
INTERMÉDIO AVANÇADO
INICIADO

4. Temas em Drupal 4 | 18
INICIADO INTERMÉDIO AVANÇADO
Onde encontrar temas
Existem cerca de 702 temas (574 Drupal 6 e 128 Drupal 7) gratuitamente
disponibilizados em http://drupal.org/project/themes
Poderá ver algumas demos em Theme Garden;
Existem Theme Shops:
Fusion Drupal Themes - http://fusiondrupalthemes.com
Adaptative Themes - http://adaptativetheme.com
....
Já tem os layouts? Contrate um themer!
Só tem uma ideia? Contrate um webdesigner/themer!
2/8

5. Temas em Drupal 5 | 18
INICIADO INTERMÉDIO AVANÇADO
Temas Contribuidos
Podem não ter o
código optimizado
ou as
funcionalidades que
servem os seus
propósitos.
São
disponibilizados
para a comunidade
gratuitamente.
Alguns têm suporte
pela estrutura
drupal.org
Alguns têm
documentação e/ou
demonstração
2/8

6. Temas em Drupal 6 | 18
INICIADO INTERMÉDIO AVANÇADO
Opções básicas de personalização
Site logo, slogan, favicon;
Esquema de cores, em temas como o Garland ou o Bartik ou outros
temas com suporte para o módulo Color.
Outras opções
Alguns temas, tais como o Acquia Slate, Acquia Marina e Acquia
Prosper permitem personalizar outros aspectos:
Posicionamento e largura de colunas;
Tipo e tamanho de fonte

7. Temas em Drupal 7 | 18
INICIADO AVANÇADO
INTERMÉDIO

8. Temas em Drupal 8 | 18
INICIADO INTERMÉDIO AVANÇADO
Crie o seu tema usando interface gráfico
Através de serviços de alojamento Drupal (por exemplo com o Drupal
Gardens da Acquia ou o Buzzr da Lullabot), pode fazer upload dos seus
elementos gráficos, escolher o layout, o esquema de cores, os elementos
de estilo da página e pode mesmo usar o seu próprio CSS.
http://drupalgardens.com
http://buzzr.com
Existem, também, aplicações Wysiwyg ou web design generators.
http://www.artisteer.com
2/8

9. Temas em Drupal 9 | 18
INICIADO INTERMÉDIO AVANÇADO
Como criar o seu tema
Uma boa forma de aprender é modificando um tema existente. Instale
um dos temas mencionados no nível anterior ou faça uma cópia de um
dos temas incluídos na diretoria "themes".
Usar um tema já existente e modificar:
Mude o nome da diretoria para o nome do seu tema
Edite os ficheiros
nome-do-tema.info;
styles.css;
scripts.js
2/8

10. Temas em Drupal 10 | 18
INICIADO INTERMÉDIO AVANÇADO
Algumas ferramentas
Web Developer (Firefox e Chrome)
http://chrispederick.com/work/web-developer/
Firebug (Firefox) e Firebug Lite ( IE6+, Firefox, Opera, Safari and Chrome)
http://getfirebug.com/
W3C Validation Service
http://www.w3.org/Status.html
2/8

11. Temas em Drupal 11 | 18
INICIADO INTERMÉDIO
AVANÇADO

12. Temas em Drupal 12 | 18
INICIADO INTERMÉDIO AVANÇADO
Temas base / Starter Themes
Permitem começar de um ponto avançado.
Muitos incluem kit inicial, resets de CSS, grelhas, settings avançados.
Zen Fusion Adaptative theme
http://drupal.org/project/zen http://drupal.org/project/fusion http://drupal.org/project/adaptivetheme
Outros em drupal.org
mothership
blueprint
zentropy
...
Genesis Omega
http://drupal.org/project/genesis http://drupal.
org/project/omega

13. Temas em Drupal 13 | 18
INICIADO INTERMÉDIO AVANÇADO
Substituir / Override de templates
Ficheiros .tpl.php
Substituir ficheiros do tema base ou do núcleo.
Usar sugestões de template para casos
pontuais.
http://drupal.org/node/1089662
Modificar funções
Usar o template.php
Usar funções theme_foobar (); como
nomedotema_foobar ();
http://drupal.org/node/173880
Criar variáveis
Usar o template.php.
criar variáveis.
Funções preprocess and process.
http://drupal.org/node/223430

14. Temas em Drupal 14 | 18
INICIADO INTERMÉDIO AVANÇADO
Gestão de layout
Panels
Um gestor de layout, com contextos, excelente integração com o views.
http://drupal.org/project/panels
Context
permite expor blocos ou outros elementos de acordo com o contexto da página em
questão. Trabalha com os módulos spaces e boxes.
http://drupal.org/project/context
DisplaySuite
Permite modificar os layouts de alguns elementos do drupal, como o node, comments,
search results, etc. Simples e uma excelente opção no D7.
http:/drupal.org/project/ds
Blockify
Expõem elementos do drupal core como blocos.
http://drupal.org/project/blockify

15. Temas em Drupal 15 | 18
INICIADO INTERMÉDIO AVANÇADO
Markup / CSS
Semantic views (integrado no Views3)
Permite modificar o markup produzido pelo views directamente no interface
gráfico.
http://drupal.org/project/semanticviews
Semantic CCK
Permite modificar o markup produzido pelo módulo CCK.
http://drupal.org/project/semantic_cck
IE CSS Optimizer (Integrado no D7)
Solução para o bug do IE6 -> 8 que não suporta mais de 31 estilos.
http://drupal.org/project/ie_css_optimizer
Conditional Stylesheets (integrado em alguns temas base)
Permite carregar ficheiros CSS exclusivos para o IE.
http://drupal.org/project/conditional_styles

16. Temas em Drupal 16 | 18
INICIADO INTERMÉDIO AVANÇADO
Markup / CSS (cont.)
@font-your-face
Integra serviços externos de fonts, Typekit, Font Squirrel, google fonts e muitos outros.
http://drupal.org/project/fontyourface
Uniform
Integra o jquery.uniform library para estilizar forms de forma coerente nos vários browsers.
http://drupal.org/project/uniform
Modernizr
Integra a biblioteca javascript modernizr, permite usar CSS3 e html5 nos browsers que
suportam.
http://drupal.org/project/modernizr
Typogrify
Aplica melhorias a nível tipográfico
http://drupal.org/project/typogrify

17. Temas em Drupal 17 | 18
INICIADO INTERMÉDIO AVANÇADO
Criar um tema de Raiz
Também é uma opção...
Mas tenham em atenção
o gráfico ao lado!

18. Temas em Drupal 18 | 18
INICIADO INTERMÉDIO AVANÇADO
OBRIGADO!
QUESTÕES?
João Belchior | jbelchior@fidibiko.com | twitter @jolidog
Catarina Clemente | geral@catarinaclemente.com | twitter @cvclemente