Installasjonsguide: Hvordan redigere og laste opp CSS-kode

Innhold:

Nedlastning av designfil

Vi anbefaler først å laste ned standarddesignet (Bootstrap design) som er tilgjengelig i Compose. Måten du gjør det på er beskrevet her: Filstruktur for design-filer.

Når du har lastet ned Standarddesignet (Bootstrap design) og pakket ut zip-mappen, ser mappestrukturen og filnavnene slik ut. Det er viktig at dette ikke endres for det kan hindre Compose å lese av designfilen skikkelig.

img	bilder og ikoner
skin.css	Selve CSS koden
skin.properties	Fil som inneholder data som er nødvendig for at designfilen skal fungere. Denne filen skal ikke redigeres.

Neste steg er å lage en lokal HTML-fil. Ved å gjøre dette, har du mulighet til å kontinuerlig sjekke kode endringene som blir gjort i CSS og hvordan det påvirker skjemasiden.

Vi anbefaler å bruke forhåndsvis skjema funksjonen i Compose til å finne skjemasiden du ønsker å style.

De valgfrie Layout-elementene utgjør ulike elementer som vises på skjemasiden. Layout-elementene er: Logo, Visningsnavn Prosess, Vertikal navigering, horisontal navigering og Meny øverst.

Nå som vi har funnet skjemasiden vi ønsker å style, skal vi lagre HTML-koden som beskriver denne skjemasiden. Det gjøres slik:

Kopier sidekilde(HTML-dokumentet): Enten ved å høyre klikke og velge “Vis sidekilde“ eller bruke snarveien Ctrl + U:

Deretter åpnes et nytt nettleser vindu. Marker hele koden og kopier alt.

Deretter lager du en ny tekstfil i designfilen. I tekstfilen limer man inn hele koden som du nettopp kopierte.

2. Definere hvilken CSS-kode den lokale HTML-filen skal hente ut:

I head seksjonen i HTML koden finner vi metadata (data om data). Dette er informasjon som definerer selve HTML koden, men ikke vises direkte i nettleseren.

Her ønsker vi å endre hvilken CSS-kode som skal brukes. Vi ønsker å endre den til å bruke CSS-koden kalt skin.css. Den pleier vanligvis å finnes i kodelinje 40, ellers bruk bildene under som referanse.

I dette eksemplet redigerer vi kodelinjen fra: <link href="https://demo.usecompose.com/cng/_theme/bootstrap/skins/default/skin.css" rel="stylesheet" type="text/css">

Til: href="skin.css" rel="stylesheet" type="text/css">

Dette vil muliggjøre at HTML-koden bruker CSS-filen navngitt skin.css som da vil være lagret lokalt i samme mappe som textfilen(HTML-koden) vi nettopp redigerte.

Deretter endrer du filtypen ved å endre utvidelsen fra txt-fil til htm-fil, slikt:

Hvis endring av filtype ikke fungerer ved å endre navn fra txt til htm, kan det hende at innstillingen å vise filtyper ikke er satt opp. Pass på at denne er huket av.

Nå kan du åpne CSS-filen, skin.css, og gjøre endringene du ønsker. Får å teste ut forandringene kan du åpne den lokale HTML-koden (ny tekstfil) og umiddelbart se forandringen som er gjort. Skjema siden åpnes i din standard nettleseren (her Google Chrome).

CSS koden kan redigeres i hvilken som helst tekstredigeringsprogram. Vi bruker Notepad ++, som man kan laste ned gratis.

Deretter kan du åpne CSS-filen, skin.css, med Notepad++.

Koden vil se slik ut, og du har nå mulighet til å kunne sette dit preg på skjemasiden.

CSS syntaks

En CSS kode også kalt rule består av velgere og deklarasjoner.

Velgere

(Selector)

Referer til HTML-elementet man ønsker å designe.

Deklarasjoner

(Declarations )

Består av de design forandringene man ønsker å gjøre på de valgte HTML-elementene (Velgere).

Hver deklarasjon består av en egenskap og en påfølgende verdi, separert med kolon. Hver deklarasjon skal avsluttes med semikolon.

Den er avgrenset med krøllparenteser { }.

Egenskaper/attributter

(Property)

En CSS-egenskap er en egenskap (som farge) hvis tilhørende verdi definerer ett aspekt av hvordan nettleseren skal vise elementet

Verdi

(Value)

Definerer verdien til egenskapen som er valgt. Den tillater følgende typer verdier: heltall og reelle tall, lengder, prosenter, nettadresser og URIer, tellere, farger osv.

Kommentar

Kommentarer brukes til å forklare koden, og kan hjelpe når du redigerer kildekoden på et senere tidspunkt. Kommentarer ignoreres av nettlesere.

Kommentarene står mellom to skråstreker og to asterisker.

/* Kommentar skrives inn her*/

Chrome DevTools:

Chrome DevTools er et sett med nettutviklerverktøy bygget direkte inn i Google Chrome-nettleseren. Her kan vi redigere nettsiden direkte med CSS kode. Dette er veldig hjelpsomt siden vi får muligheten til å umiddelbart se hvordan endringen vil fremvises på nettsiden.

Høyreklikk på en hvilken som helst nettside side og velg Inspiser siden. DevTool vil da vise to forskjellige paneler. Den ene med nettsidens HTML-dokument og den tilhørende CSS-koden på den andre.

Slik laster du opp designet og implementerer det i Compose:

Når man har lagret alle endringene gjort i CSS koden kan man laste denne opp til Compose. Dette gjøres ved å konvertere hele designfilen til en zip-fil. Her er det viktig at mappestrukturen ikke endres. Ved å markere filene som vist på bilde og velge komprimer til zip-fil sørger du for å få riktig mappestruktur som kan leses av Compose.

Dermed velger man “Last opp design“ i Compose og velger riktig zip-fil.

Deretter kan du sjekke hvordan skjemaet fungerer med det nye designet ved å bruke forhåndsvisningsfunksjonen i skjemabyggeren.

NB: Skjema, prosessen og designet må ligge i samme arbeidsområde.

Måten man legger til designet i prosessen kan gjøres på forskjellige måter. Man har mulighet til å velge ulike design ved ulike deler av arbeidsflyten altså på ulike deler av tjenesten. Dette kan defineres ulike steder i prosessbyggeren.

Designet kan bestemmes for hele prosessen. Dette gjøres her: Innstillinger for prosessen → Egenskaper → Designvalg

Resten av prosessen vil ha det samme designet hvis ikke noen annet er bestemt.

For å endre designet i andre deler av tjenesten kan dette endres for Startpunkt og/eller Skjemaaktivitet.

Startpunkt: I prossessbyggeren velger du Startpunkt og i Standard perspektiv innstillinger under Egenskaper kan du endre design.

Standardinnstilling for hvilket design som skal brukes er satt til de “Samme som prosessinnstillinger“. Ved å endre til “Velg egen“ får man muligheten til å definere et annet design som skal brukes i Startpunktet.

Skjemaaktvitet: Ved å velge Skjemaaktvitet og Standard perspektiv innstillinger under Egenskaper er man her mulighet til å velge hvilket design som skal bruke på dette spesifikke skjemaet. Her er også standardinnstilling satt til “Samme som prosess innstillinger“. Andre alternativer er

Samme som startpunkt
Samme som forrige steg
Velg egen

På den måten kan du laste opp og bestemme design i tjenestene vi tilbyr.