introducció a theming amb drupal 7
DESCRIPTION
TRANSCRIPT
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 !
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
Requeriments d'un drupal themerRequeriments d'un drupal themer
DrupalxHTML/CSSPHPJavascr iptDisseny
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
Parts d'un temaParts d'un tema
D'altres:
● logo.png
● screenshot.png
● theme-settings.php
● color/color.inc
● ...
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
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
TEMPLATESTEMPLATEShtml.tpl.php
page.tpl.php
region.tpl.php
node.tpl.php
block.tpl.php
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
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
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)
Temes contribuitsTemes contribuits
1,299 Themes a http://drupal.org/project/themes
217 per Drupal 7!
Temes per crear subtemes:
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?
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?
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?
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
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?
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!";
recursosrecursos
Drupal (O'reilly (anaya Multimedia)
http://ves.cat/aWzi
Front End Drupal:
Designing, Theming, Scripting
http://ves.cat/aWzo
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
Moltes Gràcies!!Moltes Gràcies!!
Photo by Clarkston SCAMP
Preguntes??