introducció a theming amb drupal 7

Sessió theming drupal 7Sessió theming drupal 7

Pako Garciapako@interficie.cat

@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??