Design jeres tema

Formål:

Dette dokument vil give dig en introduktion til, hvordan du kan designe temaer i DitmerFlex.
Her kan du sætte din organisations præg på udseendet og gøre det letgenkendeligt for brugerne. 

Igennem dokumentet bliver du både vejledt i hvilke informationer, du kan udfylde til designet og selve brugen af farveskabeloner.

Vejledning:

Først skal du klikke på "Indstillinger", hvorefter du vil blive mødt af denne side:

Her ser du i venstre side se forskellige menupunkter. Under kategorien "Fælles" ligger der en kategori ved navn "Temaer", som du kan se med blå pil på nedenstående billede. 

Når du klikker dig ind på Temaer, vil du blive mødt af følgende billede:

Her ser du en oversigt over forskellige kasser, som du kan udfylde for at gøre temaet personligt for organisationen. 

I punkt 1 under "Generelt" kan du navngive organisationen og
i punkt 2 kan du beskrive temaet.
I punkt 3 kan du uploade organisationens tema fra en fil, så denne også bliver tilføjet.
Denne funktion kan fx bruges, hvis du har lavet et tema på jeres testmiljø eller på en anden organisation.
I punkt 4 er det muligt at uploade et logo fra en fil, hvilket vil sige, at du kan gå ind og finde organisationens logo og tilføje det,
og punkt 5 viser her, hvordan det vil se ud med logoet. 

I punkt 6 under "Menu" kan du vælge om top-menuen skal placeres i enten venstre side eller højre side.
I punkt 7 kan du se, hvordan det vil se ud.

Hvis I har en ønsket font, er det også muligt at importere denne med en zip-fil. Her klikker du blot på "Vælg fil.." som vist med blå pil på nedenstående billede.

Farver

Er du til HTML-koder kan du også gå ind og lege med disse nederst på skærmen. Her vil du blive mødt af de forskellige koder til de forskellige kategorier. Det er muligt blot at klikke på farven, hvis du ikke har en specifik kode til den ønskede farve.

Generelt

Der vil nu blive gennemgået de forskellige kategorier, som du kan ændre farverne på.
Vi starter helt overordnet med websidens primære farver.

Globalt og Menuer

På nedenstående billede ser du forklarende overskrifter, der beskriver, hvad farvekoden vil ændre.

Nedenstående billede viser her, hvor:
punkt 1: Toppens baggrundsfarve ændres,
punkt 2: sidens baggrundsfarve,
punkt 3: menupunktets farve,
punkt 4: menupunkt ved aktiv tilstand, og i
punkt 5: menupunkt ved mouse-over.
Under punkt 3, 4 og 5 ses der den tilhørende tekstfarve, som også kan ændres. 

Knapper

Nedenstående billede viser, hvor du kan ændre farve på de forskellige knapper.

Ved punkt 1 ses den valgte "Primære knapfarve"

og punkt 2 viser den valgte "Primære knapfarve ved aktiv tilstand", som er vist på nedenstående billede. 

Paneler

Det er også muligt at ændre farve på panelerne,
hvor punkt 1 er baggrundsfarven på panelets top,
og punkt 2 er tekstfarven i panelets top.

Der er vist et eksempel på billedet nedenfor ved  
punkt 1: baggrundsfarven, og
punkt 2: tekstfarven. 

Elementer

Nedenstående billede viser, hvor du kan ændre farve på de forskellige elementer. 

Her kan du ved punkt 1 ændre baggrundsfarve på elementet,
ved punkt 2 kan du ændre baggrundsfarve på elementet i aktiv tilstand,
og punkt 3 kan du ændre baggrund for beskrivelsen af elementet.
På nedenstående billede kan du se, hvor de enkelte punkter vil ændre farve. 

Blanketter

Under blanketter er der nogle felter, der ikke kan redigeres, men som står i "read-only" visning. Disse kan også ændre farve, og nedenstående billede viser, hvor dette kan gøres.

I punkt 1 kan du ændre tekstfarven 
og i punkt 2 kan du ændre baggrundsfarven til blanketten, hvilket du kan se fremhævet på billedet nedenfor. 

Det er også disse farver, der bliver brugt i de PDF'er, som systemet genererer.

Lister/Tabeller

På forsiden af DitmerFlex vil du kunne se dine forskellige blanketter og nedenstående billede viser, hvor du kan ændre farven på disse tabeller. 

Nedenstående billede viser et eksempel, hvor du kan se hvor de forskellige farver vil ændre sig.
Punkt 1 viser farven på toprækken,
punkt 2: tekstfarven på toprækken,
punkt 3: baggrundsfarven på ulige rækker,
punkt 4: baggrundsfarven på lige rækker,
og punkt 5: baggrundsfarven på rækker, hvor musen bliver holdt henover. 

Det var dét! Nu er du klar til at designe temaet, så det stemmer overens med jeres organisation.