![Implementering af eget design til en D!ng-hjemmeside v/ Ewan Andreasen [email_address]](https://image.slidesharecdn.com/implementeringafegetdesigntilendng-hjemmeside-110916020018-phpapp01/85/Implementering-af-eget-design-til-en-d-ng-hjemmeside-1-320.jpg)
![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](https://image.slidesharecdn.com/implementeringafegetdesigntilendng-hjemmeside-110916020018-phpapp01/85/Implementering-af-eget-design-til-en-d-ng-hjemmeside-6-320.jpg)
Implementering af eget design til en d!ng hjemmeside
- 1. Implementering af eget design til en D!ng-hjemmeside v/ Ewan Andreasen [email_address]
- 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-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 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/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