Drupal Omega Theme + LESS Drupal User Group 13/12/2012 Maarten De Block 13/12/2012www.entityone.be1
Drupal User Group VZW Ondersteunen van Drupal iniatieven – DUG – DrupalCamp – … Kennis en gebruik Drupal bevorderen Verkiezingen begin /12/2012www.entityone.be2
Maarten De Block Drupal Developer / Trainer – Dus geen themer ;-) Auteur “Kickstart Drupal 7” – Zaakvoerder EntityOne – Gericht op web- en communicatiebureau’s – Consultancy, opleidingen, projecten 13/12/2012www.entityone.be3
Kenmerken Omega Responsive – Past zich aan naar breedte toestel Grid – 12, 16 of 24 kolommen – Gebaseerd op 960.gs HTML5 of XHTML Starterkit Opdeling in regions en zones #D8CX 13/12/2012www.entityone.be4
Alpha / Omega Alpha – Basic CSS reset – Grid – Core layout – Interface and debugging – Basic templating functions Omega – Panels integration – Default CSS 13/12/2012www.entityone.be5
Sites met Omega /12/2012www.entityone.be6
Installatie Downloaden als een andere theme Subtheme maken – Manueel: README.txt – Automatisch: /12/2012www.entityone.be7
Installatie demo Downloaden Omega Downloaden en installeren omega_tools Appearance Create new Omega Subtheme – Map sites/all/themes moet (tijdelijk) beschrijfbaar zijn! Ook mogelijk met drush – /12/2012www.entityone.be8
Structuur Section – Zone Region – Block 13/12/2012www.entityone.be9
Sections 3 sections – Header – Content – Footer Niet de bedoeling dat ze aangepast worden 13/12/2012www.entityone.be10
Zones Groepering van regions Aanmaken: –.info bewerken – Section kiezen in UI 13/12/2012www.entityone.be11
Regions Regions zoals bij andere theme’s Aanmaken: –.info bewerken – Zone kiezen in UI 13/12/2012www.entityone.be12
Debugging Grid en en placeholders in/uitschakelen Tonen voor bepaalde rollen 13/12/2012www.entityone.be13
Toggle libraries Formalize – Helpt om forms gelijke layout te geven in verschillende browsers. – Media queries – Javascript triggers om functies uit te voeren adhv screen size – Extra classes op de body tag. Equal heights – Iedere block binnen region even hoog als hoogste block – “Force equal height for all child elements” op region zetten. 13/12/2012www.entityone.be14
Toggle styles Optionele stylesheets enablen Drupal stylesheets disablen 13/12/2012www.entityone.be15
Toggle advanced elements In/uitschakelen van – Messages – Action links – Tabs – Breadcrumb – Page title – Feed icons 13/12/2012www.entityone.be16
CSS structuur global.css yoursubthemename-alpha-default.css yoursubthemename-alpha-default-narrow.css yoursubthemename-alpha-default-normal.css yoursubthemename-alpha-default-wide.css 13/12/2012www.entityone.be17
Mobile first Eerst layout voor mobile in global.css Per file de css uitbreiden 13/12/2012www.entityone.be18
Panels Omega heeft support voor Panels! Kiezen voor ‘Omega …’ bij layout 13/12/2012www.entityone.be19
LESS Dynamic stylesheet language. Variablen gebruiken in CSS Functies (Mixins) 13/12/2012www.entityone.be20
Omega + LESS – Plaatsen in sites/all/libraries/lessphp 13/12/2012www.entityone.be21
Verder Delta – – Verschillende layout versies – Bijvoorbeeld home Responsive images and styles – /12/2012www.entityone.be22
Vragen? 13/12/2012www.entityone.be23
Pintjes! Met dank aan Pure Sign voor locatie en drank! 13/12/2012www.entityone.be24