9. SUBTHEME
EEN THEME
OP BASIS VAN
EEN ANDER THEME
10. Subtheme
van 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.
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 subtheme
Handleiding: http://drupal.org/node/226507
14. Een Zen subtheme - #226507
1.Kopieer STARTERKIT en hernoem het
2..info: mijntheme.info + verwijzingen
3.CSS
1.layout-liquid.css of layout-fixed.css → layout.css
2.zen.css → mijntheme.css
3.Optie: html-elements.css + ;weghalen uit .info file
4.Kopieer tpl.php files indien gewenst
15. CSS Framework Starter Themes
css 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. Admin Themes
Nu 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. Ontwerp je eigen subtheme
template.php: theme function overrides die voor
alle themes van belang zijn
Overnemen zaken van andere starter themes:
• Zen theme: body classes
• Zen theme: tabs en messages
• Tao: css reset
23. 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.
30. 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
31. Theme folder
Maak folder: sites/default/themes/vectorlover
Voeg je index.html, css, images van je statische template toe
32. .info file
Maak een vectorlover.info file
name = vectorlover
description = A very nice theme
(package nooit gebruiken: Core themes hebben hier “core” in D7 zodat de update manager
ze kan herkennen)
version = 1.0
core = 7.x
engine = phptemplate
stylesheets[all][] = css/vectorlover.css
stylesheets[all][] = css/custom.css
scripts[] = scripts/scripts.js
33. 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
34. 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
35. Theme Registry
http://drupal.org/node/173880
De 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)
36. Functie clear theme registry
Wordt 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();
38. 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.
39. 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
40. 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
42. CSS in Drupal themes
• Vermijd overlapping van css classes door .content,
.menu, .links, .block niet te gebruiken
• Drupal heeft reeds enorm veel classes en id's
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, ...
43. 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
44. Css toevoegen via .info
; Add a style sheet for all media
stylesheets[all][] = theStyle.css
; Add a style sheet for screen and projection media
stylesheets[screen, projection][] = theScreenProjectionStyle.css
; Add a style sheet for print media
stylesheets[print][] = thePrintStyle.css
45. Media queries
.info file
stylesheets[screen and (max-width: 600px)][] = screen-600.css
In css bestand:
@media screen and (max-device-width: 600px) {
//aanpassingen voor kleine toestellen
}
56. Override css
/**
* Implements hook_css_alter().
*/
function seven_css_alter(&$css) {
// Use Seven's 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 Seven's 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';
}
}
57. 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
59. HTML wijzigen
Template 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
60. page.tpl.php
Frontpage 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 wildcard
page--user.tpl.php > page--user--%.tpl.php > page--user--1.tpl.php
61. node.tpl.php
Copieer de originele node.tpl.php van /modules/node
Per content type
node--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.
67. HTML wijzigen via
Theme 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
89. 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';
}
}
100. Block admin pagina
function 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 aren't needed.
foreach ($vars['block_listing']['-1'] as $key => $disabled) {
$type = explode('_', $key);
if (!in_array($type[0], $show)) {
unset($vars['block_listing']['-1'][$key]);
}
}
}
101. URL Aliassen opvragen
Zie:
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
103. 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
105. 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
• Bekijken
– Devel module: show page array
– print_r($page);
•
109. Theme switching in settings.php
theme_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';
110. Theme wisselen volgens url
In settings.php
// if the url is an administration page
if (strpos($_GET['q'], 'admin') === 0) {
$conf['theme_default'] = 'garland';
}
111. Mobile theme
$parts = explode('.', $_SERVER['HTTP_HOST']);
if ($parts[0] == 'mobile') {
$GLOBALS['theme_default'] = 'mobile';
}
113. 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
114. 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
116. 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
127. 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
128. Een view beïnvloeden
1) Met de template files views-view.tpl.php
(opvragen via de “information link”)
2) Met een hook vb
hook_views_admin_links_alter
3) Tijdens het embedden van de view $view-
>hide_admin_links
129. Views embedden met module
• http://drupal.org/project/viewfield
• http://drupal.org/project/insert_view
131. 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 $args
param if using
138. Form theming
Het 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
142. 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
143.
144. 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)
150. Grid systemen
Probleemstelling
–Gelijke en eenduidige marges
–Pagina opdeelbaar in 2,3,4,5 kolommen
met gelijke marges
Zelf berekenen
–http://gridulator.com/
151. 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
152. 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
153. 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)
165. 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
166. 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
168. 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
169. Webfonts – Websafe fonts
Veiligste fonts
• Arial / Helvetica
• Times New Roman / Times
• Courier New / Courier
Ander cross platform
• Verdana
• Georgia
• Comic Sans MS
• Trebuchet MS
• Arial Black
• ImpactPalatino
• Garamond
• Bookman
• Avant Garde
170. Replacement technieken
• Speciale fonts
– Via een image: moet alt tekst hebben voor
toegankelijkheid, niet dynamisch vanuit cms
– Flash
– Javascript
– Css
171. 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
172. 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
173. 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
174. Css: gebruik
Internet 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; }
175. Browser support
Formaat Firefox Chrome IE 6-8 IE9 Safari IOS Android
3.6+ 6+ 3.1+ 2.2
EOT
x x
TTF
x x x X (>4.2) x
SVG
x X (<4.2)
WOFF
x x x
• Bron: http://www.webfonts.info/wiki/index.php?title=@font-face_browser_support
176. @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.
179. 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
180. 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
181. Nieuwsbrief theme
Via 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
189. 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
190. 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
191. 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
192. 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
193. 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
194. 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
199. Filosofie achter Display Suite
• Centraal beheer van layout van website inhoud
• Template bestanden overbodig maken
• Focus op gebruiksvriendelijkheid
• Gebruik van PHP beperken = betere veiligheid
200. 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
201. 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
202. 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
203. Correct Css'en 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 ?
204. Extras module
• Field templates
• Contextual links
• Regions to block
• Page title options
• Views Displays
• En veel meer!
205. Andere toepassingen
• Zoekresultaten
• Views slide show met meerdere content types
• Oefening 4: slideshow opzetten: custom View
mode en voor alle content types instellen.