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