Design jeres tema

Formål:

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

I det kommende bliver du både vejledt i hvilke informationer du kan udfylde til designet, samt ændre i farverne.

Vejledning:

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

Her ser du ude i venstre hjørne, forskellige grå kategorier. Under over-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 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 denne,
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 også 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å, og vi starter helt overordnet med websidens primære farver.

Globalt og Menuer

Her ser du på nedenstående billede, 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 her hvor du kan ændre farve på de forskellige knapper.

Ved punkt 1 ses den valgte "primære knap farve"

og punkt 2 viser den valgte "primære knap farve ved aktiv tilstand", hvilket ses 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, og det er vist hvor man ændrer dette, på nedenstående billede. 

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 jeres tema, og hvis ikke - så kommer du bare tilbage og tager et kig mere!