Innstillinger av størrelse, farge etc. på bokser i forsidemalen

Størrelse og plassering

Her kan du velge å sette bokser som kommer etter hverandre sammen horisontalt. Tabellen under illustrerer de ulike mulighetene du kan sette sammen bokser på.

Full bredde
Halv bredde (Venstre) Halv bredde (Høyre)
Tredjedel bredde (Venstre) Tredjedel bredde (Midten) Tredjedel bredde (Høyre)
Tredjedel bredde (Venstre) To tredjedels bredde (Høyre)
To tredjedels bredde (Venstre) Tredjedel bredde (Høyre)

For å få til en plassering av bokser som tabellen over så må rekkefølgen på boksene i dokumentet være:

  • Full bredde
  • Halv bredde (Venste)
  • Halv bredde (Høyre)
  • Tredjedel bredde (Venstre)
  • Tredjedel bredde (Midten)
  • Tredjedel bredde (Høyre)
  • Tredjedel bredde (Venstre)
  • To tredjedels bredde (Høyre)
  • To tredjedels bredde (Venstre)
  • Tredjedel bredde (Høyre)

Farge

Setter en bakgrunnsfarge på boksen, padding og ramme, men også andre stilsettinger som er spesifisert nærmere for hver klasse under.

Blank / Ingen klasse og Hvit boks

Boksen vises uten bakgrunnsfarge

Grå boks

Gir boksen en grå bakgrunn

Spesielle innstillinger

Setter spesielle innstillinger på boksen med klassenavn.

Flere innstillinger kan listes etter hverandre med mellomrom mellom klassene.

Boks med fremhevede saker

Disse klassene må brukes på bokser som inkluderer et "Fremhevet sak"-dokument med $_{include:file}-komponenten.

featured-one-big-two-column

Viser den første fremhevede saken som en stor sak, og etter det mindre saker under hverandre i to kolonner hvis to saker og tre kolonner (uten introtekst) hvis tre eller flere.

featured-big-box-content-left

Plasserer den store hvite boksen i første sak til venstre (i stedet for høyre).

hide-featured-after-first

Skjuler fremhevede saker etter første sak.

hide-featured-after-third

Skjuler fremhevede saker etter tredje sak.

hide-featured-after-fifth

Skjuler fremhevede saker etter femte sak.

featured-vertical-items

660px sak til venstre og vertikalt 2 saker til høyre (eks, NHM og KHM).

full-width-picture

Bilde tar hele bredden av skjermen (bør foreløpig bare brukes på første boks).

Ingen klasse (fremhevede arrangementer)

Viser en sak i en kolonne, to saker vises i to kolonner (90px bilde) og tre eller flere i tre kolonner (uten introtekst) under hverandre.

Boks med fremhevet sak (direkte fra boks)

Disse brukes i kombinasjon med kodene over.

content-over-image-right

Lager en stor sak ut av en boks med innholdet som en hvit boks til høyre over bildet (ser ut som den store fremhevede saken alene).

content-over-image-left

Lager en stor sak ut av en boks med innholdet som en hvit boks til venstre over bildet (ser ut som den store fremhevede saken alene med "featured-big-box-content-left").

content-over-image-third

Setter bredden på boksen med innholdet ned fra 50% til 33%. Klassen må stå i tillegg til klassen content-over-image-left. Eksempel på 33 prosent-forsideboks

Eksempel

Koden nedenfor viser stor boks for bilde med venstrejustert tekstboks på bildet:

featured-one-big-two-column content-over-image-left

RSS-strøm

Stilarkklasser for RSS-strømmer plasseres på bokser som inkluderer en RSS-komponent med $_{include:feed} eller $_{include:feeds}.

two-column-feed

Deler sakene fra RSS-strømmen opp i to kolonner.

three-column-feed

Deler sakene fra RSS-strømmen opp i tre kolonner.

feed-image-over

Legger bilde i RSS-strøm over tittel og ingress, og bruker thumbnail-størrelsen istedenfor å skalere til 90px.

Subfolder meny

Trenger ikke sette klasse lenger. Deler nå opp automatisk basert på result-sets ([1] eller ingen = 100%, [2] = 50%, [3] = 33.33% og [4] = 25%).

Diverse

third-box-double-no-vertical-line

Tar bort den vertikale streken i to tredjedels bredde boks.

big-list

Øker fontstørrelse og firkanter. Kan også settes direkte på <ul>.

bigger-box-content-text

Stor kursiv tekst med serifer sentrert i boks.

img-left

Plasserer bilde i boks som tar full bredde til venstre istedet for høyre (samme plassering som i boks som tar halv bredde).

img-special-left

Plasserer bilde i boks til venstre litt utover kanten. Brukes sammen med overskrift og tekst inne i boksinnholdet som ikke er høyere enn bilde. Eksempel andre boks.

img-special-right

Plasserer bilde i boks til høyre litt utover kanten. Brukes sammen med overskrift og tekst inne i boksinnholdet som ikke er høyere enn bilde.

box-portrait-90-image

90px høyde bilde i halv- eller tredjedelsboks.

half-box-60-image

60px bredde bilde i halv- eller trejdedelsboks.

half-box-wide-image

Ingen begrensing på bildebredde og uten flyt i halv- og tredjedelsbokser.

super-wide-picture

Ingen begrensing på bildebredde og uten flyt i halv- og tredjedelsbokser + h2 under bilde.

grid-color-dark-grey

Gir hele raden en mørk gråfarge. Bruk den bare sammen med blank / hvit boks.

hide-box

Skjuler hele boksen.

responsive-hide

Skjuler hele boksen bare fra responsivt design.

responsive-last

Nedprioriterer bokser til bunnen (i rekkefølgen de forekommer).

responsive-last-right-column

Nedprioriterer bokser til bunnen av høyrekolonne (i rekkefølgen de forekommer).

no-margin-bottom

Fjerner luft under boks (tidligere combine- klasser går ut).

Boksbilde som bakgrunn (kampanjebokser)

Disse tre klassene skal bare benyttes til å fronte UiOs rekrutteringskampanje.

box-image-background

Gjør boksbilde om til en bakgrunn og setter hvit tekst og understreking på lenker.

box-image-link

Gjør hele boksen klikkbar som går til lenke satt på boksen (kan bare kombineres med box-image-background).

campaign-box

Setter større tekst og gjør plass på høyrekanten til person.

I høyrekolonne

vrtx-distach-bottom

Brukes på bokser som skal kobles fra og gi mellomrom til boks under.

grey-clip-box

Bør kun brukes på øverste boks i høyrekolonne. Gir boksen grå bakgrunn, og plasserer en binders oppe til høyre hvis denne settes i staren av kildekoden i boksen:

<div><span class="icon">&nbsp;</span></div> (TODO)

Dele opp innholdet inne i en boks

Deler opp én boks vertikalt.

Dette er HTML-kode som må legges inn i en boks ved å trykke "Kilde" i CK-editoren i "Innhold"-feltet,
og deretter skrive inn <div>-ene med klassenavnene.

Todeling

<div class="left">
   [innhold til venstre]
</div>
<div class="right">
   [innhold til høyre]
</div>

left

Plasseres på den første <div>-en i kildekoden, og innhold i denne kommer da til venstre og tar halve plassen. (eks "Bachelor og 5-årig master og profesjon"-boks)

right

Plasseres på den påfølgende <div>-en i kildekoden, og innhold i denne kommer da til høyre og tar også halve plassen. (eks "Master"-boks)

Tredeling

<div class="thirds-left">
   [innhold til venstre]
</div>
<div class="thirds-middle">
   [innhold i midten]
</div>
<div class="thirds-right">
   [innhold helt til høyre]
</div>

thirds-left

Plasseres på den første <div>-en i kildekoden, og innhold i denne kommer da til venstre og tar en tredjedel av plassen.

thirds-middle

Plasseres på den påfølgende <div>-en i kildekoden, og innhold i denne kommer da i midten og tar en tredjedel av plassen.

thirds-right

Plasseres på den siste påfølgende <div>-en i kildekoden, og innhold i denne kommer da helt til høyre og tar også en tredjedel av plassen.

Fjerdedeling

<div class="fourths-left">
   [innhold til venstre]
</div>
<div class="fourths-middle">
   [innhold i midten 1]
</div>
<div class="fourths-middle">
   [innhold i midten 2]
</div>
<div class="fourths-right">
   [innhold helt til høyre]
</div>

fourth-left

Plasseres på den første <div>-en i kildekoden, og innhold i denne kommer da til venstre og tar en fjerdedel av plassen.

fourth-middle x2

Plasseres på de to påfølgende <div>-ene i kildekoden, og innhold i disse kommer da i midten og tar en fjerdedel av plassen.

fourth-right

Plasseres på den siste påfølgende <div>-en i kildekoden, og innhold i denne kommer da helt til høyre og tar også en fjerdedel av plassen.

Horisontal midtstilling av bilder

Horisontal midtstilling av bilder, for eksempel i forhold til en lenke, bruk klassen: class="align-middle-image".

Store overskrifter på bokser

Generelt skal frontpage-big-title kun brukes i tilfeller der man ønsker at innhold skal løftes frem, dvs. at det aldri vil være slik at alle overskrifter på en side har denne. 

Innhold som skal løftes frem

UiO/Fakultet

  • Studier
  • Forskning
  • Arrangement
  • Enheter

Eksempel på overskrifter for UiO og fakulteter.

Institutt

  • Studier
  • Forskning
  • Arrangement

Eksempel på overskrifter for institutter.

Grå boks inne i hvit boks

Brukes typisk i Studier-boksen på forsiden. Legges f.eks. inn i bunnen av boksen slik:

<div class="grey-content-box">
  <strong><a href="http://www.uio.no/studier/apen-dag/">Åpen dag ved UiO torsdag 8. mars. Velkommen til campus!</a></strong>
</div>

Navigasjonslenker / tiles

Sett navigation-links på boksen for å gjøre om en liste med lenker til navigasjonslenker / tiles. Får automatisk hvit istedetfor grå bakgrunn i grå boks. Eksempel første boks.

Sett også på navigation-links-three-columns hvis det skal være 3 pr. rad (istedet for 2) eller navigation-links-four-columns hvis det skal være 4 pr. rad (istedet for 2).

Publisert 18. apr. 2016 17:43 - Sist endret 23. apr. 2018 14:56