Temas para Drupal 7

Uma visão geral sobre a flexibilidade

da camada de visualização do Drupal 7

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Thiago Régis
@tregismoreira

@FisquaDigital

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 O que é Drupal?

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 É um sistema gerenciador de conteúdo
(SGC ou CMS)

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 É uma plataforma livre, de código aberto,
para a criação de sites e aplicativos web.

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 É a melhor plataforma para a criação de sites
e aplicativos web!

Saiba mais sobre o Drupal:

http://oqueedrupal.drupalgardens.com/

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 O que é um
Tema no Drupal?

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 É um conjunto de arquivos que define a
camada de aparência do site.

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Camada de Aparência???

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Dados
(conteúdos, comentários etc)

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Módulos

Dados
(conteúdos, comentários etc)

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Blocos

Módulos

Dados
(conteúdos, comentários etc)

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Permissões de acesso

Blocos

Módulos

Dados
(conteúdos, comentários etc)

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Aparência

Permissões de acesso

Blocos

Módulos

Dados
(conteúdos, comentários etc)

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Algumas características
de um Tema

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 É independente das configurações.

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Não carrega dados. Apenas variáveis.
(Pelo menos é como deveria ser...)

r
$va

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 É portável.
(Desde que o Drupal seja da mesma versão)

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 (Drupaint)

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Temas gratuitos

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Marinelli Danland BlueMasters
Demo: migre.me/akFrG Demo: migre.me/akFxe Demo: migre.me/akFAH
Download: migre.me/akFsz Download: migre.me/akFwd Download: migre.me/akFsz

Outros temas gratuitos

http://drupal.org/project/themes

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 E o que eu preciso para
criar o próprio Tema?

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # Pleno domínio de HTML e CSS

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # Pleno domínio de HTML e CSS

# Recomendado ter conhecimento de JS e PHP

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # Pleno domínio de HTML e CSS

# Recomendado ter conhecimento de JS e PHP

# Utilizar um editor de códigos (qualquer)

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # Pleno domínio de HTML e CSS

# Recomendado ter conhecimento de JS e PHP

# Utilizar um editor de códigos (qualquer)

# Gostar de trabalhar com front-end :)

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Processo de criação
de um Tema

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
Por Thiago Régis (@tregismoreira)
Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
Por Thiago Régis (@tregismoreira)
Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
Por Thiago Régis (@tregismoreira)
Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
Por Thiago Régis (@tregismoreira)
Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Estrutura básica
de um Tema

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 purpledrop

assets (css, images, js)

templates

purpledrop.info (obrigatório)

screenshot.png

logo.png

template.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 purpledrop

assets (css, images, js)

templates

purpledrop.info (obrigatório)

screenshot.png

logo.png

template.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 purpledrop

assets (css, images, js)

templates

purpledrop.info (obrigatório)

screenshot.png

logo.png

template.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 purpledrop

assets (css, images, js)

templates

purpledrop.info (obrigatório)

screenshot.png

logo.png

template.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 purpledrop

assets (css, images, js)

templates

purpledrop.info (obrigatório)

screenshot.png

logo.png

template.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 purpledrop

assets (css, images, js)

templates

purpledrop.info (obrigatório)

screenshot.png

logo.png

template.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 purpledrop

assets (css, images, js)

templates

purpledrop.info (obrigatório)

screenshot.png

logo.png

template.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 purpledrop

assets (css, images, js)

templates

templates html.tpl.php

purpledrop.info (obrigatório) page.tpl.php

screenshot.png
node.tpl.php

logo.png
region.tpl.php
template.php
block.tpl.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 html.tpl.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 html.tpl.php

page.tpl.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 html.tpl.php

page.tpl.php

region.tpl.php

region.tpl.php region.tpl.php

region.tpl.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 html.tpl.php

page.tpl.php

region.tpl.php block.tpl.php

region.tpl.php region.tpl.php

block.tpl.php block.tpl.php

region.tpl.php block.tpl.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 html.tpl.php

page.tpl.php

region.tpl.php block.tpl.php

region.tpl.php region.tpl.php

block.tpl.php block.tpl.php

node.tpl.php

region.tpl.php block.tpl.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Algumas observações
sobre os templates

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # Contém apenas marcação HTML + variáveis em PHP

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # Contém apenas marcação HTML + variáveis em PHP

# Servem para personalizar a saída (output) padrão do Drupal

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # Contém apenas marcação HTML + variáveis em PHP

# Servem para personalizar a saída (output) padrão do Drupal

# Caso você não deseje personalizar a saída padrão, não há

necessidade de criar os templates dentro do seu tema

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # Contém apenas marcação HTML + variáveis em PHP

# Servem para personalizar a saída (output) padrão do Drupal

# Caso você não deseje personalizar a saída padrão, não há

necessidade de criar os templates dentro do seu tema

# Podem ser criados/sugeridos através de módulos ou do

template.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 templates

html.tpl.php

page.tpl.php

node.tpl.php

region.tpl.php

block.tpl.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 templates

html.tpl.php
System
page.tpl.php

node.tpl.php

region.tpl.php

block.tpl.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 templates

html.tpl.php
System
page.tpl.php

Node node.tpl.php

region.tpl.php

block.tpl.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 templates

html.tpl.php
System
page.tpl.php

Node node.tpl.php

region.tpl.php
Block
block.tpl.php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Sugestões de templates do núcleo do Drupal:
http://drupal.org/node/1089656

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 O arquivo .info

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 É um arquivo do tipo INI que contém as
definições básicas do seu tema

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # name (obrigatório)
# description (recomendado)
# core (obrigatório)
# screenshot
# version (desencorajado)
# regions
# stylesheets
# scripts
# php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # name (obrigatório)
# description (recomendado)
# core (obrigatório)
# screenshot
# version (desencorajado)
# regions
# stylesheets
# scripts
# php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # name (obrigatório)
# description (recomendado)
# core (obrigatório)
# screenshot
# version (desencorajado)
# regions
# stylesheets
# scripts
# php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # name (obrigatório)
# description (recomendado)
# core (obrigatório)
# screenshot
# version (desencorajado)
# regions
# stylesheets
# scripts
# php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # name (obrigatório)
# description (recomendado)
# core (obrigatório)
# screenshot
# version (desencorajado)
# regions
# stylesheets
# scripts
# php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # name (obrigatório)
# description (recomendado)
# core (obrigatório)
# screenshot
# version (desencorajado)
# regions
# stylesheets
# scripts
# php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # name (obrigatório)
# description (recomendado)
# core (obrigatório)
# screenshot
# version (desencorajado)
# regions
# stylesheets
# scripts
# php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # name (obrigatório)
# description (recomendado)
# core (obrigatório)
# screenshot
# version (desencorajado)
# regions
# stylesheets
# scripts
# php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 # name (obrigatório)
# description (recomendado)
# core (obrigatório)
# screenshot
# version (desencorajado)
# regions
# stylesheets
# scripts
# php

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
1. name = Garland
2. description = A multi-column theme which can be configured...
3. package = Core
4. version = VERSION
5. core = 7.x
6. stylesheets[all][] = style.css
7. stylesheets[print][] = print.css

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
1. name = Garland
2. description = A multi-column theme which can be configured...
3. package = Core
4. version = VERSION
5. core = 7.x
6. stylesheets[all][] = style.css
7. stylesheets[print][] = print.css

name
core description

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
1. name = Garland
2. description = A multi-column theme which can be configured...
3. package = Core
4. version = VERSION
5. core = 7.x
6. stylesheets[all][] = style.css
7. stylesheets[print][] = print.css

name
core description

Saiba mais sobre o arquivo .info

http://drupal.org/node/171205

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Por onde começar?

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Documentação oficial (em inglês)
http://drupal.org/documentation/theme

Canais de Suporte (em português)

https://groups.google.com/group/drupal-br
http://drupal-br.org
IRC: #drupal-br

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Curso Online de
Criação de Temas
para Drupal 7
Curso ao vivo, 100% prático e dinâmico!

Acesse:
http://migre.me/akG6H

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
Por Thiago Régis (@tregismoreira)
Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Perguntas?

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal
 Obrigado!

cursos@fisqua.com
http://cursos.fisqua.com
Inscreva-se no mailing: http://migre.me/8oUpW

Por Thiago Régis (@tregismoreira)

Mantenedor do Drupal Brasil, fundador da Fisqua e instrutor dos cursos online de Drupal