rapport fra stine, kristin og jeannette
DESCRIPTION
Projektopgave om websiteTRANSCRIPT
Risskov Fysioterapi
Multimedie og interaktionsdesign 2011
Aarhus Tech v. Per Rasmussen
Jeannette Callisen
Kristin Lange Stine Thit Jensen
Kontaktperson: Stine ([email protected])
http://multimediekursus.ats.dk/0511/jeannette/wp_risskov_fysioterapi/wp/
1
Indholdsfortegnelse
INDHOLDSFORTEGNELSE 1
OPGAVEFORMULERING 3
FORANALYSE 3
RISSKOV FYSIOTERAPI 3 DEN NUVÆRENDE HJEMMESIDE 3 RISSKOV FYSIOTERAPIS ØNSKER TIL NYT WEBSITE 4 KUNDEMØDE D. 9. MARTS 4 SAMLET PROFIL 5 INTERESSENTANALYSE 5
UNDERSØGELSE 6
PROJEKTBESKRIVELSE 6 TEAMETABLERING 6 SAMARBEJDSAFTALE 6 IDEUDVIKLING 6 INFORMATIONSINDSAMLING, RESEARCH OG INSPIRATION 7 FYSIOTERAPI GENERELT 7 Charlottehøj 8 Hornslet Fys 8 KONCEPTBESKRIVELSE 9 KOMMUNIKATIONSPLANLÆGNING 9
DESIGN 10
INFORMATIONSDESIGN 10 INTERAKTIONSDESIGN 10
REALISERING 11
KUNDEMØDE 2 11 WORDPRESS (WP) 11 DESIGNPARAMETRE 12 KOMPOSITION 13 AIDA 13
2
VALG AF SKRIFTER 14 FARVEVALG 14 SKITSE TIL HJEMMESIDEN 15 ENDELIGT SITE PRÆSENTATION 15 VURDERING AF SAMARBEJDE 16 PROCESDOKUMENTATION 16
BILAGSOVERSIGT 17
BILAG 1 GRUPPENS REFLEKSIONER 18 BILAG 2 PROJEKTPLAN 1 19 BILAG 3 IDEUDVIKLING 20 BILAG 4 SCREEN-DUMP AF KONKURRENTHJEMMESIDER 25 BILAG 5 FLOWCHART 26 BILAG 6 STORYBOARD 27 BILAG 7 WP TEMA 32 BILAG 8 ENDELIGT WEBSITE – FORSIDE 33 BILAG 9 PROJEKTPLAN2 34 BILAG 10 KODEUDSKRIFT AF WEBSITE 344
3
Opgaveformulering
Projektet tager udgangspunkt i en opgave stillet af Risskov Fysioterapi, der ønsker at få re-designet deres hjemmeside.
Foranalyse
Risskov Fysioterapi
Risskov Fysioterapi er en klinik i det nordlige Århus med 7 fysioterapeuter, en sekretær og løst ansatte medhjælpere. Det er en mindre klinik der fokuserer på at tilbyde fysiologisk behandling og træning med fokus på en høj faglighed, en afslappet atmosfære og en god relation til deres patienter.
Den nuværende hjemmeside
På den nuværende side sidder menuen højt oppe, mange billeder er generiske og siger ikke direkte noget om de behandlinger der udbydes. Der er adgang til administration direkte fra siden. Designet er enkelt, med få farver: blå, hvid, sort skrift, kun lidt tekst, 6 menupunkter (velkommen, klinikken, træning, priser, hvem er vi, find os, kontakt). Som siden er nu, kan det være forvirrende med tre punkter der knytter sig til det samme.
Billedgalleriet er af ældre dato, og igen er der direkte adgang for administration, og det er ikke nødvendigt for brugeren at se.
Billederne af medarbejderne har ikke samme baggrund, der er ikke noget fælles billede, der står navn under billederne, men ikke andet, så man ved ikke hvem der er sekretær
4
eller hvem der er fysioterapeut. Menuen og det store billede er statisk og går igen på alle sider.
Samlet set kan man sige, at hjemmesiden er meget faktuel og løsningsorienteret, og klinikken er et sted hvor man kommer for at få en kompetent behandling og resultater.
Risskov Fysioterapis ønsker til nyt website
Et tidssvarende site med opdaterede billeder i en god kvalitet
Overskuelig og let at navigere på – så folk får lyst til at ringe
Et minimum af vedligehold, evt. kun prisopdateringer
Medtage at de har overenskomst med sygeforsikringen og er medlem af danske fysioterapeuter
Et nyt fællesbillede på forsiden samt enkeltbilleder med navn og funktion
Eget logo på siden
Mulighed for at oplyse om nye tiltag/hold og kontakt formular
Kundemøde d. 9. marts
Ved kundemødet blev billedet af klinikken og deres ønsker uddybet igennem dialog, og følgende tilføjelser til ønsker kom frem i løbet af samtalen:
Galleriet skal væk, men der må gerne udarbejdes et nyt
3 ord om os: God afslappet atmosfære, kompetence, lokalerne kunne optimeres. Klinikken er startet af Birgitte Esmark, der nu har trukket sig næsten ud, selvom hun fortsat ejer den. Klinikken er ca. 15 år gammel, og træningscentret er ca. 10 år gammel.
Respons på nuværende side fra kunder: rodet, kunder kan ikke finde de informationer de søger. Derfor vil de gerne have en side der er overskuelig, introducerende, generel og ikke for niche-agtig i sine beskrivelser af tilbuddene.
Hjemmesidens primære funktion er at nå nye kunder og bibeholde nuværende loyale kunder. De tilbyder rygskole, og har haft fællesannonce sammen med Charlottehøj Fysioterapi, der har brugt annonceteksten på deres hjemmeside. Den tekst kan bruges på den nye hjemmeside. De fokuserer på: behandling og genoptræning af alle lidelser i bevæge-apparatet. I forhold til kiropraktorerne, der arbejder med knogler og led, arbejder fysioterapeuterne med kroppens bløddele og led.
Der må gerne ændres i tekst, skrifttype, logo og farver.
5
Signalet for klinikken skal være: dygtighed, et rart sted og genkendelighed, tillid og kemi. De samarbejder ikke med kostvejleder, eller lægehus på nuværende tidspunkt.
Menuen må gerne stå lodret, ingen scroll på siden.
Nogle patienter følger deres specifikke behandler fra andre steder, ellers er det primært patienter fra lokalområdet.
Der gives hjemmebehandling, også på lokalcentre.
Samlet Profil
7 fysioterapeuter der kan lidt af hvert og sætter fagligheden højt. De har eget træningscenter, men tilbyder også hjemmebesøg og har hold til specifikke problemer,
Målgruppen for klinikken er alle aldersgrupper.
Centralt for klinikken står ønsket om en profil der fokuserer på den kompetente behandling, tillid til behandlerne og den gode kemi mellem behandlere og patienter. Det er ikke en spa-behandling, og der fokuseres på, at patienterne oplever en afhjælpning af de problemer de henvender sig med.
Klinikken har et rigtig godt udgangspunkt for at hverve nye kunder, nemlig et godt ry. Hjemmesiden skal derfor understøtte dette og være en tilføjelse til mund-til-mund hvervning af nye kunder.
Bilag 1 viser gruppens refleksioner over muligheder for udvikling.
Interessentanalyse
Målgruppen defineres primært gennem behov og geografi. De der vil have interesse i hjemmesiden er derfor allerede motiverede, og skal i mindre grad overtales til at gå til behandling, men i højere grad til at vælge netop dette sted.
For de ansatte skal siden være et online visitkort de kan henvise til i deres arbejde, samt være en side de selv vil kunne administrere og opdatere efter behov.
Andre fysioterapeut-klinikker vil til dels også være konkurrenter, men grundet det geografiske parameter, er det øvrige klinikker i samme område der primært er konkurrenter. Dog skal det nævnes, at mange patienter er meget loyale og gerne følger deres behandler ved klinikskifte, så konkurrencen er meget styret af kvalitet og udbud i området.
6
Undersøgelse
Projektbeskrivelse
Opgaven for projektet lyder derfor på
Et opdateret site
Enkelt og let at vedligeholde
Et site, der signalerer høj faglighed, tillid og god stemning
Ingen scroll
Nye billeder
Teametablering
Gruppens kompetencer er: cand.mag. i spansk og engelsk, folkeskolelærer med historie og matematik, cand.mag. i oplevelsesøkonomi. En bred kompetenceflade med interesser indenfor it, oplevelsesdesign og web.
Fra starten udarbejdede vi en projektplan både over opgavens indhold og tidsestimering, samt fordeling mellem gruppearbejde og selvstændigt arbejde (se Bilag 2).
Vi arbejder ud fra en tanke omkring, at processen er iterativ, og derfor betragter vi vores plan som ”working proces”, der konstant udvikler sig eksplorativt, og ændrer sig i takt med projektets udvikling.
Samarbejdsaftale
Vi aftaler fra start i gruppen, at arbejdet skal veksle mellem fælles og individuelt arbejde, samt fleksibel mødetid og arbejdstid. Vi veksler imellem at sætte vores kompetencer i spil til at løse enkelte opgaver hjemme, men mødes og tager fælles beslutninger om proces og indhold. Men vi finder, at det giver en god proces at veksle imellem fælles og individuelt til processen, så vi ikke låser os for hurtigt fast.
Ideudvikling
For at få tankerne i gang i gruppen, og få tunet os ind på opgaven, startede vi med en indledende brainstorm baseret på kundemøde og egne tanker omkring fysioterapi, farvekoncept, kundens nuværende side og ønsker om udvikling. Se
Bilag 3 Tegneskitser
7
Informationsindsamling, research og inspiration
Fysioterapi generelt
Bilag 4 viser en samling screen-dumps af en række fysioterapi klinikker og herunder er en oversigt over de tendenser man kan udlede af sammenligningen
Farveholdning Information Kommunikation Interaktion Præsentation
Praktisk om klinikken, behandlinger, priser, kontakt og adresse
Formål er at informere om ydelser, så effekten bliver at tiltrække kunder.
En mindre grad af interaktion, højst log in til tidsbestilling, forespørgsler, henvisninger og links.
En kombination af tekst og billeder der viser personale, klinikker og behandlingsfor-mer
Afsender er klinikkerne, målgruppen er alle med smerter i bevæge-apparatet
Lav grad af brugerinvolvering, primært en-vejs orienteret.
Minimum af lyd og animationer, højst slideshow af billeder
Budskabet er tilbud om behandling og løsning på patienters fysiologiske problemer
Enkle typografier, rene linier, vertikal/
horizontal menuer
Klinikken udtrykker til kundemødet at der er to hjemmesider de ønsker dels at lade sig inspirere af, og distancere sig fra i design.
8
Charlottehøj
Hornslet Fys
”Tøsefarver”! Den lyserøde firkant tjener ikke noget formål, farvemæssigt rod, der er en barre med fire farver, der ikke tjener noget formål, undermenuerne er farvekodede, men matcher ikke med de andre farver, der er dobbelt scroll på siden, da selve siden, og menuen indeni skal scrolles, logoet står nederst i højre hjørne, og er ikke farvemæssigt knyttet til noget af det andet. Billederne er dog gode, både de mere generiske og de af personer.
Overordnet er siden IKKE god, der er for meget scroll i undermenuerne, siden udnytter ikke skærmen godt, da den er venstreplaceret, og det er ikke godt med dobbeltscroll nogle steder.
Blåt tema, mere lyst, små generiske billeder, lang personbeskrivelser, også seks menupunkter, i samme stil, dog mere service orienteret med punktet ”vi udfører”, men måske en anelse mekanisk, man udfører jo ikke arbejdet på en person, man udfører ikke en behandling, men man giver en behandling. Et lidt gammeldags stemningsbillede fra klinikken. Linket til krak går til en generel søgeside. Sjovt at de har et punkt der hedder ”find os”, når deres adresse og telefonnummer står på alle siderne. Det er unødvendigt at have en søgefunktion på så lille et site, når man har konstant adgang til menupunkterne.
Det er et godt site, overskuelig, præcis, men der er for lange personlige referencer.
9
Konceptbeskrivelse
Titel Idé Brug Indhold Udformning Behov Fokusområde
”What you see is what you get”
Enkelt, seriøst, kompetent
Online visitkort til nuværende/nye kunder, synlighed på nettet så konkurrenten ikke vælges
Præcis information understøttet af billeder fra klinikken, ikke en salgstale med for meget ”fyld”
Et hierakisk site med simpel navigation for både kunder og ansatte, kun de nødvendige sider
Synlighed på nettet
At tage udgangspunkt i det eksisterende og kundens ønsker for ny side
Kommunikationsplanlægning
Formål Effekt Afsender Målgruppe Brugerprofil
Budskab Medie
Fortælle historien om en kompetent klinik med hjertevarme og afslappet atmosfære
Bibeholde nuværen-de patienter og tiltrække nye
Klinikken og dens medar-bejdere
Folk i lokalområdet og de der følger bestemt behandler, alle aldre, køn
N/A ”Vi trykker hvor det gør ondt” - at kunne tilbyde en kompetent løsning på de problemer patienterne kommer med
Fokus på relation mellem patient og behandler
”Hvem, hvad, hvor”
Website – online visitkort
10
Design
Informationsdesign
Vi fokuserer meget på deres ønske om det enkle, så informationen er opdelt i følgende punkter
Velkommen
Klinikkens medarbejdere og fysiske forhold
Hvad der tilbydes af behandlinger og træning
Kontakt
Priser
Det er en minimering fra de nuværende seks menupunkter, hvor vi i forundersøgelsen fandt, at flere af de eksisterende menupunkter overlappede.
Derudover har vi ikke tilføjet yderligere, da de netop ønsker at siden er enkel og ikke skal opdateres for ofte. Havde vi tilføjet en nyhedsside eller artikelbase for eksempel, havde det krævet at de selv skulle vedligeholde det ofte, ellers vil det virke mindre troværdigt.
Vi har organiseret informationen ud fra patientens synspunkt: de har et problem de ønsker løst, derfor er det vigtigt at de hurtigt kommer frem til siden med behandlinger/træning så de kan se, om klinikken kan opfylde deres behov. Derefter kan de blive introduceret til stedet og dets behandlere, priser og kontakt information. Alle punkter er dog synlige fra alle sider i den venstre menu-bar. Det er en fordel, hvis en mulig kunder ”lander” på sitet på en af undersiderne, så kan der hurtigt dannes et overblik alligevel.
Det er derfor bygget op efter en patients behovs-flow.
Interaktionsdesign
Frekvens Graden Betydning Følelse
Der er 5 (11) muligheder for patienten at klikke sig rundt på sitet
En lav grad, patienten kan kun klikke sig frem og tilbage
Lav grad af interaktionsfrihed, da patienten ikke kan påvirke noget på sitet
Taget sidens formål i betragtning (information til patienter) påvirkes følelsen af lav interaktion ikke nævneværdigt
11
Navigationen er hierarkisk opbygget med en forside (velkommen) som hovedmenu, men den venstre menubar er synlig på alle sider, så der kan navigeres let rundt. Det er kun under Klinikken og Hvad vi tilbyder, at der kommer undermenuer.
Flowchart og valgte designparametre kan ses i Bilag 5.
Vores site præsenteres i Bilag 6 Storyboard som storyboard over alle siderne.
Realisering
Kundemøde 2
Ved andet kundemøde var kunden meget positiv og havde ikke nogle større overvejelser, men vi selv stødte ind i nogle problemstillinger i forhold til hvordan det var muligt for os at løse opgaven (designet) i WordPress. Derfor undergik siden herefter nogle design-mæssige forandringer, der dog ikke ændrede på den overordnede strategi. Blandt andet har vi arbejdet meget på at få runde menuknapper så de passer sammen med logo og ideen om de runde former. Farverne har vi justeret, da vi efter 2. kundemøde fandt frem til, at det vil blive for forvirrende med en menubar i for mange farver. Vores farvetema holder sig derfor til logoet.
WordPress (WP)
Vi startede med at udvikle eget tema baseret på vores øvelser. Det virkede fuldt ud, men vi gik bort fra det igen, da vi frygtede at senere php-komplikationer ville gøre det problematisk for os.
Vi har valgt at arbejde ud fra et tema i WP, der i høj grad imødekom de ideer vi havde for sidens opsætning. Temaet hedder ”Harvest” og er valgt på grund af ønsket om en venstre menubar i et simpelt design vi kunne redigere i selv, samt havde valgfrie widgets. Det har dog været en udfordring at få overført designstrategi til WP, da nogle ændringer ikke lod sig integrere så let. Se Bilag 7 WP tema for oprindeligt WP tema. Samtidig opdagede vi, at meget af det er grafik i det oprindelige tema, hvor vi i stedet har valgt at finde koder til mange af de grafiske løsninger.
Nogle af vore løsninger på sitet, fungerer desværre kun i nyopdaterede browsere på grund af css3 sprog. Man skal derfor opleve den i minimum IE9 for at kunne se det i netop den browser. Derfor ser storyboardet også ud som det gør. Men Firefox, Safari, Chrome og Opera viser den ”pænest”. Vi har brugt Adobe Photoshop til at finde farvekoderne fra logoet.
Den blå og den grønne farve signalerer ro, renhed og seriøsitet. Dog kan man diskutere, om de tonemæssigt skal arbejdes med, for at få et mere nutidigt look og design, uden at
12
det visuelt rykker sig for langt fra det originale, så både kunder og ansatte stadig kan identificere sig med.
Designparametre
Design-parametre
Funktion Æstetik Teknik/Økonomi
Form Sidens format er valgt ud fra kundens ønske om ingen scroll, og er lavet så den ser ens ud i alle browsere
Det gør det overskueligt både for kunde og kundes kunder og følger ønsket om en overskuelig side
Den lave grad af behov for opdatering og redigering holder udgifterne nede
Typografi Overskiften fungerer som header på alle sider og bliver sammenhængende med logo på alle sider. Brødtekstens størrelse er tilpasset de øvrige elementer og er informativ uden at være for tung. Skrifttypen er valgt så siden holder sit enkle, ”rene” look
Vi har valgt at fonten skal være enkel og ikke tage fokus fra indhold
Den er lidt bred, og meget åben, hvilket gør den læsevenlig for de fleste.
Illustration Skitse og billeder er med til visuelt at beskrive arbejdsfeltet for klinikken og give kommende patienter et kendskab til stedet inden de kommer
Skitsen er lavet med en løs streg, en enkel skitse der ligger som vandmærke på alle siderne. Billederne viser mere faktuelt hvordan klinikken ser ud
Billederne kommer fra klinikken selv og tegningen er tegnet af gruppen
Farve Hvidtonet baggrund og en farveskala der tager udgangs-punkt i klinikkens egne farver så der er sammenhæng imellem hjemmeside og klinik
Det er farver der traditionelt knyttes til faget, samt signalerer ro og renhed, samt seriøsitet
Farverne findes alle i WP designet og har derfor ikke nogen økonomisk faktor for projektet
Lyd Pga. klinikkens ønske om en side med meget lav grad af vedligeholdelse og meget enkel, er der ikke integreret lyd
13
Animation Pga. klinikkens ønske om en side med meget lav grad af vedligeholdelse er der ikke integreret animationer
Komposition
Læse retning på nyt site følger model a, da den består af både billeder, illustration og tekst, logoer og menubar.
AIDA
Awareness/attention Interest Desire Action
Logoet og billeder Præsentation af de patientbehov de
Løsning af patients behov
Nem adgang til kontaktoplysninger
14
kan dække samt imødekommenhed i billeder og tekst på siden
Valg af skrifter
Verdana
Risskov Risskov
Arial
Risskov Risskov
Farvevalg
#30256d # 2e765d
Samtidig har de allerede nogle ”corporate colors” der går igen både i deres arbejdstøj og deres arbejdsredskaber.
15
Vi har dog kun delvist brugt disse farver, da det skabte uro på siden med for mange farver i menubaren. Vi har valgt at fællesbilledet skal på forsiden for at tilføre en mere personlig dimension.
I den verden de arbejder i, er der ikke ret mange skarpe former, og det er iøjefaldende, at alle siderne er meget firkantede i deres design, når de arbejder med kroppen, og kroppen kun består af runde og bløde former. Samtidig er deres logo rundt, så der er lidt diskrepans imellem logo, arbejdet og det visuelle udtryk på hjemmesiden som den er nu. De runde former, bløde kanter og rolige farver der afspejler seriøsitet, vil fungere bedre og skabe en større overensstemmelse imellem det visuelle udtryk og virksomhedens egentlige arbejde.
Skitse til hjemmesiden
Endeligt site præsentation
I Bilag 8 Endeligt website kan man se et screen-dump af forsiden i endelig version.
16
Vurdering af samarbejde
Samarbejdet har fungeret godt. Vi har været gode til at uddelegere opgaver og sørge for at have en god løbende dialog. Selvom vi har haft meget forskellige tilgange, har vi formået at bruge vores kompetencer og været meget lyttende overfor hinandens synspunkter.
Vi har haft en meget åben tilgang til projektets udvikling og hele tiden sammenholdt med kundens ønsker og krav til siden. Vi har dog undervejs måtte justere i forhold til kunnen og hvordan det kom til at se ud.
Procesdokumentation
Projektplanen viser hvordan vores proces endte med at være i det virkelige liv. Se Bilag 9 Projektplan2
17
Bilagsoversigt
1 Bubbl figurer over indledende refleksioner
2 Projektplan 1
3 Tegneskitser
4 Fys generelt screen-dump
5 Flowchart
6 Storyboard
7 WP Temavalgt
8 Endeligt website
9 Projektplan 2
10 Kodeudskrift
26
Bilag 5 Flowchart og valgte designparametre
Form og illustrationer:
Stines sketch af pige med hår, set fra ryggen som baggrundsbillede – anbringes til højre på siden –
hånden hviler på fys-logo - tones ned.
Fotos komprimeres og gøres klar til indsættelse på websiden
Menu-punkter i farvede ovaler: lilla, blå, turkis og grøn
Logo øverst i venstre hjørne
Fysioterapeutforeningens logo i nederst højre hjørne (over footer)
Tekst:
Header: Verdana 36 pt - fed
Overskrift side: Verdana 18 pt - fed
Footer: Verdana 11 pt – fed
Menu: Verdana 12 – 12 pt – fed
Brødtekst: Arial 10 pt
35
Bilag 10 Kodeudskrift
Koderne til hjemmesiden:
Style.css
/*
Theme Name: Harvest
Description: Wordpress Theme for Fall
Version: 2.0
Author: Karen Blundell
Author URI: http://karenblundell.com
Tags: harvest, fall, orange, two columns, fixed width, widget ready,left sidebar
Changes: fixed sidebar to remove theme-switcher is now located in sidebar.php
and fixed images in post
*/
* {margin: 0; padding: 0;}
body { background-color: #2e765d; font-family: Verdana,Arial,sans-serif; font-size: 90%; color: #2e765d; margin: 0; padding: 0 }
#wrap { width: 90%; margin: 20px auto; padding: 0; background:#fff url(images/hent.evt.et.billede.ind.her) repeat-y; color: #2e765d; }
#head { height: 120px; margin: 0; padding: 20px; background: transparent url(images/logokunst_1.png) no-repeat; margin-left: 20px; color: #2e765d; }
#title { padding: 10px 0 0 10px; margin: 0 10px; font-size: 3.0em; font-weight: bold; text-align: center; color: #2e765d; background-color: transparent; }
#title a:link, #title a:visited { color: #30256d; text-decoration: none; background-color: transparent }
36
#title a:hover { color: #2e765d; background-color: transparent }
#desc { padding: 0px 20px 0px 10px; margin: 0 10px; text-align: left; }
#left { float: left; width: 15%; margin: 0 10px; padding: 0 20px 0 0; color: #5D2816; }
#left h2 { margin: 0 0 2px ; padding: 10px; font-size: 0.01em; background-color: transparent; color: #fff }
#left a:link, #left a:visited { margin-top: 10px; color: #2e765d; background-color: transparent; font-size: 1.2em; text-decoration: none; }
#left a:hover { color: #fff; background-color: transparent; }
#left ul { margin: 0px; padding: 0; }
#left ul li { list-style-type: none; margin: 0px; padding: 0px 0px 30px 0px; }
#left ul ul li { list-style-type: none; color: #5D2816; margin: 0px 5px 0px 10px; padding: 0px 5px 5px 5px; background-color: #30256d; border: 10px solid #fff; -moz-border-radius: 15px; border-radius: 15px; color: #fff }
#left ul.children { margin: 0px; padding: 5px 5px 0px 0px; }
#left ul.children li { margin: 0px; padding: 0px 5px 5px 12px; font-size: 0.8em; border: none; }
#content { float: right; width: 75%; height: 450px; font: arial; font-size: 10px; font-weight: bold; color: #111; background: transparent url(images/img/stinesbilledemedlogo.png) no-repeat top right; margin: 0; padding: 0px 20px 0px 0px; }
#content post { margin: 0px; padding: 0px 0px 30px 0px; line-height: 20px; }
#content post p { padding: 0 0 15px 0 }
#content post blockquote { padding-top: 0px; padding-bottom: 0px; }
#content post blockquote p { margin: 5px 0 0 0; padding: 10px 5px 10px 5px; border-left: 2px solid #8B7448; border-right: 2px solid #8B7448; }
#content ul { margin: 0px; padding: 0 5px 0 40px; }
#content li { list-style-type: disc; color: #5D2816; margin: 0px 5px 0px 5px; padding: 0px 5px 5px 0px; }
37
#content ol { margin: 0px; padding: 0 5px 0 40px; }
#content ol li { list-style-type: none; color: #5D2816; margin: 0px 5px 0px 5px; padding: 0px 5px 5px 0px; }
#content img { border:1px solid #fff; display: inline; margin:5px 5px 7px -5px; padding:4px; vertical-align: middle; }
#foot { clear: both; height: 40px; color:#30256d; }
#foot p { padding: 10px; text-align: center; font-family; font-size: 0.75em; font-weight: bold }
#commentlist { margin: 0px; padding: 0px; }
#commentlist li { list-style-type: none; margin: 10px 0px 10px 0px; padding: 5px 15px 0px 15px; border: 1px solid #8B7448; background-color: #BDC69E; color: #5D2816; }
#commentlist p { margin: 0px; padding: 10px 5px; }
#commentlist .commentmeta { font-weight: bold; margin-bottom: 5px; font-size: 0.75em; }
#commentlist .alt { background-color: #F6B384; border-color: #8B7448; color: #5D2816; }
#commentlist blockquote { background-color: #BDC69E; border: 1px solid #8B7448; color: #5D2816; }
#commentlist .alt blockquote { border-color: #8B7448; }
#commentform p { margin: 10px 0px 0px 0px; padding: 0px; }
#commentform textarea { width: 350px; }
.meta { margin: -2px 0px 0px 0px; padding: 0; font-size: 0.75em; font-weight: bold; }
.postmetadata { font-size: 0.75em; font-weight: bold; text-align: center; }
a:link, a:visited { color: #30256d; background-color: transparent }
a:hover { color: #2e765d; }
38
blockquote { background-color: transparent; color: #000; margin-left: 10px; margin-right: 15px; padding: 10px 20px 10px 30px; }
h1 { margin: 0; padding: 2px 0 2px 0; background-color: transparent; color:#30261B; font-size: 1.5em; }
h1 a { text-decoration: none; }
h1 a:link, h1 a:visited { color: #30261B; background-color: transparent;}
h1 a:hover { color: #111; background-color: transparent; }
h2 { background-color: transparent; color:#30261B; font-size: 1.3em; }
h3 { background-color: transparent; color:#30261B; font-size: 1.2em; }
h4 { background-color: transparent; color:#30261B; font-size: 1.0em; }
form { margin: 0px; padding: 0px; }
form input, form textarea, form submit { border: 1px solid #30261B; background-color:#BDC69E; }
img.centered {display:block; margin: 0 auto 5px auto; border:1px solid #8B7448; padding:2px; }
img.alignright { display: inline; border:1px solid #8B7448; margin:5px 7px 0 7px; padding:4px; vertical-align: middle; }
img.alignleft { display: inline; border:1px solid #8B7448; margin:5px 7px 0 7px; padding:4px; vertical-align: middle; }
img.border { border:1px solid #8B7448; padding:2px; }
.alignleft { float:left; text-align:left; }
39
.alignright { float:right; text-align:right; }
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
acronym { cursor: help; border-bottom: 1px dotted #96A66D }
Header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<!--[if IE]>
<style type="text/css">
body { width expression(document.body.clientWidth > 1003 ? "1003px" : "779px"); }
40
</style>
<![endif]-->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>
<body>
<div id="wrap">
<div id="head">
<div id="title"><a href="<?php bloginfo('home'); ?>"><?php bloginfo('title'); ?></a></div>
<div id="desc"><?php bloginfo('description'); ?></div>
</div>
Index.php
<?php get_header(); ?>
41
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
<p class="meta">Posted by <?php the_author() ?> - <?php the_time('F jS, Y') ?></p>
<div class="entry">
<?php the_content('Read More »'); ?>
</div>
<p class="postmetadata">Posted in <?php the_category(', ') ?> - <?php edit_post_link('Edit','',' - '); ?><?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
<p><?php the_tags(); ?></p>
</div>
<?php endwhile; ?>
<p align="center"><?php next_posts_link('« Previous Entries') ?> <?php previous_posts_link('Next Entries »') ?></p>
42
<?php else : ?>
<h2 align="center">Not Found</h2>
<p align="center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
</div>
<?php
get_sidebar();
get_footer();
?>
Sidebar.php
<div id="left">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<!-- START SEARCH -->
<li id="search"><h2><?php _e('Search:'); ?></h2>
<ul>
<li>
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
43
<div>
<input type="text" name="s" id="s" size="15" />
<input type="submit" value="Go" />
</div>
</form>
</li>
</ul>
</li>
<!-- END SEARCH -->
<!-- START PAGES LIST -->
<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>
<!-- END PAGES LIST -->
<!-- START CATEGORIES -->
<li id="categories"><h2><?php _e(' Blog Categories:'); ?></h2>
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>
<!-- END CATEGORIES -->
44
<?php if (function_exists('get_recent_comments')) { ?>
<!-- START RECENT COMMENTS -->
<li><h2>Recent Comments</h2>
<ul>
<?php get_recent_comments(); ?>
</ul>
</li>
<!-- END RECENT COMMENTS -->
<?php } ?>
<!-- START ARCHIVES -->
<li id="archives"><h2><?php _e('Blog Archives:'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<!-- END ARCHIVES -->
<!-- START META -->
<li id="meta"><h2><?php _e('Meta:'); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
45
<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">Entries RSS</abbr>'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<?php wp_meta(); /* do not remove this line */ ?>
</ul>
</li>
<!-- START LINKS LIST -->
<?php get_links_list(); ?>
<!-- END LINKS LIST -->
<?php endif; ?>
</ul>
</div>
Page.php
<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
46
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
<div class="entry">
<?php the_content('Read More »'); ?>
</div>
<p class="postmetadata"><?php edit_post_link('Edit','',''); ?></p>
<p><?php the_tags(); ?></p>
</div>
<?php endwhile; else : endif; ?>
<a href="<?php bloginfo ('home') ?>" class="alignleft">Til forsiden</a>
</div>
<?php
get_sidebar();
get_footer();
?>
Footer.php
<div id="foot"><p>Vestre Strandallé 168, st. • 8240 Risskov • Tlf. 8617 3422 • Fax 8617 6922 • Mail: [email protected]</p></div>
</div>