For eksterne nettsider finner du også flere innstillinger i UiOs designmanual.
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).
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
Fullbredde bilde
Bruk "Bilde"-feltet på forsideboksen. Anbefalt bildestørrelse er 1920x300 (eller det dobbelte 3840x600 for å støtte høyoppløselige skjermer).
For å fjerne tittel / h1 og luft til header må du legge det inn i feltet under accordion "Inkluder CSS":
/vrtx/decorating/resources/dist/style/hide-h1.css
Hvis du skal ha tekst i boksen må du bruke content-over-image-left eller content-over-image-right .
full-width-picture
Bilde tar hele bredden av skjermen (bør foreløpig bare brukes på første boks).
full-width-picture-fixed
Bilde tar hele bredden av skjermen og skal holde seg sentrert (bør foreløpig bare brukes på første boks).
full-width-picture-top
Ekstra klasse for å sikre at toppen av bilde kommer med (bør foreløpig bare brukes på første boks).
full-width-picture-bottom
Ekstra klasse for å sikre at bunnen av bilde kommer med (bør foreløpig bare brukes på første boks).
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.
center-text
Sentrere tekst i boksen.
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.
hide-overflow
Sett denne klassen på en liste / <ul>, hvis den ligger ved siden av et flytende bilde og punktene i punktlisten ikke vises.
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"> </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). Hvis du bare ønsker 1 pr. rad (istedet for 2) kan du bruke navigation-links-one-column.