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

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?

Opsætning af tema Byg på temaet Dynamo – opret et sub-tema – (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. 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”

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!

Tilpasning med CSS Leg og lær – hav en håndbog parat – Eks. Cascading Style Sheets – The definitive guide 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

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

Views – mere info Drupal.org: Video: – tutorial tutorial – -features-views-2-screencast -features-views-2-screencast

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

Panels – mere info Drupal.org: com/files/manual_drupal_panels_0.pdf com/files/manual_drupal_panels_0.pdf Video: – – En liste:

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

Theming – mere info Drupal.org: