Implementering af eget design til en d!ng hjemmeside

492 views

Published on

Slides fra kurset "Implementering af eget design til en D!ng-hjemmeside"

Om kurset:
Kurset henvender sig til de, der ønsker at tilpasse D!ng’s standard-design eller udskifte det med helt deres eget. Det forudsættes et grundlæggende kendskab til HTML og CSS – herudover er en smule kendskab til PHP er en fordel, men ikke et krav.

Indhold:
Opsætning af et nyt tema – baseret på standardtemaet Dynamo
Tilpasning med egne CSS-regler/styling
Brugen af Firefox til det effektive arbejde med webdesign
Tilpasning af eksisterende views i D!ng (views er f.eks. listen af arrangementer eller biblioteker)
Hvor lærer de videbegærlige mere om views?
Tilpasning af eksisterende panels i D!ng (panels er f.eks. forsidens eller bibliotekssiders layout)
Hvor lærer de videbegærlige mere om panels?
Tilpasning af eksisterende skabelon/template-filer (template-filer kan styre f.eks. visningen af en fremsøgt post i søgeresultatet)
Hvor lærer de videbegærlige mere om Theming af en D!ng-/Drupal-hjemmeside?

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
492
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Implementering af eget design til en d!ng hjemmeside

  1. 1. Implementering af eget design til en D!ng-hjemmeside v/ Ewan Andreasen [email_address]
  2. 2. Program <ul><li>Opsætning af nyt tema ovenpå temaet Dynamo </li></ul><ul><li>Brugen af Firefox til designarbejdet </li></ul><ul><li>Tilpasning med CSS </li></ul><ul><li>Tilpasning af views i D!ng </li></ul><ul><li>Hvor lærer de videbegærlige mere om views? </li></ul><ul><li>Tilpasning af panels i D!ng </li></ul><ul><li>Hvor lærer de videbegærlige mere om panels? </li></ul><ul><li>Tilpasning af skabelon/template-filer </li></ul><ul><li>Hvor lærer de videbegærlige mere om Theming? </li></ul>
  3. 3. Opsætning af tema <ul><li>Byg på temaet Dynamo – opret et sub-tema </li></ul><ul><ul><li>http://drupal.org/node/225125 (Creating a sub-theme) </li></ul></ul><ul><li>Undgå navne på moduler – giv temaet et helt særligt navn (Eks. Vejles tema = Wellejus) </li></ul><ul><li>Et subtema kan defineres med meget lidt: Se f.eks. https://github.com/vejlebib/wellejus/tree/master/wellejus-borkop </li></ul><ul><li>Inden man begynder CSS-styling deaktiveres båndbreddeoptimering på D!ng-sitet: </li></ul><ul><ul><li>Se under Administration > Indstillinger > Ydelse, sektionen båndbreddeoptimering </li></ul></ul><ul><li>Cacher skal ofte tømmes undervejs, så kend </li></ul><ul><ul><li>Administration > Indstillinger > Ydelse, knappen ”Ryd cachet data” </li></ul></ul>
  4. 4. Brug af Firefox <ul><li>Vigtige tilføjelser: Firebug + Web Developer </li></ul><ul><li>Firebugs ”Inspicér element”: Leg! Du kan dynamisk ændre både HTML og CSS, og se resultatet med det samme </li></ul><ul><li>Web Developer har CSS > Tilføj bruger-stylesheet: Nyt design kan prøves af - selv uden filadgang til serveren! </li></ul>
  5. 5. Tilpasning med CSS <ul><li>Leg og lær – hav en håndbog parat </li></ul><ul><ul><li>Eks. Cascading Style Sheets – The definitive guide http://shop.oreilly.com/product/9781565926226.do </li></ul></ul><ul><li>Override de oprindelige CSS regler: </li></ul><ul><ul><li>Kopiér blot CSS-reglen via Firefox, og indsæt i eget stylesheet. </li></ul></ul><ul><ul><li>Eget sub-temas stylesheet vil gælde ved konflikt, da denne regel kommer efter den oprindelige </li></ul></ul>
  6. 6. Tilpasning af views <ul><li>Taktik: Override (rediger ikke ) </li></ul><ul><li>Slå modulerne views UI og Rules Administration UI til: </li></ul><ul><ul><li>Administration > Opbygning > Moduler, markér Views UI samt Rules Administration UI </li></ul></ul><ul><li>Mouse-hover på sektioner der er views vil nu eksponere links [Redigér][Eksportér][Klon] – klik på Klon. </li></ul><ul><li>Lav god navngivning – prefix med ”bibnavn_”, eks. din klon af ”article_list” = ”bibnavn_article_list” </li></ul><ul><li>Leg. Og gem dit view. </li></ul><ul><li>Bemærk: Regler sørger for at opfriske cachen på views – dit nye view skal indsættes i Regler: </li></ul><ul><ul><li>Administration > Regler > Triggered Rules </li></ul></ul><ul><li>Det nye view bruges i Paneler, eller er sider med egen URL </li></ul><ul><li>ØVELSE: Klon og ret forsidens arrangementsliste </li></ul>
  7. 7. Views – mere info <ul><li>Drupal.org: http://drupal.org/node/109604 </li></ul><ul><li>http://learnbythedrop.com/drop/147 </li></ul><ul><li>Video: </li></ul><ul><ul><li>http://gotdrupal.com/videos/drupal-views-tutorial </li></ul></ul><ul><ul><li>http://www.masteringdrupal.com/screencast/new-features-views-2-screencast </li></ul></ul>
  8. 8. Tilpasning af Panels <ul><li>Panels inddeler en side i områder </li></ul><ul><li>Forside, indholdstyper og særlige sider styres med Panels </li></ul><ul><li>På sitet har disse sider fanebladet ”Edit Panel” </li></ul><ul><li>Taktik: Override (rediger ikke ) </li></ul><ul><ul><li>Paneler kan have flere varianter – og disse kan klones </li></ul></ul><ul><ul><li>Varianter kan ordnes i anden rækkefølge – og den øverste vælges ved konflikt </li></ul></ul><ul><li>Lav god navngivning – prefix med ”bibnavn_”, eks. din klon af en variant ”Panel” = ”bibnavn_Panel” </li></ul><ul><li>ØVELSE: Opret variant af forsidens Panel, og tilpas den så den bruger det tilpassede arrangementsliste-view </li></ul>
  9. 9. Panels – mere info <ul><li>Drupal.org: http://drupal.org/node/496278 </li></ul><ul><li>http://www.olamalu.com/sites/www.olamalu.com/files/manual_drupal_panels_0.pdf </li></ul><ul><li>Video: </li></ul><ul><ul><li>http://gotdrupal.com/videos/drupal-panels </li></ul></ul><ul><ul><li>En liste: http://drupal.org/node/561730 </li></ul></ul>
  10. 10. Tilpasning af template-filer <ul><li>Man kan kun komme så langt med CSS – til sidst ER der behov for ekstra HTML indsat et bestemt sted </li></ul><ul><li>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 </li></ul><ul><li>Template-filer kræver lidt PHP-kendskab, men er ofte små nemme stumper kode </li></ul><ul><li>Største template = page.tpl.php </li></ul><ul><li>Et view bruger ofte en template-fil. Find den rigtige via views-redigeringen: Basale indstillinger, herunder Tema:information </li></ul><ul><li>ØVELSE: Find arrangementslistens templates, kopiér dem over, og tilret dem </li></ul>
  11. 11. Theming – mere info <ul><li>Drupal.org: http://drupal.org/documentation/theme </li></ul><ul><li>http://theming.isaacsonwebdevelopment.com </li></ul>

×