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
- Å·ÖÞ±ÔÚÏßÂòÇò_Å·ÖޱͶעÍøÕ¾ÍƼö@
- Å·ÖÞ±ÔÚÏßÂòÇò_Å·ÖޱͶעÍøÕ¾ÍƼö@
- Arrangement
- Enheter
Eksempel p? overskrifter for UiO og fakulteter.
Institutt
- Å·ÖÞ±ÔÚÏßÂòÇò_Å·ÖޱͶעÍøÕ¾ÍƼö@
- Å·ÖÞ±ÔÚÏßÂòÇò_Å·ÖޱͶעÍøÕ¾ÍƼö@
- Arrangement
Eksempel p? overskrifter for institutter.
Gr? boks inne i hvit boks
Brukes typisk i Å·ÖÞ±ÔÚÏßÂòÇò_Å·ÖޱͶעÍøÕ¾ÍƼö@-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.