Angi utseende og funksjonalitet

Du kan angi utseendet og funksjonaliteten for en enkelt side eller for alle sidene. Du kan også redigere et tema eller CSS for å opprette et nytt utseende og ny funksjonalitet. De fleste innstillinger relatert til stil gjøres av Axiell på installasjonstidspunktet.

Om temaer

Et tema består av et grunnoppsett som gjelder alle sider. Det kan for eksempel angi antall kolonner, fargene som brukes i hver kolonne, topptekstfeltet, måten menyene håndteres på, osv. Et tema kan opptre i ulike varianter kalt fargeoppsett. Fargeoppsettene kan også inneholde andre regler innenfor temaets struktur.

Temainnstillinger

Alle Arena-temaene er supplert med en gruppe nye innstillinger. Innstillingene har et tekstfelt hvor verdiene angis, og en avmerkingsboks for å slå innstillingene på og av.

Innhold i kompatibilitetsmodus

med Internet Explorer kan du angi hvilken versjonsmotor som skal brukes til å gjengi en side. Du kan legge til forskjellige verdier for X-UA-Compatible META-koden som forteller Internet Explorer hvordan den skal opptre. Den vanligste verdien og beste praksis (standard) er «IE=edge», som sørger for at Internet Explorer alltid bruker siste versjon. Den siste og gjeldende versjonen er også den raskeste.

Meta viewport-innhold

meta viewport-koden gir nettleseren instruksjoner om hvordan den skal kontrollere sidens dimensjoner og skalering. Koden er helt nødvendig hvis du har et nettsted som bruker responsiv design. Uten en riktig verdi for meta viewport vil mobilenheter gjengi siden med en bredde som er vanlig for datamaskinskjermer, og deretter skalere den slik at den passer til skjermen. Standardverdien er «initial-scale=1.0, width=device-width», men den kan endres ved behov. Husk å legge til et komma mellom verdiene.

Eksternt favorittikon

Du kan legge en kobling til et eksternt favorittikon, som brukes til bokmerker og i nettleserens URL-felt. Det er også mulig å legge en kobling til et Apple-berøringsikon, som brukes på Apple-enheter når du legger til bokmerke, eller legger til i startskjermbildet. Bare legg banene inn i bildene dine, og kryss av i avmerkingsboksen.

Merknad:
Bokmerke-ikoner i nettleseren bufres ofte, så ikke forvent at et bokmerke-ikon endres med en gang hvis du legger til et annet bilde.

Egendefinert topptekst og Egendefinert bunntekst før siste body-kode

Disse tekstfeltene kan brukes til å legge inn kode (javascript, metakode, CSS osv.), enten i dokumentets topptekst eller helt nederst på siden, rett før den avsluttende body-koden. Merk at Liferay-sideinnstillinger har en lignende javascript-funksjon, der kan du lime inn kode som vil bli kjørt nederst på hver side. For brukere som ikke er så erfarne, er dette svært praktisk ved sporadiske korrigeringer og forbedringer. Hvis du har et mer sammensatt nettsted og mer komplekse javascript-funksjoner, bruker du kanskje et par eksterne plugin-moduler eller deler javascript mellom nettsteder. Da kan den egendefinerte toppteksten og bunnteksten før den avsluttende body-koden være svært nyttig.

Temakarakteristikker

Temaer med fast bredde

Et tema med fast bredde vil si at bredden på hoved-wrapper er fast. Dette sikrer at alle deler av Arena vises på dataskjermer med begrenset oppløsning. En fast bredde som ofte brukes på hoved-wrapper, er 980 piksler. Med denne bredden vises Arena fullt ut på en dataskjerm med en oppløsning på 1024x768, uten at det er behov for å bla vannrett for å se innhold som ellers ville ha vært utenfor skjermområdet.

Loddrett rulling kan ikke elimineres, da sidelengdene varierer etter innhold. Et katalogsøk kan for eksempel produsere lange resultatlister.

Fordeler med fast bredde på hoved-wrapper:

  • Det største lesbare innholdsområdet kontrolleres nøye, og det er ikke nødvendig å angi minimums- eller maksimumsverdier.
  • Layouter med fast bredde er noen ganger enklere å jobbe med, avhengig av hvilken effekt du ønsker. Enkelte visuelle design kan bare oppnås på en tilfredsstillende måte når layouten har fast bredde.

Ulemper med fast bredde på hoved-wrapper:

  • Tekststørrelsen kan ikke forstørres i vesentlig grad. Det skyldes at linjebredden ikke øker når størrelsen på teksten endres, så når skrifttypen er stor, kan skjermen virke svært uryddig.
  • På et nettsted med en fast bredde på 980 piksler må brukere med små skjermer (800 × 600 piksler) bruke et vannrett rullefelt for å vise innhold som ellers ville ha vært utenfor skjermområdet. Dette er et vanlig problem, uavhengig av alderen på slike skjermer.
  • Et nettsted med en fast bredde på 980 piksler kan se altfor smalt ut på store widescreen-skjermer.

Alle temaer der bredden på hoved-wrapper ikke er fast, kan få fast bredde hvis du legger inn noen CSS-er i kunde-CSS-filen.

Kundestiler

Kundestiler kan ta utgangspunkt i alle temaer. Kundespesifikke stiler er plassert i en spesiell CSS-fil, som ikke blir overstyrt eller fjernet når Arena-applikasjonen oppdateres.

Bruk av temaer

Velge et tema for én side

  1. Logg deg på Liferay, og klikk på Navigasjon/Offentlige sider i menyen til venstre.
  2. I trevisningen klikker du på kontekstmenyen for siden som skal være overordnet den nye siden. Velg Konfigurer side.
  3. Klikk på fanen Utseende og funksjonalitet.
  4. Velg Velg et spesifikt utseende og en spesifikk funksjonalitet for denne siden
  5. Endre innstillingene i temaet, eller klikk på et nytt tema.
  6. Hvis du vil legge til en egendefinert CSS på siden, setter du den inn i CSS-feltet nederst på siden.
  7. Klikk på Lagre.

Velge et tema for alle sider

Hvis du angir utseendet og funksjonaliteten for Arenasamlet, er det nyttig å bruke samme tema på alle sidene. Senere kan du bruke andre temaer på enkeltsider.

  1. Logg deg på Liferay, og klikk på Navigasjon/Offentlige sider i menyen til venstre.
  2. Velg Konfigurer i kontekstmenyen.
  3. Endre innstillingene i temaet, eller klikk på et nytt tema.
  4. Feltet custom-noscript-content er der du endrer teksten som vises hvis brukeren har skrudd av eller mangler JavaScript. Denne innstillingen er på som standard.
  5. Klikk på Lagre.

Skjermlayout

Arena omfatter en rekke layoutmaler, slik at du kan ordne skjermen på mange måter.

Å endre skjermlayouten har stor innvirkning på layouten til applikasjonene. Vær oppmerksom på følgende:

  • Hvis du velger en layoutmal som har færre områder enn den som er i bruk, flyttes applikasjoner som ligger i tapte områder, automatisk til passende tilgjengelige områder. Bytter du for eksempel fra en layoutmal med tre kolonner til en layoutmal med to kolonner, flyttes applikasjoner i den høyre kolonnen fra den tapte tredje kolonnen til en av de tilgjengelige kolonnene.

  • Layoutmalen gjelder bare for siden som vises for øyeblikket.

  • Utseendet og funksjonaliteten til enkelte portleter kan også konfigureres.

Se også: Administrere portleter og Konfigurere en portlet

Angi skjermlayouten

  1. Følg instruksjonene under Konfigurere en side.
  2. I nedtrekkslisten Type, velger du Layout, og deretter velger du den malen du vil bruke.
  3. Klikk på Lagre.
Merknad:
Toolbar-temaet har blitt utelatt i Arena 4.

Legge til en logotype

Standardplasseringen til logotypen er i øverste venstre hjørne. Du har muligheten til å velge en ny logotype til nettstedet (som standard brukes Axiells logotype). Hvordan du legger til en logotype, varierer noe mellom Arena 4 og tidligere versjoner av Arena.

  1. Arena 4: I menyen til venstre klikker du på Kontrollpanel/Navigering/Offentlige sider. Velg Konfigurer i kontekstmenyen (ved siden av Offentlige sider i menyen) og sørg for at fanen Utseende og funksjonalitet er åpen. Arena 3 og tidligere versjoner: I Admin-verktøylinjen klikker du på Admin og velger Kontrollpanel. Klikk på Portalinnstillinger under Konfigurasjon, og klikk så på Skjerminnstillinger i menyen til høyre.
  2. Rull nedover, og under Logo klikker du på Endre.
  3. Søk etter den nye logotypen i dialogboksen som åpnes.
  4. Klikk på Lagre.

CSS-filer

Et Cascading Style Sheet (CSS) er et stilarkspråk som beskriver utseendet og formateringen til et dokument skrevet i et markeringsspråk som HTML, XHTML og XML. CSS kan også åpne for at et markeringsspråk kan vises med ulike stiler avhengig av publiseringsmetode, for eksempel skjerm, papir osv. Hvert dokument er vanligvis koblet til en CSS. Leserne av dokumentet kan imidlertid bruke en annen CSS for å overstyre den forfatteren har angitt. Innstillingene for CSS-filene er de samme i ulike versjoner av Arena.

arena.css

arena.css inneholder standardstilene til alle Arena-portleter. Hver Arena-portlet må ha en standardstil lagret i denne filen. CSS-en er temauavhengig, så alle CSS-ene i filen gjelder alle temaer. Standardstilene må være basert på det klassiske Liferay-temaet, som du endrer etter behov innenfor hvert Arena-tema. Unngå bruk av ID-er i arena.css, da disse stilene mest sannsynlig blir overstyrt av temaene.

arena-default.css

arena-default.css inneholder temastilene til Arena-portleter. Denne CSS-en er temaavhengig, så derfor er det bare stiler knyttet til det aktuelle temaet som er plassert der.

custom.css

custom.css inneholder stilene til hvert tema. Den er temaavhengig, men kan ikke inneholde stiler for Arena-portleter. Filen inneholder alt bortsett fra Arena-portletstilene; sidestruktur, Liferay-knapper, banneret, Liferay-portleter osv. Disse stilene kan overstyres gjennom fargevalgene. CSS-filene for fargevalg blir deretter importert gjennom filen custom.css innenfor hvert tema, som vist i følgende eksempel:

@import url(blue.css);

@import url(green.css);

@import url(orange.css);

colour scheme.css

Alle CSS-filer for fargevalg innenfor hvert tema lastes inn på den aktuelle siden, men fordi hvert fargevalg har en unik klasse før noen av deklarasjonene, gjelder stilene bare for fargevalget som brukeren ser på siden. Denne klassen legges inn i body-koden i HTML på denne måten:

<body class="green">

Klassen for fargevalg skal normalt komme i begynnelsen av hver deklarasjon, for eksempel .green div.portlet-topper. Eneste unntak er når du ønsker en stil for en bestemt nettleser, for eksempel

.ie9 .green div.portlet-topper

Stiler fra alle deler av Arena kan settes inn i fargevalgfilen.

Customer.css

Endringer kunden måtte ønske, skal legges i filen customer.css (legges inn manuelt). Denne filen vil være den siste som lastes, og vil overstyre alle standardstilene inkludert ovenfor.