Introducció a Theming amb Drupal 7

1,420 views

Published on

Published in: Design, Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,420
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introducció a Theming amb Drupal 7

  1. 1. 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 !
  2. 2. 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
  3. 3. Requeriments dun drupal themer Dr upal x HT ML/ CSS P HP J av ascr i pt Disseny
  4. 4. 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
  5. 5. Parts dun temaDaltres:● logo.png● screenshot.png● theme-settings.php● color/color.inc● ...
  6. 6. 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
  7. 7. 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
  8. 8. TEMPLATEShtml.tpl.php page.tpl.php region.tpl.php node.tpl.php block.tpl.php
  9. 9. TEMPLATES html.tpl.php page.tpl.php region.tpl.php block.tpl.php node.tpl.php comment-wrapper.tpl.php comment.tpl.php
  10. 10. 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
  11. 11. 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)
  12. 12. Temes contribuits1,299 Themes a http://drupal.org/project/themes217 per Drupal 7!Temes per crear subtemes:
  13. 13. 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?
  14. 14. 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?
  15. 15. 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?
  16. 16. 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
  17. 17. 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?
  18. 18. 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!";
  19. 19. recursosDrupal (Oreilly (anaya Multimedia)http://ves.cat/aWziFront End Drupal:Designing, Theming, Scriptinghttp://ves.cat/aWzo
  20. 20. 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
  21. 21. Moltes Gràcies!! Preguntes??Photo by Clarkston SCAMP

×