Implementering af eget design til en d!ng hjemmeside
Upcoming SlideShare
Loading in...5
×
 

Implementering af eget design til en d!ng hjemmeside

on

  • 408 views

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

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?

Statistics

Views

Total Views
408
Views on SlideShare
407
Embed Views
1

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Implementering af eget design til en d!ng hjemmeside Implementering af eget design til en d!ng hjemmeside Presentation Transcript

    • Implementering af eget design til en D!ng-hjemmeside v/ Ewan Andreasen [email_address]
    • 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?
    • 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”
    • 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 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
    • 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: 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
    • 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: 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
    • 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: http://drupal.org/documentation/theme
      • http://theming.isaacsonwebdevelopment.com