drupal theming

Drupal theming
28 april 2014 - CVO Crescendo
About-me.tpl.php
Esther De Jonghe
Drupal front end developer
verleden: @cronos, @adforce, @puresign
nu: freelance (wwwonderland)
@estherdejonghe
Wat is theming?
html, css, php, javascript
<?php if ($title): ?>
<h1> <?php print $title; ?> </h1>
<?php endif; ?>
h1 {
color: red;
}
Learning curve
AAARRRGGGHHH!
meest gehoorde woord op de werkvloer:
Core themes
Bartik: voorkant
Seven: administration theme
Een theme implementeren
3 manieren
● theme gebruiken
● sub-theme maken
● custom theme maken
Theme implementeren
●
●
●
●
●
●
●
https://drupal.org/project/project_theme
drush dl [naam] (wat na project/ komt)
of via download zip - in folder: sites/all/themes
/admin/appearance
enable en set default
/admin/appearance/settings/[naam]
via settings kan je instellingen wijzigen: themeafhankelijk (vb colors, slideshow, …)
● via blocks kan je content in een region plaatsen
Subtheme maken
● kies een base-theme (vb bartik)
● maak folder: sites/all/themes/[naam]
○ alfanumerieke tekens en underscores
● in folder:
○ [naam].info
○ style.css (of een andere naam)
mijn_theme.info
name = Mijn-Theme
description = Mijn-Theme is een Bartik subtheme
version = 1.0
core = 7.x
base theme = bartik
mijn_theme.info
kopieer ook alle regions van het base-theme
regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted
...
Een eigen theme maken
sites/all/themes/[naam]
[naam].info
template.php
css/sass files
templates
javascript files
theme.info
name = "theme naam"
description = "dit is mijn theme"
version = "1.0"
core = "7.x"
engine = "phptemplate"
stylesheets[all][] = "css/html5reset.css"
stylesheets[all][] = "style.css"
scripts[] = "scripts/main.js"
regions[top] = Top
regions[right] = Right
regions[content] = Content
regions[footer] = Footer
settings[breadcrumb_display]= 1
settings[breadcrumb_home]= 1
settings[breadcrumb_separator]= '/'
template.tpl.php
html.tpl.php
page.tpl.php
region.tpl.php
block.tpl.php
block--menu.tpl
search-result.tpl.php
template.php
Logicverander de html-output
theming functions
php
Preprocessing
function mijntheme_preprocess_node(&$variables) {
$variables['date'] = date('d-m-Y');
$variables['submitted'] = t('Submitted on !datetime',
array(
'!datetime' => $variables['date'],
));
}
Regions
Regions
page.tpl.php
<?php if ($page['sidebar_second']): ?>
<div id="sidebar-second" class="column sidebar"><div class="section">
<?php print render($page['sidebar_second']); ?>
</div></div> 
<?php endif; ?>
Css / SASS
SASS (en Less) zijn css-compilers
functions
variables
extend
DRY
DRY
Don’t repeat yourself!
Sass - re-use mixins
bem-classes
Javascript
[naam].info
scripts[] = mytheme.js
preprocess in template.php
function mijntheme_preprocess_page(&$variables) {
drupal_add_js(drupal_get_path('theme', 'mijntheme') .'js/scripts.js', 'file');
}
Theming modules
Display Suite - https://drupal.org/project/ds
Sweaver - https://drupal.org/project/sweaver
Online resources
https://drupal.org/documentation/theme
It’s the internet jim, but not as we know it
Responsive design
Schermbreedte - niet device
Schermbreedte - niet device
Responsive
Ontwerp schaalt mee met de breedte van het scherm (niet
device- of browserafhankelijk)
Optimale gebruikerservaring op elk scherm / device
http://mediaqueri.es
mediaqueries schrijven
@media screen and (max-width: 600px) {
h2 {
color: green;
}
}
mediaqueries laten werken
Toevoegen aan html.tpl.php
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximumscale=1"/>
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width" />
<meta http-equiv="cleartype" content="on" />
</head>
De 10 geboden
Gij zult nooit core files overschrijven
Gij zult nooit een base theme aanpassen
Gij zult zo weinig mogelijk !important gebruiken
Gij zult deze volgorde respecteren: php / css / js
Gij zult volhouden!
oefening: subtheme maken
demo
Thank you!
vragen / opmerkingen?

Download Report