Introducció a Theming amb Drupal 7

Sessió theming drupal 7 Pako Garcia pako@interficie.cat @pakmanlhFreelance, 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 themesTheme 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 dun drupal themer Dr upal x HT ML/ CSS P HP J av ascr i pt Disseny

Parts dun temaRuta: /sites/all/themes/nomdeltemanomdeltema.info: arxiu dinformació general,seccions, CSS, JSCarpeta templates/: arxius .tpl.php amb elmarcatge (x)HTML i les variables preprocessadestemplate.php: arxiu amb funcions per modificarvariables, crear de noves, etc

Parts dun temaDaltres:● logo.png● screenshot.png● theme-settings.php● color/color.inc● ...

Arxiu .infoname = Nom del temadescription = Descripció del temacore = versió del nucliengine = sistema de plantilles phptemplate, Smarty,Xtemplate, ...screenshot = imatge resum de laspecte del temabase theme = Tema principal en el que es bassa (en cas de serun subtema)regions[menu] = definició duna regióstylesheets[all][] = css/html-reset.cssstylesheets[print][] = css/print.cssscripts[] = js/script.js

Arxiu .info extraZenstylesheets-conditional[lte IE 7][all][] = css/ie7.csssettings[zen_breadcrumb] = yesFusionsettings[theme_grid] = grid12-960Omegazones[header] = Header…Recordeu esborrar la Caché! drush cc

TEMPLATEShtml.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.phpCore Templates: http://ves.cat/aWp8Theme Devel: http://ves.cat/aWp6

TEMPLATEsOrdenar els .tpl.php per directoristheme-name/templates/page/page.tpl.phptheme-name/templates/node/node.tpl.phptheme-name/templates/views/views-view.tpl.phptheme-name/templates/block/block.tpl.phpCompte! theme-name/templates/node.tpl.php manaper sobre de theme-name/templates/node/node.tpl.phpCompte! Codi PHP dins dels .tpl.phpfer-ho a template.php amb mytheme_preprocessCompte! print($content)

Temes contribuits1,299 Themes a http://drupal.org/project/themes217 per Drupal 7!Temes per crear subtemes:

FUSIONhttp://drupal.org/project/fusionComplement útil:http://drupal.org/project/fusion_acceleratorDiferents Grids (16 I 12 columnes)Sistema Fluid o fixed (960px)UI que permet afegir classes als elements de la pàginaI modificar mides i característiques dels elementsÚtil si no es domina CSS però pateix divitisDEMO time?

zenhttp://drupal.org/project/zenTema minimalista (bastant net)Classes útils al bodySistema Liquid o fixed (960px)Sistema de 1-2 o 3 columnes sense taulesCSS per impressióDEMO time?

omegahttp://drupal.org/project/omegaDelta (Utilitat): http://drupal.org/project/deltaNecessari Ctools i Context.Base HTML5Sistema Responsive (960px)Implementa zones que contenen regionsPermet fer servir templates en funció de la situacióDEMO time?

Tipografia webCompte! Si disposem de les llicències de lestipografies:Cufon i Typeface:Llibreries JS que permeten carregarfonts convertides prèviament ambhttp://cufon.shoqolate.com/generate/ o http://typeface.neocracy.org/@font-face: Propietat CSS3, permet lús de fonts .OTFNo necessitem afegir cap class concreta.Font face kit generatorhttp://www.fontsquirrel.com/fontface/generatorSi no disposem de llicències:Open source Fonts: http://www.google.com/webfonts

Lesshttp://lesscss.org/http://drupal.org/project/less/Permet programació a dins dels CSS per estalviar-noscodiDefinició de variablesPermet reutilitzar codi amb els MixEls Mix permeten ser parametritzats com funcionsFacilita lanidació dels selectorsPermet operacions amb els valors de les propietatsDEMO time?

LessFuncions per tractar el colorlighten(@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!";

recursosDrupal (Oreilly (anaya Multimedia)http://ves.cat/aWziFront End Drupal:Designing, Theming, Scriptinghttp://ves.cat/aWzo

recursosOverview of Drupal Theme changes in 7.xhttp://ves.cat/aWz2Nice Menushttp://ves.cat/aWxnSemantic Viewshttp://ves.cat/aqMrViews Slideshowhttp://ves.cat/aWxqStyle Guidehttp://ves.cat/aWBN

Moltes Gràcies!! Preguntes??Photo by Clarkston SCAMP

Introducció a Theming amb Drupal 7

by pakmanlh on Nov 03, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Introducció a Theming amb Drupal 7 — Presentation Transcript