Implementering af eget design til en D!ng-hjemmeside

1. Implementering af eget design til en D!ng-hjemmeside v/ Ewan Andreasen ea@vejlebib.dk

2. Program • Opsætning af nyt tema ovenpå temaet Dynamo • Brugen af Firefox til designarbejdet • Tilpasning med CSS • Tilpasning af views i D!ng • Hvor lærer de videbegærlige mere om views? • Tilpasning af panels i D!ng • Hvor lærer de videbegærlige mere om panels? • Tilpasning af skabelon/template-filer • Hvor lærer de videbegærlige mere om Theming?

3. Opsætning af tema • Byg på temaet Dynamo – opret et sub-tema • http://drupal.org/node/225125 (Creating a sub-theme) • Undgå navne på moduler – giv temaet et helt særligt navn (Eks. Vejles tema = Wellejus) • Et subtema kan defineres med meget lidt: Se f.eks. https://github.com/vejlebib/wellejus/tree/master/wellejus-borkop • Inden man begynder CSS-stylingdeaktiveres båndbreddeoptimering på D!ng-sitet: • Se under Administration > Indstillinger > Ydelse, sektionen båndbreddeoptimering • Cacher skal ofte tømmes undervejs, så kend • Administration > Indstillinger > Ydelse, knappen ”Ryd cachet data”

4. Brug af Firefox • Vigtige tilføjelser: Firebug + Web Developer • Firebugs ”Inspicér element”: Leg! Du kan dynamisk ændre både HTML og CSS, og se resultatet med det samme • Web Developer har CSS > Tilføj bruger-stylesheet: Nyt design kan prøves af - selv uden filadgang til serveren!

5. Tilpasning med CSS • Leg og lær – hav en håndbog parat • Eks. Cascading Style Sheets – The definitive guide http://shop.oreilly.com/product/9781565926226.do • Override de oprindelige CSS regler: • Kopiér blot CSS-reglen via Firefox, og indsæt i eget stylesheet. • Eget sub-temas stylesheet vil gælde ved konflikt, da denne regel kommer efter den oprindelige

6. Tilpasning af views • Taktik: Override (rediger ikke) • Slå modulerne views UI og Rules Administration UI til: • Administration > Opbygning > Moduler, markér Views UI samt Rules Administration UI • Mouse-hover på sektioner der er views vil nu eksponere links [Redigér][Eksportér][Klon] – klik på Klon. • Lav god navngivning – prefix med ”bibnavn_”, eks. din klon af ”article_list” = ”bibnavn_article_list” • Leg. Og gem dit view. • Bemærk: Regler sørger for at opfriske cachen på views – dit nye view skal indsættes i Regler: • Administration > Regler > TriggeredRules • Det nye view bruges i Paneler, eller er sider med egen URL • ØVELSE: Klon og ret forsidens arrangementsliste

7. Views – mere info • Drupal.org: http://drupal.org/node/109604 • http://learnbythedrop.com/drop/147 • Video: • http://gotdrupal.com/videos/drupal-views-tutorial • http://www.masteringdrupal.com/screencast/new-features-views-2-screencast

8. Tilpasning af Panels • Panels inddeler en side i områder • Forside, indholdstyper og særlige sider styres med Panels • På sitet har disse sider fanebladet ”Edit Panel” • Taktik: Override (rediger ikke) • Paneler kan have flere varianter – og disse kan klones • Varianter kan ordnes i anden rækkefølge – og den øverste vælges ved konflikt • Lav god navngivning – prefix med ”bibnavn_”, eks. din klon af en variant ”Panel” = ”bibnavn_Panel” • ØVELSE: Opret variant af forsidens Panel, og tilpas den så den bruger det tilpassede arrangementsliste-view

9. Panels – mere info • Drupal.org: http://drupal.org/node/496278 • http://www.olamalu.com/sites/www.olamalu.com/files/manual_drupal_panels_0.pdf • Video: • http://gotdrupal.com/videos/drupal-panels • En liste: http://drupal.org/node/561730

10. Tilpasning af template-filer • Man kan kun komme så langt med CSS – til sidst ER der behov for ekstra HTML indsat et bestemt sted • Man kan kopiere enhver .tpl.php-fil fra Dynamo til eget subtema. Subtemaet .tpl.php-fil vil være gældende – det er en override • Template-filer kræver lidt PHP-kendskab, men er ofte små nemme stumper kode • Største template = page.tpl.php • Et view bruger ofte en template-fil. Find den rigtige via views-redigeringen: Basale indstillinger, herunder Tema:information • ØVELSE: Find arrangementslistens templates, kopiér dem over, og tilret dem

11. Theming – mere info • Drupal.org: http://drupal.org/documentation/theme • http://theming.isaacsonwebdevelopment.com