Brukerveiledning for administratorer
Fafo oppgraderer sine nettsider og har i den forbindelse litt problemer med søkefunksjonen og visning av publikasjoner. Hvis du ikke finner det du leter etter kan du sende en epost til så skal vi bistå deg

9.1 – Layoutmalen, tilpasning med Custom Settings og custom.css

Hvis du velger hovedmenyvalget Extensions > Templates, så får du opp en liste med 3 maler. Malene Hathor og isis er administratormaler, og som det framgår av den gule stjernen i kolonnen Default så bruker fafo.no isis som mal for administratorsidene. Det er vanligvis ikke noe behov for å endre eller tilpasse administratormalene. Når det gjelder selve nettsidene så er det kun én mal som er installert og som derfor brukes på alle sidene: yoo_eat. Det er ikke tilfeldig at det er valgt en mal fra Yootheme som basis for hvordan nettsidene skal se ut; ZOO er også et Yootheme-produkt, og ved å bruke en mal fra samme utvikler er vi sikret full kompatibilitet mellom ZOO og layouten på sidene.

Advarsel!

Hvis du gjør endringer av sidemalen til fafo.no uten å være 100% sikker på at endringen(e) du gjør får nøyaktig den konsekvensen du tilsikter, risikerer du å gjøre stor skade på sidene. Det er heller ikke uten videre enkelt å få tilbake sidene slik de var før endringene, med mindre du sletter alt og laster opp og installerer en sikkerhetskopi.

Redigering og endringer av sidemalen for fafo.no krever en god forståelse av og ikke minst erfaring med CSS og HTML, i tillegg til en tilstrekkelig oversikt over filstruktur og oppbygging av fafo.no. Uansett hvor mye erfaring du har bør du huske på disse arbeidsreglene:

  • Test endringer lokalt: Du bør alltid ha en oppdatert versjon av fafo.no installert på en lokal maskin. Her kan du teste alt du ønsker uten å være redd for å gjøre skade. Når du er sikker på at endringene du har foretatt fungerer slik de skal kan du overføre disse til selve fafo.no.
  • Ta kopier av filene før du endrer noe: Dersom du skal gjøre endringer i f.eks. custom.css, bør du ta en kopi av filen før du gjør noen endringer. Da kan du i verste fall slette den endrede filen og laste opp originalen du kopierte før du begynte.

Hva avgjøres av sidemalen

Nær sagt alle nettsider, uansett om de er Joomla!/ZOO-basert eller ikke, baserer seg på en eller flere sidemaler for å gi nettsidene et konsekvent og uttrykk og en ønsket design. Men det kan være forvirrende å avgjøre hva som bestemmes av sidemalen(e) og hva som bestemmes av den enkelte komponent eller Joomla! selv. Her er to lister som kan være til hjelp:

Sidemalen(e) bestemmer over

  • Mulige posisjoner på sidene: Det er sidemalen som bestemmer de ulike posisjonene som er tilgjengelige på siden. Se kapittel 1.3.1 – Layoutposisjonene på fafo.no.
  • Farger og symboler: Farger på knapper, linjer, bakgrunner osv. bestemmes i stor grad av sidemalen(e).
  • Skrift (fonter), størrelse, avstand: Skrifttype, størrelse og avstander på de ulike overskriftstypene (h1, h2 osv.), brødtekst, bildetekster osv. bestemmes i stor grad av sidemalen(e).
  • Menyer, dialoger, knapper: Denne typen elementer bestemmes også i stor grad av sidemalen(e). 

Sidemalen(e) har liten eller ingen innflytelse på

  • Innholdet på sidene: Innholdet på sidene bestemmes hovedsakelig av ZOO; hvilke artikler eller oppsummeringer som publiseres hvor.
  • Innholdet i menyer, dialoger og knapper: På samme måte blir hva som en meny eller en dialog inneholder definert av den aktuelle kombinasjonen av meny og modul etc.
  • Den konkrete plasseringen av moduler o.l.: Sidemalen definerer posisjonene på sidene, men de enkelte moduler, menyer etc. kan fritt plasseres i en hvilket som helst av disse posisjonene.

En moderne sidemal er fleksibel og kan skreddersys på mange måter. Dette gjelder også generelt for layoutmalene fra Yootheme og yoo_eat som benyttes på fafo.no. På fafo.no benytter vi stort sett to måter for tilpasning av sidemalen; Styles Settings og custom.css. Layouten for fafo.no er først og fremst skreddersydd ved hjelp av custom.css. Vi skal derfor først gjennomgå bruk av custom.css, deretter Styles Settings.

Skreddersøm via custom.css

Hvis du klikker på Yoo_eat i kolonnen til høyre (Template), så kommer det opp en ny side som viser en filoversikt på venstre side. Dette viser filstrukturen inne i mappen public_html > templates > yoo_eat. Hvis du klikker på «css» så åpnes denne mappen og du ser de ulike CSS-filene for yoo_eat. Den eneste som skal endres er «custom.css».

custom.css inneholder alle CSS-regler som enten er endret eller lagt til yoo_eat og definerer formateringen på alle de områdene der det er avvik fra standardformateringen i yoo_eat. For å skaffe deg en oversikt over hvilke endringer som er gjort bør du kopiere ut alt innholdet i custom.css og lime det inn i en HTML-editor eller en ren teksteditor. 

NB! Ikke bruk Microsoft Word eller andre tekstbehandlingsprogrammer for å redigere CSS- eller HTML-filer, da risikerer du å lime inn mye «søppelkode» når/hvis du limer innhold tilbake i custom.css.

Hvordan skreddersy layoutene ved hjelp av custom.css

Hvis du skal skreddersy layouten på fafo.no ved hjelp av custom.css trenger du noen hjelpemidler:

  • Nettinspektør: De fleste nettlesere har muligheten til å vise en nettinspektør, enten som en standardfunksjon integrert i nettleseren eller som et tillegg som kan installeres. Web Inspector er integrert i Safari, Chrome Developer Tools i Chrome, F12 Tools i nyere versjoner av Internet Explorer og Firebug er en populær variant for nettleseren Firefox.
  • HTML/CSS-editor: Du må bruke en editor som ikke legger til mer eller mindre usynelig kode mens du redigerer, da kan resultatet bli svært overraskende. Du kan redigere custom.css direkte i editoren i yoo_eat, men ofte kan det gi bedre oversikt å kopiere ut innholdet til en ekstern editor, redigere der og lime inn igjen. Da kan du samtidig ta en kopi av innholdet før du gjør noen endringer, slik at du kan gjenopprette originalen hvis du skulle angre på endringene du har gjort.

Under forutsetning av at du vet hva du gjør (!) er det viktig å følge en del retningslinjer når du redigerer custom.css:

  • Finn den presise definisjonen: Selv med en god nettinspektør kan det noen ganger være vanskelig å finne akkurat den CSS-regelen som avgjør hvordan et element blir formatert. De fleste nettinspektører lar deg imidlertid markere elementene på nettsiden og framhever definisjonen av det ene elementet, eventuelt kan man også skrive en midlertidig regel direkte i nettinspektøren for å teste ut om regelen/endringer gir ønsket resultat.
  • Sjekk hvor den opprinnelige regelen er satt: Når du markerer et element vil som regel nettinspektøren vise deg hvor den originale CSS-regelen er satt, f.eks. «theme.css:9498», som betyr på linje 9498 i filen theme.css. Eventuelt kan du klikke på lenken for å åpne filen og inspisere CSS-regelen nærmere.
  • Sjekk at du ikke allerede har skreddersydd formateringen: Av og til kommer det opp en henvisning til custom.css når du markerer et element (f.eks. «custom.css:584»). Det betyr at det allerede er laget en spesialregel for dette elementet. og da må du avgjøre om du ønsker å endre denne regelen, noe som vil føre til at alle elementer av denne typen blir endret, eller at du vil forsøke å lage en spesialregel som kun får innvirkning på dette og eventuelt noen få andre elementer av samme type.
  • Begrens omfanget: Det er svært viktig å begrense omfanget av en ny eller endret regel til nøyaktig de elementene du ønsker. Hvis du f.eks. lager en ny regel for h2, risikerer du å endre nær sagt alle h2-overskrifter på fafo.no, noe du nesten garantert ikke ønsker. Hvis du derimot endrer «h2.pos-title» har du allerede begrenset virkningen av endringen til kun å gjelde h2-elementer av klassen .pos-title.
  • Skriv kommentar: Når du går gjennom custom.css så ser du at det over nesten hver eneste CSS-regel står en kommentar av typen «/*Denne regelen gjelder for XYZ...*/. Dette er helt nødvendig for å forklare både deg selv og andre administratorer hva regelen gjelder for. NB! Forklaringen  skrives samtidig med at du legger inn regelen, det nytter ikke å tenke på at man skal gjøre det «etterpå», da blir det enten glemt eller man husker ikke nøyaktig hvorfor man gjorde det man gjorde!
  • Hold orden: custom.css består allerede av nesten 1000 linjer, og så lenge det blir gjort endringer i custom.css er det en løpende oppgave og utfordring å holde orden på reglene og sortere dem slik at det blir minst mulig problematisk å finne fram.
  • Tenk hierarkisk: custom.css er den siste CSS-filen som lastes inn, det er derfor reglene som legges inn her overstyrer alle standardregler. Men husk at det kan forekomme at flere, ulike regler i custom.css kan influere på formateringen av et element. I slike tilfeller er det viktig å enten forenkle det hele slik at man ender opp med kun én regel, eller plassere dem under hverandre på en slik måte at hver av de beslektede elementene får den formateringen man ønsker.

Bruk klasser for å spesifisere formateringen

I mange tilfeller er det mulig å tildele f.eks. en liste i en Full-layout, en meny eller en modul en spesifikk CSS-klasse. Dette er gjort på mange steder i fafo.no. Da er det mye enklere å gi en helt presis CSS-regel som kun angår denne klassen.

Hvis du f.eks. klikker på modulen «Fafo-Tv – ukas toppinnslag» og ruller helt ned til bunnen, ser at i feltet for Module Class Suffix står det «fafo-tv». Dersom du nå går til hovedmenyvalget FAFO-TV og inspiserer toppinnslaget øverst på siden i din nettinspektør, så vil du se at det står «div class="uk-panel uk-panel-box fafo-tv"». Dette elementet har med andre ord fått en ekstra klasse (fafo-tv), og vi kan skrive en presis CSS-regel som kun vil få innvirkning på elementer av denne typen ved å spesifisere den som «.uk-panel.uk-panel-box.fafo-tv».

Dessuten kan vi benytte oss av dette for å skrive presise regler for alle elementer inne i dette omsluttende elementet, f.eks. en overskrift eller et annet tekstelement. Hvis du f.eks. markerer lenketeksten «Se sendingen i eget...» og ser på definisjonen av denne i nettinspektøren, så ser du følgende: «.fafo-tv div.element.element-link» og en henvisning til custom.css med en linjeanvisning. Vi har altså skrevet en regel som ikke bare begrenser formateringen av elementer til typen element.element-link, men begrenset virkningen ytterligere ved å kreve at dette elementet må stå inne i et annet element med klassen fafo-tv.

Konklusjon

Det eksisterer en rekke ulike teknikker og måter å skreddersy en Joomla!-mal som yoo_eat på. Fafo har standardisert hovedsakelig på skreddersydde regler i custom.css, da dette gir en ryddig oversikt over nesten alle tilpasninger som er gjort med yoo_eat på ett sted. Det at man kan skreve kommentarer/forklaringer til reglene bidrar til å gjøre det enklere å holde oversikten.

I avsnittene nedenfor skal vi gjennomgå den andre hovedmetoden for å skreddersy yoo_eat. Fordelene er flere, blant annet at man ikke behøver å skrive (og kjenne til) CSS-reglene i detalj. Men som vi skal se er det også en del ulemper og problemer med å skreddersy malen(e) på denne måten. Metodene her er derfor kun benyttet i begrenset grad.

Skreddersøm via Styles Settings og Customizer

Hvis du klikker på navnet «yoo_eat - Default» i kolonnen Style, så kommer du til en ny side med 3 faner:

  • Details: Her får du kun litt generell informasjon om yoo_eat. I høyre kolonne ser du at denne malen er satt som standard (Default) for alle sidene.
  • Options: Her får man en rekke konfigurasjonsvalg. Se avsnittene nedenfor.
  • Menus Assignment: Dersom man bruker flere, ulike sidemaler kan man her krysse av hvilke sider som skal bruke hvilken sidemal. Så lenge fafo.no kun bruker én sidemal er det ikke nødvendig å krysse av noen valg her.

Options – Settings

De fleste valgene her er selvforklarende. Valgene for Development, Compression, Responsive og Bootstrap bør ikke endres på. Det viktigste valget er Styles > Customizer. Hvis du klikker på denne knappen, kommer du inn i et konfigurasjonsvindu med en lang rekke valg for fonter, farger, avstander osv. i venstre kolonne og nettsiden på høyre side. Du kan med andre ord gjøre endringer og øyeblikkelig se endringene på nettsiden(e). Ved å krysse av for Advanced Mode får man opp enda flere valg.

  • Customizer: Customizer er et kraftig verktøy og gjør det mulig å tilpasse/skreddersy en rekke elementer på nettsidene. Men det er noen problemer forbundet med bruk av Customizer:
    • Uoversiktlig/vanskelig å finne nøyaktig element: Fordelen med Customizer er at man kan prøve ut endringer og se hvordan de virker på sidene før man eventuelt trykker på Save. Ulempen er at det kan være ganske vanskelig å finne akkurat den innstillingen man ønsker, på tross av inndelingen i bolker. 
    • Vanskelig å huske endringer: Det er ikke noe system for notater i forbindelse med endringer av layoutmalen, og det vil derfor være vanskelig å huske nøyaktig hvilke endringer som er gjort hvor.
    • Endringer kan bli overskrevet/nullstilt ved en oppdatering: Yootheme oppdaterer fra tid til annen sine layoutmaler, og for å beholde eventuelle endringer må filer som er blitt endret kopieres ut og deretter tilbake når layoutmalen er oppdatert for å unngå at tilpasningene forsvinner. For å få en oversikt over hvilke filer som er endret (slik at du kan kopiere dem ut før du oppgraderer), kan du gå til Options > Information > File Verification.
  • Skreddersydde stiler: På fafo.no er layoutstrukturen enkel, default-stilen for yoo_eat brukes på alle sider. Men dersom det skulle være ønskelig å lage flere varianter av yoo_eat for å bruke på ulike sider, så kan man gjøre dette via styles. Alle Yootheme-maler leveres med en rekke varianter av den samme malen, som regel med navn som «blue», «green» osv., for å gi en indikasjon på fargevalgene i den enkelte stilvarianten (men fonter, avstander osv. vil som regel også være forskjellig fra en stil til en annen). Se en nærmere beskrivelse nedenfor.

  • Modules: Nederst på Settings-siden finner du bolken Modules. Her kan du velge ulike stiler (Box, Primary box osv.) for mange av layoutposisjonene. De ulike valgene vil påvirke bakgrunnsfarger, rammer, avstander osv. Det kan i noen tilfeller være ønskelig å gi moduler i en spesiell posisjon en egen stil, for eksempel for å framheve moduler i denne posisjonen. Du kan eksperimentere med hvordan de ulike stilene fungerer, men husk å stille valgene tilbake til opprinnelig posisjon dersom du ikke ønsker å endre på noe.

Options - Layouts

  • Layouts/Styles: NB! Det er ikke spesielt vanskelig å lage ulike, skreddersydde stiler av en yootheme-mal som yoo_eat, men det krever at man gjør ting riktig og ikke minst i riktig rekkefølge. Du finner en nærmere beskrivelse av dette her: Create a custom style for a Warp 7 template. På denne siden finner du også lenker til andre veiledninger i forbindelse med skreddersøm av yootheme-maler.
  • Sidebars: sidebar-a og sidebar-b er de to sidekolonnene på fafo.no. Her kan du bestemme bredden på disse, samt om de skal plasseres på venstre eller høyre side. NB! Bredde og plassering bør ikke endres, da dette vil få store konsekvenser for hvordan innholdet på sidene vises.
  • Grid: Her kan du avgjøre hvordan de ulike posisjonene skal oppføre seg på ulike skjermer. Det kan plasseres flere moduler i samme posisjon, f.eks. består bunnteksten på fafo.no av tre moduler (på henholdsvis norsk og engelsk) som er plassert i posisjonen bottom-c. På store skjermer ønsker vi at disse plasseres ved siden av hverandre, altså parallelt. Men på smarttelefoner, som har en mye smalere skjerm, ønsker vi at de skal plasseres over hverandre, derfor er det valgt «Stack on phones».
  • Assignment: Dersom du lager skreddersydde stiler som kun skal gjelde for visse sider, så man huske på å velge hvilke sider disse skal vises på. Dette gjøres helt nederst på siden, i bolken Assignment.

Options - Modules

På siden Options > Modules vises mer eller mindre alle moduler som er opprettet. Her kan man gi hver av de ulike modulene en unik CSS-klasse, tildele dem en stil (og et symbol), samt en såkalt badge-stil. Man kan også spesifisere hvorvidt en bestemt modul skal vises på alle typer skjermer eller f.eks. ikke på en smarttelefon eller et nettbrett osv.

Options – Menus

På denne siden ser du alle de definerte menyene og deres menyvalg. Det er ikke gjort noen skreddersydde innstillinger her for fafo.no.

Options – Information

Her vises informasjon om versjonsnummer, at systemsjekken er OK, samt en fullstendig oversikt over alle filendringer som er gjort. NB! Det vises eventuelt svært mange filer her, selv om bare noen få er endret. Dette skyldes hvordan Yootheme sjekker filene ved en oppdaterting. Du kan lese mer om dette og hvordan problemet kan unngås HER.

 

Redigeringsmeny