Layout

Det finnes flere (HTML) elementer på bestillingssiden/innloggingssiden som kan tilpasses. Enkelte av disse er tilordnet (CSS) klasser som gjør det enkelt å definere ønsket utseende. Disse presenteres nedenfor med enkle eksempler på bruk.

Sidestruktur

Siden er byggd opp rundt en tabell med to rader, der første rad har en kolonne og rad to har to kolonner.

.login

Klassen er satt på <table>-elementet som utgjør layouten på bestillingssiden.

.toppBanner

Denne klassen er tilordnet det første <td>-elementet i <table>-elementet som utgjør layouten på bestillingssiden.

Kan for eksempel brukes til å legge inn logo eller andre grafiske elementer. Elemetet inneholder igjen et element <div class="linksTopRight">.

.login .toppBanner {
        background: no-repeat url(./logo.png);
        background-color:#333334;
        height:39px;
}

.linksTopRight

Klassen er tilordnet et <div>-element som inneholder en lenke til abonnementsvilkår for den aktuelle tittelen. (Andre lingnende lenker kan tenkes å dukke opp her.)

.login .linksTopRight {
        position:relative;
        top:5px;
}

.main

Første kolonne i rad to i <table>-elementet. Inneholder mesteparten av innholdet på bestillingssiden og innloggingssiden.

.login .main {
        width: 424px;
        background: url(cover.jpg) no-repeat 1px 10px;
        padding-left:130px;
}

.heading

En av tre <div>-elementer under .main

.content

Inneholder selve innholdet (bestillingsbilde eller logingbildet). Det meste her er allerede styrt av applikasjonen.

.minimumBredde

Et element for designmessige mål. Kan brukes til å sette bredden på innholdet, samt et bakgrunnsbilde i bunnen av skjema.

.login .main .minimumBredde {
        width: 500px;
        height: 20px;
        background: url("banner.png");
}

.hoyreBanner

Kolonnen til høyre i <table>-elementet inneholder ikke øvrige elementer eller tekst. Dette brukes kun til designmessige formål.

.login .hoyreBanner {
        background: no-repeat url(rightBanner.png);
        background-color: aqua;
        width:200px;
}

Filer

Utgangspunktet for filene er /selfservice/ (Context for applikasjonen). Parameter for klientid og tittel byttes ut med reelle verdier. Rekkefølgen for stilarkene er som definert nedenfor. Vanlige CSS regler gjelder.

  • /styling/common.css

    Felles stilark for alle sider i applikasjonen. Kan ikke endres per klient-miljø eller tittel. (Den er listet opp her for å få et komplett bilde av hvilke stilark som blir lastet.)

  • /resources/klientid/tittel/cover.jpg

    Bilde av forsiden av bladet. Denne brukes i oversikts-bildet når kunden er logget inn. Både i listen over gjeldende abonnement og i listen over abonnement kunden kan bestille. I disse tilfellene blir den inkludert av applikasjonen. For innloggingsbildene, samt bestillingssiden må den evt. inkluderes i stilarkene. Formatet er JPG og bør være 120 ganger 160 pixler. (Bredden er viktigst.)

  • /resources/klientid/tittel/custom.css

    Stilarket gjelder for en gitt tittel i et gitt klient-miljø. Her defineres gjerne regler for å sette inn cover, samt andre felles stil-regler.

  • /resources/klientid/tittel/exposure.css

    Dette stilarket blik kun inkludert dersom en eskponeringskode er med i request'en. (Query-string eller et POST-parameter.)

  • /resources/klientid/tittel/logo.gif

    Evt. logo som kan benyttes på innloggingsiden og bestillingssiden.

Eksempel på filstruktur for tilpassning av layout i et klient-miljø:

+- resources/
   +- 1/
      +- TOTT/
         +- cover.jpg                   <-- Cover
         +- custom.css                  <-- Felles for denne tittelen
         +- exposure.css                <-- Felles for alle eksponeringer
         +- exposure/
            +- T1.css                   <-- Eksponering T1
            +- T2.css                   <-- Eksponering T2
         +- images/
            +- background.jpg           <-- Evt bakgrunnsbilde 
            +- logo.gif                 <-- Logo
      +- CONMAG/
         +- custom.css
         +- exposure.css