Oficina drupal - Temas Drupal (Theming)

12
TEMAS DRUPAL Oficina Drupal - IST 8 de Maio 2010 João Belchior (Jolidog) Designer | Themer

description

Apresentação introdutória sobre theming em Drupal realizada na Oficina Drupal a 8 de Maio, 2010, no IST

Transcript of Oficina drupal - Temas Drupal (Theming)

Page 1: Oficina drupal - Temas Drupal (Theming)

TEMAS DRUPALOficina Drupal - IST8 de Maio 2010

João Belchior (Jolidog)Designer | Themer

Page 2: Oficina drupal - Temas Drupal (Theming)

TEMPLATE LAYER

TEMA.info

.tpl.phptemplate.php

SUB-TEMA

TEMAS BASE

SISTEMASAVANÇADOS

Oficina Drupal - IST8 de Maio 2010

Tema .tpl.php CSS jQuery

PHPTemplate Engine (Layouts e estilos base)

Módulos contrib (Views, CCK, Calendar, etc...)

Módulos do núcleo (Blog, Forum, etc...)

Núcleo

Drupal

Page 3: Oficina drupal - Temas Drupal (Theming)

TEMPLATE LAYER

TEMA.info

.tpl.phptemplate.php

SUB-TEMA

TEMAS BASE

SISTEMASAVANÇADOS

Oficina Drupal - IST8 de Maio 2010

nomedotema.info *

style.cssscript.js

page.tpl.php

node.tpl.php

block.tpl.php

template.php

logo.pngscreenshot.png

images

.....

Define regiões para os módulosDefine folhas de estilo e scripts javascript

name = Garland

description = Tableless, recolorable, multi-column, fluid width theme (default).

version = VERSIONcore = 6.x

engine = phptemplate

regions[left] = Left sidebarregions[right] = Right sidebarregions[content] = Contentregions[header] = Headerregions[footer] = Footer

stylesheets[all][] = style.cssstylesheets[print][] = print.css

scripts[] = myscript.js

Page 4: Oficina drupal - Temas Drupal (Theming)

TEMPLATE LAYER

TEMA.info

.tpl.phptemplate.php

SUB-TEMA

TEMAS BASE

SISTEMASAVANÇADOS

Oficina Drupal - IST8 de Maio 2010

nomedotema.info *

style.cssscript.js

page.tpl.php

node.tpl.php

block.tpl.php

template.php

logo.pngscreenshot.png

images

.....

LOGO

Page 5: Oficina drupal - Temas Drupal (Theming)

TEMPLATE LAYER

TEMA.info

.tpl.phptemplate.php

SUB-TEMA

TEMAS BASE

SISTEMASAVANÇADOS

Oficina Drupal - IST8 de Maio 2010

nomedotema.info *

style.cssscript.js

page.tpl.php

node.tpl.php

block.tpl.php

template.php

logo.pngscreenshot.png

images

.....

Preprocessors

Criar ou preparar variavéis para serem usadas no template

phptemplate_preprocess_xyz

wonderful_preprocess_xyz

Theme functions override

Alterar funções de apresentação que módulos tenham definido

function theme_xyz( $a, $b, $c) {

function nomedotema_xyz( $a, $b, $c) {

Page 6: Oficina drupal - Temas Drupal (Theming)

TEMPLATE LAYER

TEMA.info

.tpl.phptemplate.php

SUB-TEMA

TEMAS BASE

SISTEMASAVANÇADOS

Oficina Drupal - IST8 de Maio 2010

nomedotema.info *

style.cssscript.js

page.tpl.phpnode.tpl.phpblock.tpl.php

template.php

logo.pngscreenshot.png

Temanomedosubtema.info *

style.css

node.tpl.php

logo.pngscreenshot.png

Sub-Tema

Page 7: Oficina drupal - Temas Drupal (Theming)

TEMPLATE LAYER

TEMA.info

.tpl.phptemplate.php

SUB-TEMA

TEMAS BASE

SISTEMASAVANÇADOS

Oficina Drupal - IST8 de Maio 2010

nomedotema.info *

style.cssscript.js

page.tpl.phpnode.tpl.phpblock.tpl.php

template.php

logo.pngscreenshot.png

Temanomedosubtema.info *

style.css

node.tpl.php

logo.pngscreenshot.png

Sub-Tema

nomedosubtema2.info *

style.css

logo.pngscreenshot.png

Sub-Tema 2

Page 8: Oficina drupal - Temas Drupal (Theming)

TEMPLATE LAYER

TEMA.info

.tpl.phptemplate.php

SUB-TEMA

TEMAS BASE

SISTEMASAVANÇADOS

Oficina Drupal - IST8 de Maio 2010

nomedotema.info *

style.cssscript.js

page.tpl.phpnode.tpl.phpblock.tpl.php

template.php

logo.pngscreenshot.png

Temanomedosubtema.info *

style.css

node.tpl.php

logo.pngscreenshot.png

Sub-Tema

nomedosubtema2.info *

style.css

logo.pngscreenshot.png

Sub-Tema 2

nomedosubtema2a.info *

style.css

page.tpl.php

logo.pngscreenshot.png

Sub-Tema 2a

Page 9: Oficina drupal - Temas Drupal (Theming)

TEMPLATE LAYER

TEMA.info

.tpl.phptemplate.php

SUB-TEMA

TEMAS BASE

SISTEMASAVANÇADOS

Oficina Drupal - IST8 de Maio 2010

Community Support

Commercial Support

Zenhttp://drupal.org/project/zen

Ninesixtyhttp://drupal.org/project/ninesixty

Genesishttp://drupal.org/project/genesis

Fusion + Skinrhttp://drupal.org/project/fusionhttp://drupal.org/project/skinr

AdaptativeThemehttp://drupal.org/project/adaptivetheme

Page 10: Oficina drupal - Temas Drupal (Theming)

TEMPLATE LAYER

TEMA.info

.tpl.phptemplate.php

SUB-TEMA

TEMAS BASE

SISTEMASAVANÇADOS

Oficina Drupal - IST8 de Maio 2010

Acquia ProsperAcquia MarinaAcquia SlateAbstractCeladonLight Fantastic

AT MobileAT KodaAT Panels Everywhere

Community Support

Commercial Support

Zenhttp://drupal.org/project/zen

Ninesixtyhttp://drupal.org/project/ninesixty

Genesishttp://drupal.org/project/genesis

Fusion + Skinrhttp://drupal.org/project/fusionhttp://drupal.org/project/skinr

AdaptativeThemehttp://drupal.org/project/adaptivetheme

Page 11: Oficina drupal - Temas Drupal (Theming)

TEMPLATE LAYER

TEMA.info

.tpl.phptemplate.php

SUB-TEMA

TEMAS BASE

SISTEMASAVANÇADOS

Oficina Drupal - IST8 de Maio 2010

Módulos de ajudaSemantic Viewshttp://drupal.org/project/semanticviews

Block Classhttp://drupal.org/project/block_class

Menu Classhttp://drupal.org/project/menuclass

..........

Módulos complexosContexthttp://drupal.org/project/contextSpaceshttp://drupal.org/project/spaces

Display Suitehttp://drupal.org/project/dsNode Displayshttp://drupal.org/project/ndUser Displayshttp://drupal.org/project/ud.... Displays

Panelshttp://drupal.org/project/panelsPanels Everywherehttp://drupal.org/project/panels_everywhere

Page 12: Oficina drupal - Temas Drupal (Theming)

TEMPLATE LAYER

TEMA.info

.tpl.phptemplate.php

SUB-TEMA

TEMAS BASE

SISTEMASAVANÇADOS

Oficina Drupal - IST8 de Maio 2010

Obrigado!João Belchior (Jolidog)Designer | Themer