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
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
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
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)
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("@{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
