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> <!-- /.section, /#sidebar-second --> <?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?