Drupal theming. 28 april CVO Crescendo

Maat: px

Weergave met pagina beginnen:

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

Julia de Wit
8 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

Lichtgewicht CSS design voor Drupal 6

Lichtgewicht CSS design voor Drupal 6 Roy Scholten Drupaljam Enschede, 20 maart 2009 1 Question: How to convert an OSWD design into a Drupal theme. In 45 minutes? 2 Wie heeft deze vraag gesteld? Answer: