Drupal theming. 28 april CVO Crescendo

Maat: px

Weergave met pagina beginnen:

Download "Drupal theming. 28 april 2014 - CVO Crescendo"

Julia de Wit
10 jaren geleden
Aantal bezoeken:

1 Drupal theming 28 april CVO Crescendo

2 About-me.tpl.php Esther De Jonghe Drupal front end @puresign nu: freelance

3 Wat is theming?

4 html, css, php, javascript <?php if ($title):?> <h1> <?php print $title;?> </h1> <?php endif;?> h1 { color: red; }

5 Learning curve

6 AAARRRGGGHHH! meest gehoorde woord op de werkvloer:

7 Core themes Bartik: voorkant Seven: administration theme

8 Een theme implementeren 3 manieren theme gebruiken sub-theme maken custom theme maken

9 Theme implementeren 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

10 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)

11 mijn_theme.info name = Mijn-Theme description = Mijn-Theme is een Bartik subtheme version = 1.0 core = 7.x base theme = bartik

12 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...

13 Een eigen theme maken sites/all/themes/[naam] [naam].info template.php css/sass files templates javascript files

14 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]= '/'

15 template.tpl.php html.tpl.php page.tpl.php region.tpl.php block.tpl.php block--menu.tpl search-result.tpl.php

16 template.php Logicverander de html-output theming functions php

17 Preprocessing function mijntheme_preprocess_node(&$variables) { $variables['date'] = date('d-m-y'); $variables['submitted'] = t('submitted on!datetime', array( '!datetime' => $variables['date'], )); }

18 Regions

19 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;?>

20 Css / SASS SASS (en Less) zijn css-compilers functions variables extend DRY

21 DRY Don t repeat yourself! Sass - re-use mixins bem-classes

22 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'); }

23 Theming modules Display Suite - Sweaver -

24 Online resources

25 It s the internet jim, but not as we know it

26 Responsive design

27 Schermbreedte - niet device

28 Schermbreedte - niet device

29 Responsive Ontwerp schaalt mee met de breedte van het scherm (niet device- of browserafhankelijk) Optimale gebruikerservaring op elk scherm / device

30 mediaqueries screen and (max-width: 600px) { h2 { color: green; } }

31 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>

32 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!

33 oefening: subtheme maken demo

34 Thank you! vragen / opmerkingen?

Vergelijkbare documenten

RESPONSIVE DRUPAL THEMING MET SASS, COMPASS, SUSY EN AURORA DRUPAL TECH TALK 25 APRIL 2013 MARC VAN GEND TRIQUANTA

RESPONSIVE DRUPAL THEMING MET SASS, COMPASS, SUSY EN AURORA DRUPAL TECH TALK 25 APRIL 2013 MARC VAN GEND TRIQUANTA AGENDA Het Doel #responsivemobilefirsthtml5buzzwordcompliant CSS preprocessing SASS Werken