Implementering af eget design til en D!ng-hjemmeside v/ Ewan Andreasen

Præsentationer af emnet: "Implementering af eget design til en D!ng-hjemmeside v/ Ewan Andreasen"— Præsentationens transcript:

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

2 Program 1.Opsætning af nyt tema ovenpå temaet Dynamo 2.Brugen af Firefox til designarbejdet 3.Tilpasning med CSS 4.Tilpasning af views i D!ng 5.Hvor lærer de videbegærlige mere om views? 6.Tilpasning af panels i D!ng 7.Hvor lærer de videbegærlige mere om panels? 8.Tilpasning af skabelon/template-filer 9.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) http://drupal.org/node/225125 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 https://github.com/vejlebib/wellejus/tree/master/wellejus-borkop Inden man begynder CSS-styling deaktiveres 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 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 > Triggered Rules 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/109604http://drupal.org/node/109604 http://learnbythedrop.com/drop/147 Video: – http://gotdrupal.com/videos/drupal-views- tutorial http://gotdrupal.com/videos/drupal-views- tutorial – http://www.masteringdrupal.com/screencast/new -features-views-2-screencast 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/496278http://drupal.org/node/496278 http://www.olamalu.com/sites/www.olamalu. com/files/manual_drupal_panels_0.pdf http://www.olamalu.com/sites/www.olamalu. com/files/manual_drupal_panels_0.pdf Video: – http://gotdrupal.com/videos/drupal-panels http://gotdrupal.com/videos/drupal-panels – En liste: http://drupal.org/node/561730http://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://drupal.org/documentation/theme http://theming.isaacsonwebdevelopment.com