Your SlideShare is downloading. ×
Introducció a Theming amb Drupal 7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Introducció a Theming amb Drupal 7

1,156
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,156
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. Requeriments dun drupal themer Dr upal x HT ML/ CSS P HP J av ascr i pt Disseny
  • 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. Parts dun temaDaltres:● logo.png● screenshot.png● theme-settings.php● color/color.inc● ...
  • 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. 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. TEMPLATEShtml.tpl.php page.tpl.php region.tpl.php node.tpl.php block.tpl.php
  • 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. 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. 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. Temes contribuits1,299 Themes a http://drupal.org/project/themes217 per Drupal 7!Temes per crear subtemes:
  • 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. 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. 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. 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. 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. 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. recursosDrupal (Oreilly (anaya Multimedia)http://ves.cat/aWziFront End Drupal:Designing, Theming, Scriptinghttp://ves.cat/aWzo
  • 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. Moltes Gràcies!! Preguntes??Photo by Clarkston SCAMP