Drupal ThemingKrimsonHans Rossel en Jan-Yves Vanhaverbeke17/8/2011 en 14/9/2011Hans Rossel - hans.rossel@koba.be
Theme Documentation• Theme guide: http://drupal.org/theme-guide/6-7• Update modules: http://drupal.org/update/modules/6/7•...
Hulpmiddelen• Firefox: Firebug, webdeveloper toolbar,    pixelperfect, xrefresh, colorzilla, webaim• Devel en devel_themer
VoorbereidingWireframes      Photoshop design
SchermformatenStandaard 1024x768•   Favorieten open?•   Bovenmenu aftrekken•   Toolbar•   Laptop widescreen•   Mobile, nie...
Drupal 7 core Themes: Appearance
Theme folderCore: /themesContrib: /sites/all/themesCustom: /sites/default/themes (tenzij bij multisite dan idem contrib)
Soorten themes• Core• Contrib• Custom• Starter/base• Admin• Html5
SUBTHEME   EEN THEME  OP BASIS VANEEN ANDER THEME
Subthemevan een bestaand theme                             .info file:                           Toevoegen:               ...
Starter Themes•   http://drupal.org/project/zen•   www.drupal.org/project/fusion•   www.drupal.org/project/adaptivetheme (...
ZEN Theme●   www.drupal.org/project/zen●   Net als Garland gebaseerd op de    http://www.positioniseverything.net/articles...
Mooie code, lelijk theme
Een Zen subtheme - #2265071.Kopieer STARTERKIT en hernoem het2..info: mijntheme.info + verwijzingen3.CSS  1.layout-liquid....
CSS Framework Starter Themescss frameworks zijn erg handig om snel complexe layouts te maken die standard compliant      z...
Admin ThemesNu er erg wordt gewerkt aan het verbeteren van de User Experience en Usability van     Drupal zijn er recent h...
Ontwerp je eigen subthemetemplate.php: theme function overrides die voor  alle themes van belang zijnOvernemen zaken van a...
Standaardstijlen
EEN DRUPAL 7 THEME  “FROM SCRATCH”
Theme CSS• Drupal voegt heel wat html met ids en classes toe. Probeer   zoveel mogelijk met css op te lossen. De html wijz...
HTML/css Prototypewww.styleshout.com / www.oswd.org                     vectorlover html/css prototype                  ht...
.
Theme files.info (definition file)screenshot.pngCss, js, imagespage.tpl.php, node.tpl.php:• html met dynamische (php) stuk...
Regions regions[header] = Header regions[help] = Help (d6:$help) regions[page_top] = Page top (d6:$closure) regions[page_b...
Theme folder        Maak folder: sites/default/themes/vectorlover  Voeg je index.html, css, images van je statische templa...
.info fileMaak een vectorlover.info filename = vectorloverdescription = A very nice theme(package nooit gebruiken: Core th...
Template files• /modules/system     – html.tpl.php : Bevat DOCTYPE, <head> met RDFa, page_top en         page_bottom regio...
Theme activeren• screenshot.png toevoegen (294px × 219px)• Appearance tab: theme activeren• Telkens je een nieuw tpl.php b...
Theme Registryhttp://drupal.org/node/173880De theme registry moet leeggemaakt worden telkens als je een template file toev...
Functie clear theme registryWordt best conditioneel toegevoegd via een setting voor het theme. Performance problemen indie...
Dynamische contentcopiëren en plakken
First sidebar (zijkolomregio)• Alle regios die je definieert in je .info    bestand moeten geprint worden in    html.tpl.p...
Main menu (hoofdnavigatie)• To meet Web Content Accessibility Guidelines (WCAG)    requirements, HTML headings should be u...
Variabelen• Heel wat beschikbare variabelen• Bekijken via devel of print_r($vars) in template• Definitie van de variabelen...
THEME AANPASSEN OP MAAT
CSS in Drupal themes• Vermijd overlapping van css classes door .content,    .menu, .links, .block niet te gebruiken• Drupa...
Css aanpassen• Stylesheet toevoegen in (sub) theme via .info    file• drupal_add_css om (conditioneel) css toe te    voege...
Css toevoegen via .info; Add a style sheet for all mediastylesheets[all][] = theStyle.css; Add a style sheet for screen an...
Media queries.info filestylesheets[screen and (max-width: 600px)][] = screen-600.cssIn css bestand:@media screen and (max-...
.element-invisible in Bartik
Accessibility: Css clipProbleem: hide content except for screen-readers• display:none maakt de content onzichtbaar voor sc...
drupal_add_css• http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_css/7• drupal_add_css(path_to_th...
Verwijzen naar actieve theme• In template $directory• path_to_theme()• drupal_get_path(theme, bartik)
Reset css• Nodig? http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm• Reset.css + base.css• Alternatief: n...
IE css       template.php (example Bartik theme)   Gebruik: functie abc_preprocess_html(&$vars)
IE css via module• Issue: in .info file? Zie http://drupal.org/node/522006• Via module: http://drupal.org/project/conditio...
Hook_css_alterhttp://api.drupal.org/api/drupal/modules--system--system.api.php/function/hook_css_alter/7<?phpfunction abc_...
hook_css_alter
Remove multiple css files<?phpfunction THEMENAME_css_alter(&$css) {    $exclude = array(     misc/vertical-tabs.css => FAL...
Override css/*** Implements hook_css_alter().*/function seven_css_alter(&$css) {    // Use Sevens vertical tabs style inst...
HTML Aanpassen• Via .tpl.php file: template file aanpassen of    dupliceren in een template suggestion• Via theme_ functie...
tpl.php files in d7
HTML wijzigenTemplate overrides• Copieer om het even welk tpl.php bestand dat je vindt in een    module naar je de map van...
page.tpl.phpFrontpage page--front.tpl.phpVermijd zoveel mogelijk meerdere page.tpl.php templates te hebben.  Gebruik css o...
node.tpl.phpCopieer de originele node.tpl.php van /modules/nodePer content typenode--blog.tpl.phpnode--forum.tpl.phpnode--...
Block template files
block.tpl.phpblock.tpl.phpblock--region.tpl.phpblock--module.tpl.phpBlock--module--delta.tpl.php
Belangrijkste andere tpl.php●                        ● region.tpl.php                         ● maintainance-page.tpl.php●...
Theme hook suggestionsfunction abc_preprocess_page(&$vars, $hook) {    print_r($vars[theme_hook_suggestions]);}Array (    ...
Theme function overrides
HTML wijzigen viaTheme overridesAls er geen tpl.php beschikbaar is, dan zit de html in een theme_   functie• Zoek de theme...
theme_breadcrumb()
theme_breadcrumb()
BASIS THEME FUNCTIES
Themeable functionsHandige functies voor links, lijsten, …    – http://api.drupal.org/api/group/themeable/6
L functie: een link maken●   http://api.drupal.org/api/drupal/includes--common.inc/function●   Vorm: l($text, $path, $opti...
theme_item_list: een lijst●   http://api.drupal.org/api/function/theme_item_list/6●   Vorm: theme_item_list($items = array...
theme_links●   http://api.drupal.org/api/function/theme_links/6●   Vorm: theme_links($links, $attributes = array(class => ...
Preprocess en process       functies
Template.php
Drupal paden, classes voor css  Standaard: node/nid  Opvragen via:  http://api.drupal.org/api/drupal/includes--bootstrap...
Node controlerenfunction themename_preprocess_page(&$variables) {      $variables[ifnode] = ( (arg(0) == node) &&    is_nu...
hook_preprocess_html
hook_preprocess_html
hook_preprocess_html
hook_html_head_alter()
hook_html_head_alter()
hook_html_head_alter()
hook_html_head_alter()
hook_preprocess_page
hook_preprocess_page
hook_preprocess_page
Nieuwsbrief tpl.php/* * Newsletter: make separate template files for html and page if   node type is nieuwsbrief */functio...
hook_preprocess_page
hook_preprocess_node
hook_preprocess_node
hook_preprocess_node
hook_preprocess_node
hook_preprocess_node
hook_preprocess_node
hook_process_node
hook_preprocess_block()
Theme hook suggestions voorblockin hook_preprocess_block
Block admin paginafunction seven_preprocess_block_admin_display_form(&$vars) {    // List of modules which are allowed on ...
URL Aliassen opvragenZie:   http://api.drupal.org/api/drupal/includes--path.inc/function/drupal_get_path_alias/7    en htt...
Render API
Render API• $page array bevat regios, blokken, ...: flexibel    spelen met content via hook_page_alter()• Meer info      –...
Render api &hook_page_alterhttp://api.drupal.org/api/function/hook_page_alter/7 • Naar voorbeeld van de FormAPI: meer    f...
Render() toepassingen• Voorbeelden      – Regios en blokken wijzigen met module             • Voorbeeld: een blok duplicer...
functionabc_page_alter(&$page) {
hook_page_alter
THEME SWITCHING
Theme switching in settings.phptheme_default: Defines the default theme for  this site.- $conf[theme_default] = garland;A ...
Theme wisselen volgens urlIn settings.php// if the url is an administration pageif (strpos($_GET[q], admin) === 0) {    $c...
Mobile theme$parts = explode(., $_SERVER[HTTP_HOST]);if ($parts[0] == mobile) {    $GLOBALS[theme_default] = mobile;}
IE6 theme$user_agent = $_SERVER[HTTP_USER_AGENT]; if($user_agent) {  if ((strpos($user_agent, MSIE 6.0)) && (strpos($_GET[...
Theme Key module• Heel flexibele module voor het wisselen theme   onder bepaalde voorwaarden    – Tijd: speciaal theme voo...
Mobile themes• App    – Titanium/phonegap via html5,css3,js• Aparte site    – Multisite installatie    – Mobile tools modu...
THEME SETTINGS
Theme settings• Drupal.org: http://drupal.org/node/177868• Op admin/appearance/settings/themeName   kunnen voor het theme ...
Rebuild Theme Registry
Default settings in .info file• settings[abc_breadcrumb] = yes• settings[abc_breadcrumb_separator] =  › • settings[abc_reb...
hook_form_system_theme_settings_alter• Is een hook_FORM_ID_alter implementatie• Gebruikt in theme-settings.php
theme-settings.php
THEME SECURITY
Theme security• check_plain()• check_url()• check_markup()• filter_xss_admindrupal_set_title($node->title); // Incorrectdr...
Front end Performance
Front-end performance• Css en js aggregatie• Image styles, smush.it• Css sprites• drupal_add_css en drupal_add_js: selecti...
Views Theming
Voorbeeld: Views slideshow• http://drupal.org/project/views_slideshow• Toepassing:    – Fotogalerij    – Dynamic Display b...
Views templates•   Basistemplates in de views module folder•   Theme Information link in de view zelf geeft suggesties    ...
Een view beïnvloeden1) Met de template files views-view.tpl.php(opvragen via de “information link”)2) Met een hook vbhook_...
Views embedden met module• http://drupal.org/project/viewfield• http://drupal.org/project/insert_view
Eenvoudig views embedden<?php echo views_embed_view(most_recent_post, default); ?  ><?php echo views_embed_view(nieuws, bl...
Views embedden alternatief$view = views_get_view($view_name); $view->set_arguments(array(0 => all, 1 => typeb));    // if ...
Geavanceerd embedden viablok<?php$view = views_get_view(Publicaties);//print <pre>;//print_r($view);//print </pre>;$view->...
FIELDS THEMING
Theming fieldsIndividuele velden kunnen gethemed worden via field.tpl.php• field.tpl.php• field--field-type.tpl.php• field...
Theme image styleshttp://api.drupal.org/api/drupal/modules--image--image.module/functioprint theme(image_style, array( pat...
Theme image stylesProbleem/bug: width/height van imageshttp://drupal.org/node/908282http://drupal.org/node/1129642Manueel ...
FORMS THEMING
Form themingHet themen van forms kan via hook_FORM_ID_alter()Er zijn ook enkele modules die je kunnen helpen een pak zaken...
hook_FORM_ID_alter/** * Implements hook_form_ID_alter(). */function abc_form_comment_form_alter(&$form, &$form_state) {  /...
hook_FORM_ID_alter/** * Implements hook_form_ID_alter(). */function abc_form_user_login_block_alter(&$form,   &$form_state...
HTML5 en CSS3
Nieuwe mogelijkheden• Vereenvoudigde html (niet meer xml    gebaseerd)• Nieuwe structuurelementen:    <header><footer><sec...
Nieuwe mogelijkheden• Video: <video>• Canvas: http://canvaspaint.org• Data storage: localstorage 5MB en web sql   database...
CSS3• Voor oudere versies -moz en -webkit nodig. IE soms complexe    eigen filter• transition:background-color .5s;• trans...
CSS3 demos• http://www.css3generator.com/• http://webdesignerwall.com/trends/css3-examples• http://webdesignerwall.com/tre...
HTML5 en CSS3 support• Browser support    http://www.findmebyip.com/litmus/•
Drupal html5 themes• Omega• Adaptivetheme• Zen v5
GRID SYSTEMS
Grid systemenProbleemstelling    –Gelijke en eenduidige marges    –Pagina opdeelbaar in 2,3,4,5 kolommen      met gelijke ...
Grid systemenhttp://www.smashingmagazine.com/2008/05/29/applying-divine-propCSS      Frameworks•http://en.wikipedia.org/...
Voordelen• Vertrekken van vaste basiscode (wiel niet heruitvinden)• Browser compatibiliteit: Herbruikbaarheid css en hacks...
Nadelen• Jij en iedereen die aan de site werkt moet  het framework kennen• Er is code die je niet gebruikt• Beperkingen in...
Samenstellingreset.csstypography.cssgrid.cssie.cssprint.cssforms.css
Reset: Tripoli & compressie* {margin:0; padding:0;}: traagEric Meyer:    http://meyerweb.com/eric/thoughts/2007/05/01/rese...
Blueprint• Framework:           http://blueprintcss.org• Tools:  ◦ http://kematzy.com/blueprint-generator  ◦ http://code.g...
960.gs• http://960.gs• Ook fluid: http://www.designinfluences.com/fluid960gs• En elastic  http://csswizardry.com/typogridp...
Drupal• Verschillende starter themes gebruiken 960.gs    ◦ http://drupal.org/project/ninesixty    ◦ http://drupal.org/proj...
RESPONSIVE DESIGNCSS3 MEDIA QUERIES
Responsive design• Layout aanpassen aan schermformaat• http://www.alistapart.com/articles/responsive-we• Basisprincipes   ...
Css3: Media queries<link rel="stylesheet" type="text/css"    media="screen and (max-device-width: 480px) and (resolution: ...
Browser support• Safari 3+, Chrome, Firefox 3.5+, IE9 en    Opera 7+• Javascript oplossingen    – http://plugins.jquery.co...
Fluid images• Schaalbare afbeeldingen• http://www.alistapart.com/articles/fluid-images/• Verkleinen:    http://drupal.org/...
Responsive grid layouts• Grids hebben voor en nadelen bij responsive   design• Adapt.js: http://adapt.960.gs• Rethinking c...
IE en responsive design• Afbeeldingen: bicubic resize• respond.js• http://www.ie6countdown.com En    http://www.theie7coun...
SPECIALE LETTERTYPES
Speciale lettertypes• Webfonts: Arial, Verdana,    – Css: font-family: Arial, Helvetica, sans-serif;    – Css: font-family...
Webfonts – Websafe fontsVeiligste fonts•   Arial / Helvetica•   Times New Roman / Times•   Courier New / CourierAnder cros...
Replacement technieken• Speciale fonts    – Via een image: moet alt tekst hebben voor        toegankelijkheid, niet dynami...
Flash: Sifr   – Flash: Sifr           • http://www.mikeindustries.com/blog/sifr           • http://www.sifrgenerator.com/w...
Javascript: Cufon• Via javascript: Cufon       – http://cufon.shoqolate.com/generate       – http://drupal.org/project/cuf...
Css @font-face• Geïntroduceerd in 1998, pas ondersteund door alle browsers in 2010 wegens     licentieproblemen.• Gratis f...
Css: gebruikInternet Explorer@font-face {    font-family: MyKievit;    src: url(/fonts/KievitWebPro-Medium.eot);{Firefox@f...
Browser supportFormaat       Firefox       Chrome       IE 6-8       IE9           Safari       IOS         Android       ...
@font-face kits• Bevat          – Eot, woff, ttf, svg• Waar?          – Gratis                     • www.fontsquirrel.com/...
@font-face in de praktijk@font-face {font-family: MyFontFamily;src: url(myfont-webfont.eot?) format(eot),    url(myfont-we...
NIEUWSBRIEF THEMING
Nieuwsbrieven• 3 voornaamste mogelijkheden  – Simplenews: eenvoudig en goedkoop, geen bounce    handling, beperkte statist...
Nieuwsbrief theming●   http://www.campaignmonitor.com/css/●   http://drupal.org/node/268404●   Probleem: css moet inline v...
Nieuwsbrief themeVia Themekey module: als ct nieuwsbrief of view  nieuwsbrief => Nieuwsbrief theme gebruiken• Nieuwsbrief ...
Nieuwsbrief theme• Views: <?php print    views_embed_view(nieuwsbrief_items,defau    lt); ?>• Reference field: <?php print...
Aanpak 2: via views• Nodequeue: Toevoegen aan nieuwsbrief• View: Nieuwsbrief op /nieuwsbrief• Nieuwsbrief = page - - nieuw...
Aanpak: Eigen inhoudstype• CT Nieuwsbrief    – Met velden voor fotos, tekst, links    – Reference fields voor lijsten
Simplenews theming●   simplenews-newsletter-body--1126.tpl.php●   simplenews-newsletter-footer--1126.tpl.php
THEMING VANUIT DE DRUPAL INTERFACE
Theming Alternatieven: Modules• Context: www.drupal.org/project/context• Panels: www.drupal.org/project/panels• Display Su...
PANELS
Panels: doel en historiek• Panels = layoutbuilder in Drupal• Earl Miles (Views)• Sony www.myplay.com• Versies 1,2,3• Toeko...
Panels: voordelen   – Point en click Drupal theming zonder html en php, templates opstellen via de interface   – Slechts 1...
Panels: nadelen• Performance: is heel grote module, wel goede caching opties• Kan complex zijn: is systeem op zich met lee...
Submodules en extra• Page Manager (bij ctools): page layouts (beetje    zoals page.tpl.php)• Mini panels: blok layouts• Pa...
Layouts• Standaardlayouts• Bepaalde themes definiëren extra layouts zoals Adaptive    Theme (AT) in d6• http://drupal.org/...
Variants• Andere layout voor zelfde pagina bij andere   voorwaarden    – Volgens content type: basic page er anders laten ...
Contexts• Arguments    – /taxonomy/term/%term    – /forum/%forum    – /music/beatles/th• Andere contexts    – Node auteur ...
MOCKUPS
MockupsModerne software voor Mockups   – Mockflow: http://www.mockflow.com   – Mockingbird: https://gomockingbird.com   – ...
DISPLAY SUITE
Filosofie achter Display Suite• Centraal beheer van layout van website inhoud• Template bestanden overbodig maken• Focus o...
Layout beheer met Drupal core• Mix van template bestanden en Field UI• Nadelen:    – Template bestanden zijn niet onderhou...
Layout beheer met DS• Bouwt verder op Field UI      – Nieuwe View Modes aanmaken      – Voorgedefinieerde layouts aanmaken...
DS layouts• Standaard: 11 layouts + Panel layouts• Eigen layout in theme:    – ds_layouts folder aanmaken    – ***.inc en ...
Correct Cssen met DS•   Beschikbare classes: Entity, eventueel Content Type, View mode en Groups. Voorbeeld:<div class="no...
Extras module• Field templates• Contextual links• Regions to block• Page title options• Views Displays• En veel meer!
Andere toepassingen• Zoekresultaten• Views slide show met meerdere content types• Oefening 4: slideshow opzetten: custom V...
Drupal7 Theming
Drupal7 Theming
Drupal7 Theming
Drupal7 Theming
Drupal7 Theming
Drupal7 Theming
Drupal7 Theming
Drupal7 Theming
Upcoming SlideShare
Loading in …5
×

Drupal7 Theming

4,740 views
4,564 views

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
4,740
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
38
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Drupal7 Theming

  1. 1. Drupal ThemingKrimsonHans Rossel en Jan-Yves Vanhaverbeke17/8/2011 en 14/9/2011Hans Rossel - hans.rossel@koba.be
  2. 2. Theme Documentation• Theme guide: http://drupal.org/theme-guide/6-7• Update modules: http://drupal.org/update/modules/6/7• Update themes: http://drupal.org/update/theme/6/7• Theme Forum: http://drupal.org/forum/3• Theme layer: http://drupal.org/node/933976• #drupal-themes on irc.freenode.net• http://lists.drupal.org/mailman/listinfo/themes
  3. 3. Hulpmiddelen• Firefox: Firebug, webdeveloper toolbar, pixelperfect, xrefresh, colorzilla, webaim• Devel en devel_themer
  4. 4. VoorbereidingWireframes Photoshop design
  5. 5. SchermformatenStandaard 1024x768• Favorieten open?• Bovenmenu aftrekken• Toolbar• Laptop widescreen• Mobile, nieuwere 1152x… >500 verschillende formaten• Verschillen mac/pc• Verschillen IE en FirefoxResponsive Webdesign: http://www.alistapart.com/articles/responsive-web-design/• Oude methode: javascript styleswitcher• Nieuw: media queries
  6. 6. Drupal 7 core Themes: Appearance
  7. 7. Theme folderCore: /themesContrib: /sites/all/themesCustom: /sites/default/themes (tenzij bij multisite dan idem contrib)
  8. 8. Soorten themes• Core• Contrib• Custom• Starter/base• Admin• Html5
  9. 9. SUBTHEME EEN THEME OP BASIS VANEEN ANDER THEME
  10. 10. Subthemevan een bestaand theme .info file: Toevoegen: base theme = garland of bartik Opgelet: Pas nooit rechtstreeks een core of ander theme aan. Voordeel om via base theme te werken is dat je updates van het base theme kunt implementeren.Starter themes zoals Zen en Fusion zijn specifiek ontwikkeld om als base theme gebruikt te worden.
  11. 11. Starter Themes• http://drupal.org/project/zen• www.drupal.org/project/fusion• www.drupal.org/project/adaptivetheme (html 5)• www.drupal.org/project/omega (html 5)• http://drupal.org/project/frameworkSpeciaal: clean html code• http://drupal.org/project/mothership: clean html• http://drupal.org/project/stark: drupal default markup
  12. 12. ZEN Theme● www.drupal.org/project/zen● Net als Garland gebaseerd op de http://www.positioniseverything.net/articles/jello.html Jello Mold techniek: negatieve marges● Voordelen ● Enorm goede documentatie in comments ● Extra functies (theme settings, block editing) ● Perfect full option hackable via subthemeHandleiding: http://drupal.org/node/226507
  13. 13. Mooie code, lelijk theme
  14. 14. Een Zen subtheme - #2265071.Kopieer STARTERKIT en hernoem het2..info: mijntheme.info + verwijzingen3.CSS 1.layout-liquid.css of layout-fixed.css → layout.css 2.zen.css → mijntheme.css 3.Optie: html-elements.css + ;weghalen uit .info file4.Kopieer tpl.php files indien gewenst
  15. 15. CSS Framework Starter Themescss frameworks zijn erg handig om snel complexe layouts te maken die standard compliant zijn. Bekende voorbeelden zijn www.blueprintcss.org en www.960.gs. Ze bestaan uit een reset css, rapid prototyping grid css en css voor standaard elementen. Bij Drupal vind je de volgende themes die hierop gebaseerd zijn:• http://drupal.org/project/fusion + skinr (bijvoorbeeld acquia marina theme of Acquia prosper shopping cart theme)• http://drupal.org/project/blueprint• http://drupal.org/project/ninesixty• http://drupal.org/project/ninesixtyfluid
  16. 16. Admin ThemesNu er erg wordt gewerkt aan het verbeteren van de User Experience en Usability van Drupal zijn er recent heel wat mooie admin themes beschikbaar. Ze zijn bedoeld als theme voor de backend van Drupal en je stelt ze in als beheertemplate. Zo krijg je een perfecte scheiding tussen backend en frontend.• http://drupal.org/project/admin (module!) – Rubik: icons: http://code.developmentseed.org/rubik – Tao base theme:http://code.developmentseed.org/tao• http://drupal.org/project/rootcandy• http://drupal.org/project/seven (backport van d7 theme)
  17. 17. Ontwerp je eigen subthemetemplate.php: theme function overrides die voor alle themes van belang zijnOvernemen zaken van andere starter themes:• Zen theme: body classes• Zen theme: tabs en messages• Tao: css reset
  18. 18. Standaardstijlen
  19. 19. EEN DRUPAL 7 THEME “FROM SCRATCH”
  20. 20. Theme CSS• Drupal voegt heel wat html met ids en classes toe. Probeer zoveel mogelijk met css op te lossen. De html wijzigen van Drupal is een stuk moeilijker.• Werk je html/css template niet volledig in detail af. Afwerking css van blokken, zoekbox, menus hou je best voor nadat je de template in Drupal hebt gebracht• Name collision: Drupal voegt html toe met .menu, .content, .links, .block. Gebruik die classes niet in je eigen template anders krijg je een conflict.
  21. 21. HTML/css Prototypewww.styleshout.com / www.oswd.org vectorlover html/css prototype http://www.styleshout.com/free-templates.php?page=2
  22. 22. .
  23. 23. Theme files.info (definition file)screenshot.pngCss, js, imagespage.tpl.php, node.tpl.php:• html met dynamische (php) stukkentemplate.php: (geavanceerde) php code
  24. 24. Regions regions[header] = Header regions[help] = Help (d6:$help) regions[page_top] = Page top (d6:$closure) regions[page_bottom] = Page bottom (d6:$closure) regions[highlight] = Highlighted (d6:$mission) regions[featured] = Featured regions[content] = Content (d7:main page content is block!) regions[sidebar_first] = Sidebar first (d6:left) regions[sidebar_second] = Sidebar second (d6:right) regions[footer] = Footer (d6:$footer_message) In D7: regions_hidden[] = naam van de regio die je wil verbergen in de blocks overview page (default zijn verborgen page_top en page_bottom) Blocks overview page: Demonstrate Block regions
  25. 25. Theme folder Maak folder: sites/default/themes/vectorlover Voeg je index.html, css, images van je statische template toe
  26. 26. .info fileMaak een vectorlover.info filename = vectorloverdescription = A very nice theme(package nooit gebruiken: Core themes hebben hier “core” in D7 zodat de update manager ze kan herkennen)version = 1.0core = 7.xengine = phptemplatestylesheets[all][] = css/vectorlover.cssstylesheets[all][] = css/custom.cssscripts[] = scripts/scripts.js
  27. 27. Template files• /modules/system – html.tpl.php : Bevat DOCTYPE, <head> met RDFa, page_top en page_bottom regions en de content region waarin page.tpl.php wordt geprint. Meestal ga je html.tpl.php niet overnemen in je eigen theme. Zie ook http://api.drupal.org/api/function/template_preprocess_html/7 om variabelen hiervan aan te passen. – page.tpl.php: <body> van index.html• Hernoem index.html naar page.tpl.php en verwijder alles behalve wat tussen de <body> tags zit
  28. 28. Theme activeren• screenshot.png toevoegen (294px × 219px)• Appearance tab: theme activeren• Telkens je een nieuw tpl.php bestand toevoegd aan een theme: clear theme registry – Clear cache button bij Performance settings – D7: drupal_theme_rebuild() in template.php (opgelet! Achteraf uitschakelen of serieuse problemen met performance) – Vinkje “Rebuild Theme Registry on every page” bij bepaalde themes
  29. 29. Theme Registryhttp://drupal.org/node/173880De theme registry moet leeggemaakt worden telkens als je een template file toevoegt (niet bij activatie theme)• Via Prestatie > Clear cache (alle cache!)• Via admin_menu of devel module link• Via drush cc (optie 2)
  30. 30. Functie clear theme registryWordt best conditioneel toegevoegd via een setting voor het theme. Performance problemen indien dit blij live site vergeten wordt uit te schakelen // Rebuild .info data. system_rebuild_theme_data(); // Rebuild theme registry. drupal_theme_rebuild();
  31. 31. Dynamische contentcopiëren en plakken
  32. 32. First sidebar (zijkolomregio)• Alle regios die je definieert in je .info bestand moeten geprint worden in html.tpl.php en page.tpl.php om hun juiste plaats op de pagina te bekomen.
  33. 33. Main menu (hoofdnavigatie)• To meet Web Content Accessibility Guidelines (WCAG) requirements, HTML headings should be used before all content sections, which includes lists of links such as menus. The headers ensure that there is a quick way for assistive technology users to browse through the content
  34. 34. Variabelen• Heel wat beschikbare variabelen• Bekijken via devel of print_r($vars) in template• Definitie van de variabelen in includes/theme.inc en de respectievelijke modules
  35. 35. THEME AANPASSEN OP MAAT
  36. 36. CSS in Drupal themes• Vermijd overlapping van css classes door .content, .menu, .links, .block niet te gebruiken• Drupal heeft reeds enorm veel classes en ids voorgedefinieerd, oa body classes die al heel wat context leveren om te stylen• Via bepaalde modules kunnen extra css classes toegevoegd worden via de interface: views, ds, ...
  37. 37. Css aanpassen• Stylesheet toevoegen in (sub) theme via .info file• drupal_add_css om (conditioneel) css toe te voegen via template.php of een module• hook_css_alter om css aan te passen
  38. 38. Css toevoegen via .info; Add a style sheet for all mediastylesheets[all][] = theStyle.css; Add a style sheet for screen and projection mediastylesheets[screen, projection][] = theScreenProjectionStyle.css; Add a style sheet for print mediastylesheets[print][] = thePrintStyle.css
  39. 39. Media queries.info filestylesheets[screen and (max-width: 600px)][] = screen-600.cssIn css bestand:@media screen and (max-device-width: 600px) { //aanpassingen voor kleine toestellen}
  40. 40. .element-invisible in Bartik
  41. 41. Accessibility: Css clipProbleem: hide content except for screen-readers• display:none maakt de content onzichtbaar voor screen-readers• Negative text-indent heeft problemen met RTL talen.element-invisible { clip:rect(1px, 1px, 1px, 1px); position:absolute !important;}Achtergrond:http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hiding-content
  42. 42. drupal_add_css• http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_css/7• drupal_add_css(path_to_theme() . /css/ie/ie-7.css, array(group => CSS_THEME, weight => 115, browsers => array(IE => lte IE 7, !IE => FALSE), preprocess => FALSE));• drupal_add_css(drupal_get_path(module, dashboard) . /dashboard.css);
  43. 43. Verwijzen naar actieve theme• In template $directory• path_to_theme()• drupal_get_path(theme, bartik)
  44. 44. Reset css• Nodig? http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm• Reset.css + base.css• Alternatief: normalize.css, initial.css, html5 boilerplate• Dient eerst te komendrupal_add_css(path_to_theme() . /css/reset.css, array(group => CSS_SYSTEM - 1, preprocess => FALSE));
  45. 45. IE css template.php (example Bartik theme) Gebruik: functie abc_preprocess_html(&$vars)
  46. 46. IE css via module• Issue: in .info file? Zie http://drupal.org/node/522006• Via module: http://drupal.org/project/conditional_styles – stylesheets-conditional[lt IE 7][all][] = ie6-and- below.css – stylesheets-conditional[IE 9][all][] = ie9.css – stylesheets-conditional[IE][print][] = ie-print.css
  47. 47. Hook_css_alterhttp://api.drupal.org/api/drupal/modules--system--system.api.php/function/hook_css_alter/7<?phpfunction abc_css_alter(&$css) { // Remove defaults.css file. unset($css[drupal_get_path(module, system) . /defaults.css]);}?>
  48. 48. hook_css_alter
  49. 49. Remove multiple css files<?phpfunction THEMENAME_css_alter(&$css) { $exclude = array( misc/vertical-tabs.css => FALSE, modules/aggregator/aggregator.css => FALSE, sites/all/modules/date/date_popup/themes/datepicker.1.7.css => FALSE, misc/ui/jquery.ui.theme.css => FALSE, ); $css = array_diff_key($css, $exclude);}?>
  50. 50. Override css/*** Implements hook_css_alter().*/function seven_css_alter(&$css) { // Use Sevens vertical tabs style instead of the default one. if (isset($css[misc/vertical-tabs.css])) { $css[misc/vertical-tabs.css][data] = drupal_get_path(theme, seven) . /vertical-tabs.css; } if (isset($css[misc/vertical-tabs-rtl.css])) { $css[misc/vertical-tabs-rtl.css][data] = drupal_get_path(theme, seven) . /vertical-tabs-rtl.css; } // Use Sevens jQuery UI theme style instead of the default one. if (isset($css[misc/ui/jquery.ui.theme.css])) { $css[misc/ui/jquery.ui.theme.css][data] = drupal_get_path(theme, seven) . /jquery.ui.theme.css; }}
  51. 51. HTML Aanpassen• Via .tpl.php file: template file aanpassen of dupliceren in een template suggestion• Via theme_ functie in template.php: function override• Via preprocess en process functies in template.php: variabelen aanpassen
  52. 52. tpl.php files in d7
  53. 53. HTML wijzigenTemplate overrides• Copieer om het even welk tpl.php bestand dat je vindt in een module naar je de map van je theme• Doe aanpassingen in de html naar wens• Maak de cache (theme registry) leegVoorbeeld:search-result.tpl.php in /modules/search
  54. 54. page.tpl.phpFrontpage page--front.tpl.phpVermijd zoveel mogelijk meerdere page.tpl.php templates te hebben. Gebruik css of preprocess variabelen in template.php.Op pad (url geen alias)page--node-edit.tpl.php of page--node-add.tpl.php > page--node-1.tpl.php > page--node.tpl.php > page.tpl.phppage--blog.tpl.php, page--viewpagename.tpl.php, page--admin.tpl.php, page--admin-build-block.tpl.php, page-- civicrm.tpl.php, page--googlemap.tpl.phpNieuw in D7: % integer wildcard page--user.tpl.php > page--user--%.tpl.php > page--user--1.tpl.php
  55. 55. node.tpl.phpCopieer de originele node.tpl.php van /modules/nodePer content typenode--blog.tpl.phpnode--forum.tpl.phpnode--page.tpl.phpnode--ccknews-content-type.tpl.phpD6: Opgelet: je moet steeds een gewoon node.tpl.php bestand hebben in je theme folder als je het wil overriden. In D7 deze bug is opgelost.
  56. 56. Block template files
  57. 57. block.tpl.phpblock.tpl.phpblock--region.tpl.phpblock--module.tpl.phpBlock--module--delta.tpl.php
  58. 58. Belangrijkste andere tpl.php● ● region.tpl.php ● maintainance-page.tpl.php● In /modules/system ● html.tpl.php●In /modules/node ● node.tpl.php●In /modules/field ● field.tpl.php●In ● comment.tpl.php/modules/comment● In /modules/block ● Block.tpl.php
  59. 59. Theme hook suggestionsfunction abc_preprocess_page(&$vars, $hook) { print_r($vars[theme_hook_suggestions]);}Array ( [0] => page__node [1] => page__node__% [2] => page__node__1)
  60. 60. Theme function overrides
  61. 61. HTML wijzigen viaTheme overridesAls er geen tpl.php beschikbaar is, dan zit de html in een theme_ functie• Zoek de theme_functie in je module of via api.drupal.org, api.lullabot.com of http://drupalcontrib.org (contrib)• Copieer en plak de functie in template.php en vervang theme_ met naamvanjetheme_ (niet meer phptemplate_ zoals in D6)• Pas de html aan naar wens
  62. 62. theme_breadcrumb()
  63. 63. theme_breadcrumb()
  64. 64. BASIS THEME FUNCTIES
  65. 65. Themeable functionsHandige functies voor links, lijsten, … – http://api.drupal.org/api/group/themeable/6
  66. 66. L functie: een link maken● http://api.drupal.org/api/drupal/includes--common.inc/function● Vorm: l($text, $path, $options = array());● Eenvoudig voorbeeldl(t(klik hier), “node/1”);● Voorbeeld uit blog modulel(t(View recent blog entries), "blog/$user->uid", array(attributes => array(title => t("Read @usernames latest blog entries.", array(@username => $user->name)))));
  67. 67. theme_item_list: een lijst● http://api.drupal.org/api/function/theme_item_list/6● Vorm: theme_item_list($items = array(), $title = NULL, $type = ul, $attributes = NULL)● Voorbeeld <?php $items = array(jan,piet,joris); print theme(item_list, $items, NULL, ul, array(class => mijn-lijst, id => de-lijst)) ?>
  68. 68. theme_links● http://api.drupal.org/api/function/theme_links/6● Vorm: theme_links($links, $attributes = array(class => links))● Voorbeeld theme(links, $primary_links, array(class => links primary- links, id => primary))
  69. 69. Preprocess en process functies
  70. 70. Template.php
  71. 71. Drupal paden, classes voor css Standaard: node/nid Opvragen via: http://api.drupal.org/api/drupal/includes--bootstrap.inc/ Voorbeeld  Drupal path: node/11  <?php print arg(0); ?> geeft node  <?php print arg(1); ?> geeft 11<?php if (arg(2) == edit) { echo $content; }
  72. 72. Node controlerenfunction themename_preprocess_page(&$variables) { $variables[ifnode] = ( (arg(0) == node) && is_numeric(arg(1)) ) && (arg(2) != edit || arg(2) != delete);}
  73. 73. hook_preprocess_html
  74. 74. hook_preprocess_html
  75. 75. hook_preprocess_html
  76. 76. hook_html_head_alter()
  77. 77. hook_html_head_alter()
  78. 78. hook_html_head_alter()
  79. 79. hook_html_head_alter()
  80. 80. hook_preprocess_page
  81. 81. hook_preprocess_page
  82. 82. hook_preprocess_page
  83. 83. Nieuwsbrief tpl.php/* * Newsletter: make separate template files for html and page if node type is nieuwsbrief */function vai_preprocess_page(&$variables) { if ($variables[node]->type == nieuwsbrief) { $variables[theme_hook_suggestions][] = page__nieuwsbrief; }}
  84. 84. hook_preprocess_page
  85. 85. hook_preprocess_node
  86. 86. hook_preprocess_node
  87. 87. hook_preprocess_node
  88. 88. hook_preprocess_node
  89. 89. hook_preprocess_node
  90. 90. hook_preprocess_node
  91. 91. hook_process_node
  92. 92. hook_preprocess_block()
  93. 93. Theme hook suggestions voorblockin hook_preprocess_block
  94. 94. Block admin paginafunction seven_preprocess_block_admin_display_form(&$vars) { // List of modules which are allowed on the block page $show = array( block, ); // Scan through each disabled block entry and remove ones that arent needed. foreach ($vars[block_listing][-1] as $key => $disabled) { $type = explode(_, $key); if (!in_array($type[0], $show)) { unset($vars[block_listing][-1][$key]); } }}
  95. 95. URL Aliassen opvragenZie: http://api.drupal.org/api/drupal/includes--path.inc/function/drupal_get_path_alias/7 en http://www.php.net/manual/en/reserved.variables.get.php<?php // $_GET[q] geeft node/nid en explode() splitst de string op bij / en plaatst de stukken in een array $path_pieces = explode(/, drupal_get_path_alias($_GET[q])); // dus als het pad is /abc/def, $path_pieces is dan Array ( [0] => abc, [1] => def ) // Dus, $path_pieces[0] geeft abc print $path_pieces[0];?>Mogelijkheden:• Via preprocess toevoegen aan body classes
  96. 96. Render API
  97. 97. Render API• $page array bevat regios, blokken, ...: flexibel spelen met content via hook_page_alter()• Meer info – http://www.archive.org/details/ExplorethegloryofDrupal7simprovedren – http://www.archive.org/details/PageRenderDrillDownInDrupal7
  98. 98. Render api &hook_page_alterhttp://api.drupal.org/api/function/hook_page_alter/7 • Naar voorbeeld van de FormAPI: meer flexibiliteit en mogelijkheid om zaken te wijzigen in regios en blokken net voor de pagina gerenderd wordt, hele page is 1 array
  99. 99. Render() toepassingen• Voorbeelden – Regios en blokken wijzigen met module • Voorbeeld: een blok dupliceren in een tweede regio • Node links in een sidebar tonen • Banner ad toevoegen aan comment listing – Volgorde van elementen wijzigen• Bekijken – Devel module: show page array – print_r($page);•
  100. 100. functionabc_page_alter(&$page) {
  101. 101. hook_page_alter
  102. 102. THEME SWITCHING
  103. 103. Theme switching in settings.phptheme_default: Defines the default theme for this site.- $conf[theme_default] = garland;A custom theme can be set for the offline page.- $conf[maintenance_theme] = bartik;
  104. 104. Theme wisselen volgens urlIn settings.php// if the url is an administration pageif (strpos($_GET[q], admin) === 0) { $conf[theme_default] = garland;}
  105. 105. Mobile theme$parts = explode(., $_SERVER[HTTP_HOST]);if ($parts[0] == mobile) { $GLOBALS[theme_default] = mobile;}
  106. 106. IE6 theme$user_agent = $_SERVER[HTTP_USER_AGENT]; if($user_agent) { if ((strpos($user_agent, MSIE 6.0)) && (strpos($_GET[q], user) === 0)){ $conf[theme_default] = garland; } }
  107. 107. Theme Key module• Heel flexibele module voor het wisselen theme onder bepaalde voorwaarden – Tijd: speciaal theme voor bepaalde dagen – User: ander theme voor user of rol – Browser: ander theme voor IE6 – Mobile theme, Mobilekey module• http://kalki.de/en/howto/themekey-tutorials.htm
  108. 108. Mobile themes• App – Titanium/phonegap via html5,css3,js• Aparte site – Multisite installatie – Mobile tools module: mobile rol, ... – Jquery mobile: touch optimized framework – Detectie: Browscap en wurfl• Responsive design: flexible images
  109. 109. THEME SETTINGS
  110. 110. Theme settings• Drupal.org: http://drupal.org/node/177868• Op admin/appearance/settings/themeName kunnen voor het theme extra settings worden voorzien• Voordeel: hergebruik in andere themes => gebruiken in base theme
  111. 111. Rebuild Theme Registry
  112. 112. Default settings in .info file• settings[abc_breadcrumb] = yes• settings[abc_breadcrumb_separator] = › • settings[abc_rebuild_registry] = 0
  113. 113. hook_form_system_theme_settings_alter• Is een hook_FORM_ID_alter implementatie• Gebruikt in theme-settings.php
  114. 114. theme-settings.php
  115. 115. THEME SECURITY
  116. 116. Theme security• check_plain()• check_url()• check_markup()• filter_xss_admindrupal_set_title($node->title); // Incorrectdrupal_set_title(check_plain($node->title)); // Correct
  117. 117. Front end Performance
  118. 118. Front-end performance• Css en js aggregatie• Image styles, smush.it• Css sprites• drupal_add_css en drupal_add_js: selectief css en js toevoegen• Yslow en Google PageSpeed• http://wimleers.com/article/improving-drupals-pa
  119. 119. Views Theming
  120. 120. Voorbeeld: Views slideshow• http://drupal.org/project/views_slideshow• Toepassing: – Fotogalerij – Dynamic Display block
  121. 121. Views templates• Basistemplates in de views module folder• Theme Information link in de view zelf geeft suggesties voor tpl.php files specifiek voor deze view• Theme developer via Devel module: bekijken suggesties live• Er zijn ook theme_ functies beschikbaar voor views, maar handiger via tpl.php
  122. 122. Een view beïnvloeden1) Met de template files views-view.tpl.php(opvragen via de “information link”)2) Met een hook vbhook_views_admin_links_alter3) Tijdens het embedden van de view $view->hide_admin_links
  123. 123. Views embedden met module• http://drupal.org/project/viewfield• http://drupal.org/project/insert_view
  124. 124. Eenvoudig views embedden<?php echo views_embed_view(most_recent_post, default); ? ><?php echo views_embed_view(nieuws, block_1); ?><?php print views_embed_view(calendar, calendar_block_1); ?>
  125. 125. Views embedden alternatief$view = views_get_view($view_name); $view->set_arguments(array(0 => all, 1 => typeb)); // if you have args $view->set_items_per_page(0); // Aantal resultaten print $view->execute_display(0, $args); // default view, include $argsparam if using
  126. 126. Geavanceerd embedden viablok<?php$view = views_get_view(Publicaties);//print <pre>;//print_r($view);//print </pre>;$view->set_display(block_1);$view->display_handler->set_option(items_per_page, 2);$view->set_arguments(args...);$title = $view->get_title();$output = $view->preview();print <h2> . $title . </h2>;print $output;?>
  127. 127. FIELDS THEMING
  128. 128. Theming fieldsIndividuele velden kunnen gethemed worden via field.tpl.php• field.tpl.php• field--field-type.tpl.php• field--field-name.tpl.php• field--content-type.tpl.php• field--field-name--content-type.tpl.php
  129. 129. Theme image styleshttp://api.drupal.org/api/drupal/modules--image--image.module/functioprint theme(image_style, array( path => $field_gallery_image[de][0][uri], style_name => gallery_thumbnail));
  130. 130. Theme image stylesProbleem/bug: width/height van imageshttp://drupal.org/node/908282http://drupal.org/node/1129642Manueel hoogtes specifierentheme(image_style, array(style_name => desthumb, path => $image0path, getsize => TRUE, attributes => array(class => thumb, width => 150, height => 162)));Tijdelijke workaround:http://api.drupal.org/api/drupal/modules--image--image.module/functio
  131. 131. FORMS THEMING
  132. 132. Form themingHet themen van forms kan via hook_FORM_ID_alter()Er zijn ook enkele modules die je kunnen helpen een pak zaken zonder code te doen: Display Suite, Panels, Nodeformcolumns
  133. 133. hook_FORM_ID_alter/** * Implements hook_form_ID_alter(). */function abc_form_comment_form_alter(&$form, &$form_state) { // dpm($form); $form[notify_settings][notify_type][#prefix] = <div class="container-inline clearfix">; $form[notify_settings][notify_type][#suffix] = </div>;}
  134. 134. hook_FORM_ID_alter/** * Implements hook_form_ID_alter(). */function abc_form_user_login_block_alter(&$form, &$form_state) { $form[links][#prefix] = <div class="login-links container-inline clearfix">; $form[links][#suffix] = </div>;}
  135. 135. HTML5 en CSS3
  136. 136. Nieuwe mogelijkheden• Vereenvoudigde html (niet meer xml gebaseerd)• Nieuwe structuurelementen: <header><footer><section><article><nav><asi de>• Nieuwe formelementen: input type=email, url, date, time, month, week, number, range, search, tel, color. Voordeel: er kan een gebruiksvriendelijke widget worden voorzien
  137. 137. Nieuwe mogelijkheden• Video: <video>• Canvas: http://canvaspaint.org• Data storage: localstorage 5MB en web sql database api• Offline: cache manifest• Drag and drop (js)• Location api (js, niet echt html5)
  138. 138. CSS3• Voor oudere versies -moz en -webkit nodig. IE soms complexe eigen filter• transition:background-color .5s;• transition:z-index .5s, opacity .5s;• border-radius:3px;• box-shadow:inset rgba(0,0,0,.75) 0px 0px 10px;• Text-shadow• Gradients: http://www.colorzilla.com/gradient-editor/
  139. 139. CSS3 demos• http://www.css3generator.com/• http://webdesignerwall.com/trends/css3-examples• http://webdesignerwall.com/trends/47-amazing-cs•
  140. 140. HTML5 en CSS3 support• Browser support http://www.findmebyip.com/litmus/•
  141. 141. Drupal html5 themes• Omega• Adaptivetheme• Zen v5
  142. 142. GRID SYSTEMS
  143. 143. Grid systemenProbleemstelling –Gelijke en eenduidige marges –Pagina opdeelbaar in 2,3,4,5 kolommen met gelijke margesZelf berekenen –http://gridulator.com/
  144. 144. Grid systemenhttp://www.smashingmagazine.com/2008/05/29/applying-divine-propCSS Frameworks•http://en.wikipedia.org/wiki/List_of_CSS_frameworks•http://960.gs: 960px met 12 of 16 kolommen en 20px margin•http://www.blueprintcss.org: 950px met 24 kolommen en 10px margin•YAML: http://www.yaml.de/en•YUI Grids: http://developer.yahoo.com/yui/grids
  145. 145. Voordelen• Vertrekken van vaste basiscode (wiel niet heruitvinden)• Browser compatibiliteit: Herbruikbaarheid css en hacks voor IE6 (en zelfs IE5, maar als zelfs msn.com die niet meer respecteert...)• Professionele grid structuur• Flexibele voorgedefinieerde classes voor basiselementen: lijsten, tabellen, forms• Sneller werken, rapid prototyping (ipv wireframing) opstellen van mock-ups• Clean code• Klein <5kb• Iphone viewport is 960px
  146. 146. Nadelen• Jij en iedereen die aan de site werkt moet het framework kennen• Er is code die je niet gebruikt• Beperkingen in design ◦ De xhtml layout zou moeten gebaseerd zijn op het design, niet omgekeerd ◦ Fixed width vb 960px, voor 1280px schermen wil je soms 960px + extra niet belangrijke kolom (reclame)
  147. 147. Samenstellingreset.csstypography.cssgrid.cssie.cssprint.cssforms.css
  148. 148. Reset: Tripoli & compressie* {margin:0; padding:0;}: traagEric Meyer: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloadedTripoli: http://devkick.com/lab/tripoli/• Compatibel met Windows: IE5, IE5.5, IE6, IE7, IE8, Opera 8, Opera 9, Safari, Firefox 2, Firefox 3, OS X: IE5, Firefox 2, Firefox 3, Safari 2, Safari 3, Camino
  149. 149. Blueprint• Framework: http://blueprintcss.org• Tools: ◦ http://kematzy.com/blueprint-generator ◦ http://code.google.com/p/blueprintcss/wiki/Tools• Plugins ◦ In core: Fancy Type, RTL (right-to-left text and column layout support), Buttons, Link Icons (bestandstypes, external, ...) ◦ Tabs:http://github.com/Montoya/blueprint-plugin---tabs/tree/master ◦ Liquid: http://github.com/Montoya/blueprint-plugin---liquidgrid/tree/master ◦ Silk icons: http://github.com/Montoya/blueprint-plugin---silksprite/tree/master Voorbeeld: http://nettuts.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/
  150. 150. 960.gs• http://960.gs• Ook fluid: http://www.designinfluences.com/fluid960gs• En elastic http://csswizardry.com/typogridphy• Uitgewerkt voorbeeld: http://nettuts.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework
  151. 151. Drupal• Verschillende starter themes gebruiken 960.gs ◦ http://drupal.org/project/ninesixty ◦ http://drupal.org/project/fusion
  152. 152. RESPONSIVE DESIGNCSS3 MEDIA QUERIES
  153. 153. Responsive design• Layout aanpassen aan schermformaat• http://www.alistapart.com/articles/responsive-we• Basisprincipes – Procentueel werken (elastic layout) – Media queries – Fluid images – Aantal kolommen verminderen bij kleinere schermen
  154. 154. Css3: Media queries<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />@media screen and (max-width: 600px) { .footer { float: none; width: auto; }}
  155. 155. Browser support• Safari 3+, Chrome, Firefox 3.5+, IE9 en Opera 7+• Javascript oplossingen – http://plugins.jquery.com/project/MediaQueries – http://code.google.com/p/css3-mediaqueries-js/ – https://github.com/scottjehl/Respond
  156. 156. Fluid images• Schaalbare afbeeldingen• http://www.alistapart.com/articles/fluid-images/• Verkleinen: http://drupal.org/project/responsive_imagesimg { max-width: 100%;}
  157. 157. Responsive grid layouts• Grids hebben voor en nadelen bij responsive design• Adapt.js: http://adapt.960.gs• Rethinking css grids (toekomstige layouttechnieken): http://www.markboulton.co.uk/journal/commen
  158. 158. IE en responsive design• Afbeeldingen: bicubic resize• respond.js• http://www.ie6countdown.com En http://www.theie7countdown.com• Geen IE6 support in core themes van Drupal 8
  159. 159. SPECIALE LETTERTYPES
  160. 160. Speciale lettertypes• Webfonts: Arial, Verdana, – Css: font-family: Arial, Helvetica, sans-serif; – Css: font-family: Times New Roman, Times, serif• Speciale fonts – Zijn niet aanwezig op elke computer – Fontbedrijven terughoudend omwille van licenties
  161. 161. Webfonts – Websafe fontsVeiligste fonts• Arial / Helvetica• Times New Roman / Times• Courier New / CourierAnder cross platform• Verdana• Georgia• Comic Sans MS• Trebuchet MS• Arial Black• ImpactPalatino• Garamond• Bookman• Avant Garde
  162. 162. Replacement technieken• Speciale fonts – Via een image: moet alt tekst hebben voor toegankelijkheid, niet dynamisch vanuit cms – Flash – Javascript – Css
  163. 163. Flash: Sifr – Flash: Sifr • http://www.mikeindustries.com/blog/sifr • http://www.sifrgenerator.com/wizard.html • http://drupal.org/project/sifr – Opmerkingen • Toegankelijkheid is in orde vermits er in de code gewoon html <h1> etc wordt gebruikt • Browser moet Flash ondersteunen (iphone/ipad niet) • Ad-blockers kunnen de weergave blokkeren • Traag: behoorlijk wat Flash, css en js code te genereren, enkel voor titels, niet voor volle tekst • Letters niet heel zuivere randen
  164. 164. Javascript: Cufon• Via javascript: Cufon – http://cufon.shoqolate.com/generate – http://drupal.org/project/cufon• Opmerkingen – Heel goed opletten met welke lettertekens je toelaat, teveel is nadelig voor performantie, te weinig laat letters met accenten niet verschijnen – Internet Explorer is traag in javascript dus traag in Cufon – Hoe meer lettertypes je gebruikt hoe meer javascript moet geladen worden per pagina – Lettertypes niet heel zuivere randen
  165. 165. Css @font-face• Geïntroduceerd in 1998, pas ondersteund door alle browsers in 2010 wegens licentieproblemen.• Gratis fonts – http://www.google.com/webfonts – http://www.fontsquirrel.com – http://www.theleagueofmoveabletype.com/• Formaten: – Ttf: True Type, standaard desktop formaat – Woff: Web Open Font Format, zou moeten de standaard worden – Eot: Embedded Open Type, ttf verpakt in DRM, enkele Microsoft – Svg: Scalable Vector Graphics, oudere iphones
  166. 166. Css: gebruikInternet Explorer@font-face { font-family: MyKievit; src: url(/fonts/KievitWebPro-Medium.eot);{Firefox@font-face { font-family: MyKievit; src: url(/fonts/KievitWebPro-Medium.woff) format(woff);{body { font-family: MyKievit, Arial, sans-serif; }
  167. 167. Browser supportFormaat Firefox Chrome IE 6-8 IE9 Safari IOS Android 3.6+ 6+ 3.1+ 2.2EOT x xTTF x x x X (>4.2) xSVG x X (<4.2)WOFF x x x • Bron: http://www.webfonts.info/wiki/index.php?title=@font-face_browser_support
  168. 168. @font-face kits• Bevat – Eot, woff, ttf, svg• Waar? – Gratis • www.fontsquirrel.com/fontface • www.fontsquirrel.com/fontface/generator – Betalend: • http://www.fontspring.com/fontface: als kit • www.typekit.com, www.fonts.com, www.fontslive.com, www.fontdeck.com, www.web-type.com: als abonnement, hosted service, licencing ok, eenvoudig codesnippet compatibel met alle browsers, goedkoper want enkel webdeel van font gekocht, betalen per pageviews of per font.
  169. 169. @font-face in de praktijk@font-face {font-family: MyFontFamily;src: url(myfont-webfont.eot?) format(eot), url(myfont-webfont.woff) format(woff), url(myfont-webfont.ttf) format(truetype), url(myfont-webfont.svg#svgFontName) format(svg);}Browser support: Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11Bron: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
  170. 170. NIEUWSBRIEF THEMING
  171. 171. Nieuwsbrieven• 3 voornaamste mogelijkheden – Simplenews: eenvoudig en goedkoop, geen bounce handling, beperkte statistieken, problemen met server gemarkeerd als spamserver – Campaignmonitor of Mailchimp integratie: full bounce handling, statistieken, whitelisting, betalend maar Mailchimp tot 1000 abonnees gratis! – Civimail (onderdeel van Civicrm): mailings, bounce handling, goed systeem
  172. 172. Nieuwsbrief theming● http://www.campaignmonitor.com/css/● http://drupal.org/node/268404● Probleem: css moet inline voor webclients (gmail, yahoo, hotmail) – Views templates maken voor onderdelen – Automatisch: Emogrifier (htmlmail), Mime Mail CSS Compressor (mimemail) – Display suite
  173. 173. Nieuwsbrief themeVia Themekey module: als ct nieuwsbrief of view nieuwsbrief => Nieuwsbrief theme gebruiken• Nieuwsbrief theme – Geen html5 en andere moderne zaken, terug naar de nineties! – Sterk vereenvoudigde html.tpl.php: geen css en js printen – Sterk vereenvoudigde page.tpl.php: enkel tabel
  174. 174. Nieuwsbrief theme• Views: <?php print views_embed_view(nieuwsbrief_items,defau lt); ?>• Reference field: <?php print render($content[field_nb_architectuurnieuws ]); ?>• Veld: <?php print check_url($node- >field_nb_subfoto1_linkt[und][0][url]); ?>
  175. 175. Aanpak 2: via views• Nodequeue: Toevoegen aan nieuwsbrief• View: Nieuwsbrief op /nieuwsbrief• Nieuwsbrief = page - - nieuwsbrief.tpl.php – Views_embed_view(eersteview); – views_embed_view(tweedeview);• Nadeel: geen inleiding, archief via Mailchimp
  176. 176. Aanpak: Eigen inhoudstype• CT Nieuwsbrief – Met velden voor fotos, tekst, links – Reference fields voor lijsten
  177. 177. Simplenews theming● simplenews-newsletter-body--1126.tpl.php● simplenews-newsletter-footer--1126.tpl.php
  178. 178. THEMING VANUIT DE DRUPAL INTERFACE
  179. 179. Theming Alternatieven: Modules• Context: www.drupal.org/project/context• Panels: www.drupal.org/project/panels• Display Suite: www.drupal.org/project/ds• Sweaver: www.drupal.org/project/sweaver
  180. 180. PANELS
  181. 181. Panels: doel en historiek• Panels = layoutbuilder in Drupal• Earl Miles (Views)• Sony www.myplay.com• Versies 1,2,3• Toekomst: Drupal 8 misschien een eenvoudige panels achtige interface voor toevoegen van content in Drupal core• Documentatie: http://drupal.org/node/496278
  182. 182. Panels: voordelen – Point en click Drupal theming zonder html en php, templates opstellen via de interface – Slechts 1 soort inhoudsobject: panel waarin blokken, menus, views, velden, ... kunnen weergegeven worden => alles eenvormig op dezelfde manier behandelen – Complexe pagina layouts mogelijk zonder voorkennis van html/css – Flexibeler layouts: vb zelfde blok in verschillende regios, ... – Makkelijker en sneller wijzigingen aanbrengen aan templates – Ctools: vastleggen van layouts in exportables en features => exporteerbaar dus hergebruikbaar en opgenomen in svn/git revisiesysteem. – Varianten: andere soorten layouts volgens context, vb ingelogde klanten/leden, mobiele website – Integreert heel goed met views
  183. 183. Panels: nadelen• Performance: is heel grote module, wel goede caching opties• Kan complex zijn: is systeem op zich met leercurve en heel veel checkboxen• Werkt behoorlijk anders dan “the Drupal way” => bloksysteem en regios uitschakelen (vinkje)• Alles of niets: als je panels gebruikt het voor alles gebruiken• Moeilijker te debuggen• Soms trage upgrade bij nieuwe versie van dr http://www.youtube.com/watch?v=qBGKdnUj4Ywupal core , en upgrades tussen v1, 2 en 3 waren niet vanzelfsprekend, maar ondertussen heel veel gebruikt (> 80.000 installs)• Overladen html tenzij je eigen custom templates opstelt
  184. 184. Submodules en extra• Page Manager (bij ctools): page layouts (beetje zoals page.tpl.php)• Mini panels: blok layouts• Panel nodes: node layouts• Views content panes: views in panels• Panels Everywhere
  185. 185. Layouts• Standaardlayouts• Bepaalde themes definiëren extra layouts zoals Adaptive Theme (AT) in d6• http://drupal.org/project/panels_extra_layouts: extra layouts:• Best: eigen html templates voor layout – Advanced help module: help/panels/plugins-layout – tpl.php, css, inc en png – Meer docs: http://drupal.org/node/495654
  186. 186. Variants• Andere layout voor zelfde pagina bij andere voorwaarden – Volgens content type: basic page er anders laten uitzien dan artikels – Volgens toegangsrol: admin, ingelogden, leden/klanten zien iets anders – Volgens taal – Volgens trefwoord, ... – Mobile themes dank zij integratie met de http://drupal.org/project/mobile_tools module
  187. 187. Contexts• Arguments – /taxonomy/term/%term – /forum/%forum – /music/beatles/th• Andere contexts – Node auteur – Node reference
  188. 188. MOCKUPS
  189. 189. MockupsModerne software voor Mockups – Mockflow: http://www.mockflow.com – Mockingbird: https://gomockingbird.com – Balsamiq: http://balsamiq.com
  190. 190. DISPLAY SUITE
  191. 191. Filosofie achter Display Suite• Centraal beheer van layout van website inhoud• Template bestanden overbodig maken• Focus op gebruiksvriendelijkheid• Gebruik van PHP beperken = betere veiligheid
  192. 192. Layout beheer met Drupal core• Mix van template bestanden en Field UI• Nadelen: – Template bestanden zijn niet onderhoudbaar – Field UI is beperkt: • Geen UI om extra velden toe te voegen (vb. titel, auteur) • Geen UI om extra View Modes toe te voegen • Inconsistent: Search result View Mode • Geen gebruik van voorgedefinieerde layouts
  193. 193. Layout beheer met DS• Bouwt verder op Field UI – Nieuwe View Modes aanmaken – Voorgedefinieerde layouts aanmaken – Eigen velden toevoegen• Integratie met Views en Panels• Werkt op elke Drupal Entity (Node, gebruiker etc)• Consistente HTML output• Oefening 1: DS aanzetten en Node en Teaser layout wijzigen
  194. 194. DS layouts• Standaard: 11 layouts + Panel layouts• Eigen layout in theme: – ds_layouts folder aanmaken – ***.inc en ***.tpl.php bestanden verplicht – ***.css optioneel – Voorbeeld: ds.api.php lijn 356. – Oefening 2: Eigen layout met 3 rijen in theme toevoegen
  195. 195. Correct Cssen met DS• Beschikbare classes: Entity, eventueel Content Type, View mode en Groups. Voorbeeld:<div class="node node-article view-mode-teaser"> <div class="group-header"> <h2>Lorem ipsum</h2> </div> <div class="group-middle"> <p>Lorem ipsum.</p> </div> </div>• Zo generiek mogelijk, indien nodig specifieker:.view-mode-teaser .group-header {} .node.view-mode-teaser .group-header {} .node-article.view-mode-teaser .group-header {}• Werk zoveel mogelijk op DS classes ipv HTML van andere modules• Oefening 3: css schrijven voor ?
  196. 196. Extras module• Field templates• Contextual links• Regions to block• Page title options• Views Displays• En veel meer!
  197. 197. Andere toepassingen• Zoekresultaten• Views slide show met meerdere content types• Oefening 4: slideshow opzetten: custom View mode en voor alle content types instellen.

×