ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Introducci¨® a Theming amb Drupal 7

?
?
Pakman Lh
Pakman Lh
1 of 21
Downloaded 15 times
Sessi¨® theming drupal 7 Pako Garcia pako@interficie.cat @pakmanlh Freelance, dissenyador, maquetador, Drupal site builder, Themer, ... Vols un pelux Druplicon ? Fes-te soci de drupal.cat !
Qu¨¨ ¨¦s el theming? NO NOM?S es troba als themes Theme layer = darrera capa de Drupal Presentaci¨® de la informaci¨® i Marcatge (etiquetes) dels elements Aspecte visual de Drupal (CSS) +info http://ves.cat/aWBH
Requeriments d'un drupal themer Dr upal x HT ML/ CSS P HP J av ascr i pt Disseny
Parts d'un tema Ruta: /sites/all/themes/nomdeltema nomdeltema.info: arxiu d'informaci¨® general, seccions, CSS, JS Carpeta templates/: arxius .tpl.php amb el marcatge (x)HTML i les variables preprocessades template.php: arxiu amb funcions per modificar variables, crear de noves, etc
Parts d'un tema D'altres: ¡ñ logo.png ¡ñ screenshot.png ¡ñ theme-settings.php ¡ñ color/color.inc ¡ñ ...
Arxiu .info name = Nom del tema description = Descripci¨® del tema core = versi¨® del nucli engine = sistema de plantilles phptemplate, Smarty, Xtemplate, ... screenshot = imatge resum de l'aspecte del tema base theme = Tema principal en el que es bassa (en cas de ser un subtema) regions[menu] = definici¨® d'una regi¨® stylesheets[all][] = css/html-reset.css stylesheets[print][] = css/print.css scripts[] = js/script.js
Arxiu .info extra Zen stylesheets-conditional[lte IE 7][all][] = css/ie7.css settings[zen_breadcrumb] = yes Fusion settings[theme_grid] = grid12-960 Omega zones[header] = Header ¡­ Recordeu esborrar la Cach¨¦! drush cc
TEMPLATES html.tpl.php page.tpl.php region.tpl.php node.tpl.php block.tpl.php
TEMPLATES html.tpl.php page.tpl.php region.tpl.php block.tpl.php node.tpl.php comment-wrapper.tpl.php comment.tpl.php
TEMPLATEs New D7! html.tpl.php page.tpl.php : page--[front|internal/path].tpl.php New D7! region.tpl.php : region--[name].tpl.php node.tpl.php : node--[type].tpl.php block.tpl.php : block--[type].tpl.php comment.tpl.php : comment--[node-type].tpl.php comment-wrapper.tpl.php : comment-wrapper--[node-type].tpl.php field.tpl.php : field--[type|name[--content-type]|content-type].tpl.php New D7! taxonomy-term.tpl.php Core Templates: http://ves.cat/aWp8 Theme Devel: http://ves.cat/aWp6
TEMPLATEs Ordenar els .tpl.php per directoris theme-name/templates/page/page.tpl.php theme-name/templates/node/node.tpl.php theme-name/templates/views/views-view.tpl.php theme-name/templates/block/block.tpl.php Compte! theme-name/templates/node.tpl.php mana per sobre de theme-name/templates/node/node.tpl.php Compte! Codi PHP dins dels .tpl.php fer-ho a template.php amb mytheme_preprocess Compte! print($content)
Temes contribuits 1,299 Themes a http://drupal.org/project/themes 217 per Drupal 7! Temes per crear subtemes:
FUSION http://drupal.org/project/fusion Complement ¨²til: http://drupal.org/project/fusion_accelerator Diferents Grids (16 I 12 columnes) Sistema Fluid o fixed (960px) UI que permet afegir classes als elements de la p¨¤gina I modificar mides i caracter¨ªstiques dels elements ?til si no es domina CSS per¨° pateix divitis DEMO time?
zen http://drupal.org/project/zen Tema minimalista (bastant net) Classes ¨²tils al body Sistema Liquid o fixed (960px) Sistema de 1-2 o 3 columnes sense taules CSS per impressi¨® DEMO time?
omega http://drupal.org/project/omega Delta (Utilitat): http://drupal.org/project/delta Necessari Ctools i Context. Base HTML5 Sistema Responsive (960px) Implementa zones que contenen regions Permet fer servir templates en funci¨® de la situaci¨® DEMO time?
Tipografia web Compte! Si disposem de les llic¨¨ncies de les tipografies: Cufon i Typeface:Llibreries JS que permeten carregar fonts convertides pr¨¨viament amb http://cufon.shoqolate.com/generate/ o http://typeface.neocracy.org/ @font-face: Propietat CSS3, permet l'¨²s de fonts .OTF No necessitem afegir cap class concreta. Font face kit generator http://www.fontsquirrel.com/fontface/generator Si no disposem de llic¨¨ncies: Open source Fonts: http://www.google.com/webfonts
Less http://lesscss.org/ http://drupal.org/project/less/ Permet programaci¨® a dins dels CSS per estalviar-nos codi Definici¨® de variables Permet reutilitzar codi amb els Mix Els Mix permeten ser parametritzats com funcions Facilita l'anidaci¨® dels selectors Permet operacions amb els valors de les propietats DEMO time?
Less Funcions per tractar el color lighten(@color, 10%); darken(@color, 10%); ¡­ @import ¡°arxiusenseextensio¡± Interpolaci¨® de cadenes: @base-url: "http://domini.cat"; background-image: url(/slideshow/introducci-a-theming-amb-drupal-7-10014788/10014788/"@{base-url}/img/bg.png"); JavaScript Evaluation @var: `"hello".toUpperCase() + '!'`; = > @var: "HELLO!";
recursos Drupal (O'reilly (anaya Multimedia) http://ves.cat/aWzi Front End Drupal: Designing, Theming, Scripting http://ves.cat/aWzo
recursos Overview of Drupal Theme changes in 7.x http://ves.cat/aWz2 Nice Menus http://ves.cat/aWxn Semantic Views http://ves.cat/aqMr Views ºÝºÝߣshow http://ves.cat/aWxq Style Guide http://ves.cat/aWBN
Moltes Gr¨¤cies!! Preguntes?? Photo by Clarkston SCAMP

More Related Content

Introducci¨® a Theming amb Drupal 7

  • 1. Sessi¨® theming drupal 7 Pako Garcia pako@interficie.cat @pakmanlh Freelance, dissenyador, maquetador, Drupal site builder, Themer, ... Vols un pelux Druplicon ? Fes-te soci de drupal.cat !
  • 2. Qu¨¨ ¨¦s el theming? NO NOM?S es troba als themes Theme layer = darrera capa de Drupal Presentaci¨® de la informaci¨® i Marcatge (etiquetes) dels elements Aspecte visual de Drupal (CSS) +info http://ves.cat/aWBH
  • 3. Requeriments d'un drupal themer Dr upal x HT ML/ CSS P HP J av ascr i pt Disseny
  • 4. Parts d'un tema Ruta: /sites/all/themes/nomdeltema nomdeltema.info: arxiu d'informaci¨® general, seccions, CSS, JS Carpeta templates/: arxius .tpl.php amb el marcatge (x)HTML i les variables preprocessades template.php: arxiu amb funcions per modificar variables, crear de noves, etc
  • 5. Parts d'un tema D'altres: ¡ñ logo.png ¡ñ screenshot.png ¡ñ theme-settings.php ¡ñ color/color.inc ¡ñ ...
  • 6. Arxiu .info name = Nom del tema description = Descripci¨® del tema core = versi¨® del nucli engine = sistema de plantilles phptemplate, Smarty, Xtemplate, ... screenshot = imatge resum de l'aspecte del tema base theme = Tema principal en el que es bassa (en cas de ser un subtema) regions[menu] = definici¨® d'una regi¨® stylesheets[all][] = css/html-reset.css stylesheets[print][] = css/print.css scripts[] = js/script.js
  • 7. Arxiu .info extra Zen stylesheets-conditional[lte IE 7][all][] = css/ie7.css settings[zen_breadcrumb] = yes Fusion settings[theme_grid] = grid12-960 Omega zones[header] = Header ¡­ Recordeu esborrar la Cach¨¦! drush cc
  • 8. TEMPLATES html.tpl.php page.tpl.php region.tpl.php node.tpl.php block.tpl.php
  • 9. TEMPLATES html.tpl.php page.tpl.php region.tpl.php block.tpl.php node.tpl.php comment-wrapper.tpl.php comment.tpl.php
  • 10. TEMPLATEs New D7! html.tpl.php page.tpl.php : page--[front|internal/path].tpl.php New D7! region.tpl.php : region--[name].tpl.php node.tpl.php : node--[type].tpl.php block.tpl.php : block--[type].tpl.php comment.tpl.php : comment--[node-type].tpl.php comment-wrapper.tpl.php : comment-wrapper--[node-type].tpl.php field.tpl.php : field--[type|name[--content-type]|content-type].tpl.php New D7! taxonomy-term.tpl.php Core Templates: http://ves.cat/aWp8 Theme Devel: http://ves.cat/aWp6
  • 11. TEMPLATEs Ordenar els .tpl.php per directoris theme-name/templates/page/page.tpl.php theme-name/templates/node/node.tpl.php theme-name/templates/views/views-view.tpl.php theme-name/templates/block/block.tpl.php Compte! theme-name/templates/node.tpl.php mana per sobre de theme-name/templates/node/node.tpl.php Compte! Codi PHP dins dels .tpl.php fer-ho a template.php amb mytheme_preprocess Compte! print($content)
  • 12. Temes contribuits 1,299 Themes a http://drupal.org/project/themes 217 per Drupal 7! Temes per crear subtemes:
  • 13. FUSION http://drupal.org/project/fusion Complement ¨²til: http://drupal.org/project/fusion_accelerator Diferents Grids (16 I 12 columnes) Sistema Fluid o fixed (960px) UI que permet afegir classes als elements de la p¨¤gina I modificar mides i caracter¨ªstiques dels elements ?til si no es domina CSS per¨° pateix divitis DEMO time?
  • 14. zen http://drupal.org/project/zen Tema minimalista (bastant net) Classes ¨²tils al body Sistema Liquid o fixed (960px) Sistema de 1-2 o 3 columnes sense taules CSS per impressi¨® DEMO time?
  • 15. omega http://drupal.org/project/omega Delta (Utilitat): http://drupal.org/project/delta Necessari Ctools i Context. Base HTML5 Sistema Responsive (960px) Implementa zones que contenen regions Permet fer servir templates en funci¨® de la situaci¨® DEMO time?
  • 16. Tipografia web Compte! Si disposem de les llic¨¨ncies de les tipografies: Cufon i Typeface:Llibreries JS que permeten carregar fonts convertides pr¨¨viament amb http://cufon.shoqolate.com/generate/ o http://typeface.neocracy.org/ @font-face: Propietat CSS3, permet l'¨²s de fonts .OTF No necessitem afegir cap class concreta. Font face kit generator http://www.fontsquirrel.com/fontface/generator Si no disposem de llic¨¨ncies: Open source Fonts: http://www.google.com/webfonts
  • 17. Less http://lesscss.org/ http://drupal.org/project/less/ Permet programaci¨® a dins dels CSS per estalviar-nos codi Definici¨® de variables Permet reutilitzar codi amb els Mix Els Mix permeten ser parametritzats com funcions Facilita l'anidaci¨® dels selectors Permet operacions amb els valors de les propietats DEMO time?
  • 18. Less Funcions per tractar el color lighten(@color, 10%); darken(@color, 10%); ¡­ @import ¡°arxiusenseextensio¡± Interpolaci¨® de cadenes: @base-url: "http://domini.cat"; background-image: url(/slideshow/introducci-a-theming-amb-drupal-7-10014788/10014788/"@{base-url}/img/bg.png"); JavaScript Evaluation @var: `"hello".toUpperCase() + '!'`; = > @var: "HELLO!";
  • 19. recursos Drupal (O'reilly (anaya Multimedia) http://ves.cat/aWzi Front End Drupal: Designing, Theming, Scripting http://ves.cat/aWzo
  • 20. recursos Overview of Drupal Theme changes in 7.x http://ves.cat/aWz2 Nice Menus http://ves.cat/aWxn Semantic Views http://ves.cat/aqMr Views ºÝºÝߣshow http://ves.cat/aWxq Style Guide http://ves.cat/aWBN
  • 21. Moltes Gr¨¤cies!! Preguntes?? Photo by Clarkston SCAMP