De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Drupal Omega Theme + LESS Drupal User Group 13/12/2012 Maarten De Block 13/12/2012www.entityone.be1.

Verwante presentaties


Presentatie over: "Drupal Omega Theme + LESS Drupal User Group 13/12/2012 Maarten De Block 13/12/2012www.entityone.be1."— Transcript van de presentatie:

1 Drupal Omega Theme + LESS Drupal User Group 13/12/2012 Maarten De Block 13/12/2012www.entityone.be1

2 Drupal User Group VZW Ondersteunen van Drupal iniatieven – DUG – DrupalCamp – … Kennis en gebruik Drupal bevorderen Verkiezingen begin /12/2012www.entityone.be2

3 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

4 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

5 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

6 Sites met Omega /12/2012www.entityone.be6

7 Installatie Downloaden als een andere theme Subtheme maken – Manueel: README.txt – Automatisch: 13/12/2012www.entityone.be7

8 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 – 13/12/2012www.entityone.be8

9 Structuur Section – Zone Region – Block 13/12/2012www.entityone.be9

10 Sections 3 sections – Header – Content – Footer Niet de bedoeling dat ze aangepast worden 13/12/2012www.entityone.be10

11 Zones Groepering van regions Aanmaken: –.info bewerken – Section kiezen in UI 13/12/2012www.entityone.be11

12 Regions Regions zoals bij andere theme’s Aanmaken: –.info bewerken – Zone kiezen in UI 13/12/2012www.entityone.be12

13 Debugging Grid en en placeholders in/uitschakelen Tonen voor bepaalde rollen 13/12/2012www.entityone.be13

14 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

15 Toggle styles Optionele stylesheets enablen Drupal stylesheets disablen 13/12/2012www.entityone.be15

16 Toggle advanced elements In/uitschakelen van – Messages – Action links – Tabs – Breadcrumb – Page title – Feed icons 13/12/2012www.entityone.be16

17 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

18 Mobile first Eerst layout voor mobile in global.css Per file de css uitbreiden 13/12/2012www.entityone.be18

19 Panels Omega heeft support voor Panels! Kiezen voor ‘Omega …’ bij layout 13/12/2012www.entityone.be19

20 LESS Dynamic stylesheet language. Variablen gebruiken in CSS Functies (Mixins) 13/12/2012www.entityone.be20

21 Omega + LESS – Plaatsen in sites/all/libraries/lessphp 13/12/2012www.entityone.be21

22 Verder Delta – – Verschillende layout versies – Bijvoorbeeld home Responsive images and styles – 13/12/2012www.entityone.be22

23 Vragen? 13/12/2012www.entityone.be23

24 Pintjes! Met dank aan Pure Sign voor locatie en drank! 13/12/2012www.entityone.be24


Download ppt "Drupal Omega Theme + LESS Drupal User Group 13/12/2012 Maarten De Block 13/12/2012www.entityone.be1."

Verwante presentaties


Ads door Google