introducció a theming amb drupal 7
DESCRIPTION
TRANSCRIPT
![Page 1: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/1.jpg)
Sessió theming drupal 7Sessió theming drupal 7
Pako [email protected]
@pakmanlh
Freelance, dissenyador, maquetador, Drupal site builder, Themer, ...
Vols un pelux
Druplicon ?
Fes-te soci de
drupal.cat !
![Page 2: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/2.jpg)
Què és el theming?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
![Page 3: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/3.jpg)
Requeriments d'un drupal themerRequeriments d'un drupal themer
DrupalxHTML/CSSPHPJavascr iptDisseny
![Page 4: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/4.jpg)
Parts d'un temaParts d'un tema
Ruta: Ruta: /sites/all/themes/nomdeltema/sites/all/themes/nomdeltema
nomdeltema.info:nomdeltema.info: arxiu d'informació general, arxiu d'informació general,
seccions, CSS, JSseccions, CSS, JS
Carpeta templates/:Carpeta templates/: arxius .tpl.php amb el arxius .tpl.php amb el
marcatge (x)HTML i les variables preprocessadesmarcatge (x)HTML i les variables preprocessades
template.php:template.php: arxiu amb funcions per modificar arxiu amb funcions per modificar
variables, crear de noves, etcvariables, crear de noves, etc
Ruta: Ruta: /sites/all/themes/nomdeltema/sites/all/themes/nomdeltema
nomdeltema.info:nomdeltema.info: arxiu d'informació general, arxiu d'informació general,
seccions, CSS, JSseccions, CSS, JS
Carpeta templates/:Carpeta templates/: arxius .tpl.php amb el arxius .tpl.php amb el
marcatge (x)HTML i les variables preprocessadesmarcatge (x)HTML i les variables preprocessades
template.php:template.php: arxiu amb funcions per modificar arxiu amb funcions per modificar
variables, crear de noves, etcvariables, crear de noves, etc
![Page 5: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/5.jpg)
Parts d'un temaParts d'un tema
D'altres:
● logo.png
● screenshot.png
● theme-settings.php
● color/color.inc
● ...
![Page 6: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/6.jpg)
Arxiu .infoArxiu .infoname = 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
![Page 7: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/7.jpg)
Arxiu .info Arxiu .info extraextraZen
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
![Page 8: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/8.jpg)
TEMPLATESTEMPLATEShtml.tpl.php
page.tpl.php
region.tpl.php
node.tpl.php
block.tpl.php
![Page 9: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/9.jpg)
TEMPLATESTEMPLATES
html.tpl.phphtml.tpl.php
page.tpl.phppage.tpl.php
region.tpl.phpregion.tpl.php
block.tpl.phpblock.tpl.php
node.tpl.phpnode.tpl.php
comment-wrapper.tpl.phpcomment-wrapper.tpl.php
comment.tpl.phpcomment.tpl.php
![Page 10: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/10.jpg)
TEMPLATEsTEMPLATEsNew 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
![Page 11: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/11.jpg)
TEMPLATEsTEMPLATEsOrdenar 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)
![Page 12: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/12.jpg)
Temes contribuitsTemes contribuits
1,299 Themes a http://drupal.org/project/themes
217 per Drupal 7!
Temes per crear subtemes:
![Page 13: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/13.jpg)
FUSIONFUSION
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?
![Page 14: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/14.jpg)
zenzen
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?
![Page 15: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/15.jpg)
omegaomega
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?
![Page 16: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/16.jpg)
Tipografia webTipografia webCompte! 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
![Page 17: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/17.jpg)
LessLess
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?
![Page 18: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/18.jpg)
LessLess
Funcions per tractar el color
lighten(@color, 10%);
darken(@color, 10%);
…
@import “arxiusenseextensio”
Interpolació de cadenes:
@base-url: "http://domini.cat";
background-image: url("@{base-url}/img/bg.png");
JavaScript Evaluation
@var: `"hello".toUpperCase() + '!'`; = > @var: "HELLO!";
![Page 19: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/19.jpg)
recursosrecursos
Drupal (O'reilly (anaya Multimedia)
http://ves.cat/aWzi
Front End Drupal:
Designing, Theming, Scripting
http://ves.cat/aWzo
![Page 20: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/20.jpg)
recursosrecursosOverview of Drupal Theme changes in 7.x
http://ves.cat/aWz2
Nice Menus
http://ves.cat/aWxn
Semantic Views
http://ves.cat/aqMr
Views Slideshow
http://ves.cat/aWxq
Style Guide
http://ves.cat/aWBN
![Page 21: Introducció a Theming amb Drupal 7](https://reader034.vdocuments.co/reader034/viewer/2022051314/54c829bd4a795962228b45a4/html5/thumbnails/21.jpg)
Moltes Gràcies!!Moltes Gràcies!!
Photo by Clarkston SCAMP
Preguntes??