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

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">&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

  • 亚博娱乐官网_亚博pt手机客户端登录
  • 亚博娱乐官网_亚博pt手机客户端登录
  • Arrangement
  • Enheter

Eksempel p? overskrifter for UiO og fakulteter.

Institutt

  • 亚博娱乐官网_亚博pt手机客户端登录
  • 亚博娱乐官网_亚博pt手机客户端登录
  • Arrangement

Eksempel p? overskrifter for institutter.

Gr? boks inne i hvit boks

Brukes typisk i 亚博娱乐官网_亚博pt手机客户端登录-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.

 

Publisert 18. apr. 2016 17:43 - Sist endret 1. jan. 2023 02:44