Drupal 7 Theming
-
Upload
hans-rossel -
Category
Technology
-
view
9.454 -
download
0
description
Transcript of Drupal 7 Theming
![Page 1: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/1.jpg)
30 september 2010DUG Gent
Van een html/css template naar een Drupal 7 themeHans Rossel - www.koba.be - [email protected]
![Page 2: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/2.jpg)
EEN DRUPAL 7 THEME “FROM SCRATCH”
![Page 3: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/3.jpg)
Drupal 7 core Themes: Appearance
![Page 4: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/4.jpg)
VoorbereidingWireframes Photoshop design
![Page 5: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/5.jpg)
Theme CSS
● Drupal voegt heel wat html met id's 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, menu's 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.
![Page 6: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/6.jpg)
HTML/css Prototypewww.styleshout.com / www.oswd.org
vectorlover html/css prototypehttp://www.styleshout.com/free-templates.php?page=2
![Page 7: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/7.jpg)
Theme files.info (definition file)
screenshot.png
Css: style, print, ie
page.tpl.php, node.tpl.php: ● html met dynamische (php) stukken
template.php: (geavanceerde) php code
![Page 8: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/8.jpg)
.
![Page 9: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/9.jpg)
![Page 10: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/10.jpg)
![Page 11: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/11.jpg)
Regionsregions[header] = Headerregions[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] = Featuredregions[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
![Page 12: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/12.jpg)
Theme folder
Maak folder: sites/all/themes/vectorlover
Voeg je index.html, css, images van je statische template toe
![Page 13: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/13.jpg)
.info fileMaak een vectorlover.info file
name = 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
![Page 14: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/14.jpg)
Template files● /modules/system– html.tpl.php (d7): 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 (d6: alle html of index.html)
● Hernoem index.html naar page.tpl.php en verwijder alles behalve wat tussen de <body> tags zit
![Page 15: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/15.jpg)
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: niet meer mogelijk om theme cache leeg te maken op appearance page– 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
● Let op Drupal6:– Zorg dat je een admin theme (Rubik, RootCandy, Garland) hebt ingesteld
![Page 16: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/16.jpg)
Dynamische content copiëren en plakken
![Page 17: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/17.jpg)
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
![Page 18: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/18.jpg)
Render() toepassingen
● Voorbeelden– Regio's 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● Voorbeeld: zie hierboven: node.tpl.php
● Bekijken– Devel module: show page array– print_r($page);
● Meer info– http://www.archive.org/details/ExplorethegloryofDrupal7simprovedrenderandthemingsystems– http://www.archive.org/details/PageRenderDrillDownInDrupal7
![Page 19: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/19.jpg)
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
![Page 20: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/20.jpg)
.element-invisible in Bartik
![Page 21: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/21.jpg)
Accessibility: Css clip
Probleem: 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
![Page 22: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/22.jpg)
First sidebar (zijkolom regio)
● Alle regio's 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.
![Page 23: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/23.jpg)
Andere stukken om te copiëren/plakken
●Secondary menu●Footer●Regio's: footer, sidebar, ...●Logo, title
![Page 24: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/24.jpg)
IE csstemplate.php (example Bartik theme)
Gebruik: functie vectorlover_preprocess_html(&$vars)Issue: in .info file? Zie http://drupal.org/node/522006
![Page 25: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/25.jpg)
EEN THEME OP BASIS VAN
EEN ANDER THEME
![Page 26: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/26.jpg)
Subtheme van een bestaand theme
.info file:
Toevoegen:base theme = 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.
![Page 27: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/27.jpg)
DYNAMISCH THEMEN
![Page 28: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/28.jpg)
CSS
● Drupal geeft heel wat contextuele css classes en id's. De CSS aanpassen is een heel stuk makkelijker dan de HTML wijzigen. Je kunt al heel veel doen met een “CSS only” subtheme (gewoon een custom.css bestandje aangeven in de .info file).
![Page 29: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/29.jpg)
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) leeg
Voorbeeld:search-result.tpl.php in /modules/search
![Page 30: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/30.jpg)
Belangrijkste andere tpl.php
●
●In /modules/system● region.tpl.php● maintainance-page.tpl.php● html.tpl.php
●In /modules/node ●node.tpl.php●In /modules/field ●field.tpl.php●In /modules/comment
●comment.tpl.php
●In /modules/block ●Block.tpl.php
![Page 31: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/31.jpg)
page.tpl.phpFrontpage page--front.tpl.php
Vermijd 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.php
page--blog.tpl.php, page--viewpagename.tpl.php, page--admin.tpl.php, page--admin-build-block.tpl.php, page--civicrm.tpl.php, page--googlemap.tpl.php
Nieuw in D7: % integer wildcardpage--user.tpl.php > page--user-%.tpl.php > page--user-1.tpl.php
![Page 32: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/32.jpg)
node.tpl.php
Copieer de originele node.tpl.php van /modules/node
Per content typenode--blog.tpl.php
node--forum.tpl.php
node--page.tpl.php
node--ccknews-content-type.tpl.php
D6: 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.
![Page 33: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/33.jpg)
block.tpl.php● Origineel bestand in /modules/block
● D6:– block-modulename-delta.tpl.php– block-block-1.tpl.php– block-user-0.tpl.php
● Probleem in D7– Ook de hoofdcontent (node) is nu in een blok– Als je block.tpl.php overschrijft dan overschrijf je ook de weergave van de
node– Css: als je .block class gebruikt heeft dit nu ook gevolgen voor de node– Geen block-block-3.tpl.php meer in D7? Niet zeker, kan ook een bug zijn.
(Issues: http://drupal.org/node/678714 en http://drupal.org/node/190815)
![Page 34: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/34.jpg)
HTML wijzigenTheme overrides
Als 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
Nieuw in Drupal 7: suggestions● bartik_links()● bartik_link__node(): enkel de nodes
![Page 35: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/35.jpg)
Alternatieven: Modules
● Panels: www.drupal.org/project/panels● Display Suite: www.drupal.org/project/ds● Context: www.drupal.org/project/context● Sweaver: www.drupal.org/project/sweaver
![Page 36: Drupal 7 Theming](https://reader033.fdocuments.net/reader033/viewer/2022052504/546fb958b4af9ff5638b45d4/html5/thumbnails/36.jpg)
Meer over Theming Drupal 7
● http://drupal.org/node/925532 en http://drupal.org/theme-guide/6
● http://drupal.org/update/theme/6/7 ● http://drupal.org/update/modules/6/7 ● http://drupal.org/node/394070:
● D7 Theme issues: http://drupal.org/project/issues/drupal?text=&status=Open&priorities=All&categories=All&version=156281&component=theme+system
● Video's:– http://www.archive.org/details/AwesomenessRedefinedDrupal7Theming– http://www.archive.org/details/DesignAndThemingWhatsNewInDrupal7