Att anpassa det grafiska utseendet

Du kan anpassa det grafiska utseendet för en enskild eller samtliga sidor. Du kan också redigera ett tema eller CSS-koden, för att skapa ett nytt grafiskt utseende.

Länkar till de olika avsnitten på den här sidan:
Teman
Sidmallar
CSS-filer

_____________________________________________

Teman

Ett tema innehåller ett grundläggande grafiskt utseende som gäller för alla sidor . Till exempel kan det ange antal kolumner, vilka färger som används i varje kolumn, toppmenyn, på vilket sätt menyer hanteras, och så vidare. Ett tema kan existera i olika varianter som kallas Färgteman. Färgteman kan även innefatta andra regler, inom den struktur som anges i temat.

Hur man väljer ett tema för en sida

1. Om du inte redan loggat in i Liferay, gör det nu.
2. I toppmenyn, klicka på Hantera och Site pages. Vyn för Site Pages visas.
3. Markera den sida som du vill ändra tema på i trädet till vänster.
4. Klicka på Grafiskt utseende i menyn till höger.
   
   
    
5. Välj vilken typ av webbläsare som du vill konfigurera sidan för. Du kan konfigurera för traditionella webbläsare (t.ex. Internet Explorer , Firefox och Safari), eller för mobila webbläsare (t.ex. Opera Mini) på mobila enheter (såsom Blackberry , Palm och iPhone).
   
   
    
6. Välj Define a specific look and feel for this page.
   
   
    
7. Klicka på ett tema. (De teman presenteras under Teman.)
8. Klicka på Spara till höger.

Hur man väljer ett tema för alla sidor

När du ställer in ett övergripande grafiskt utseendet för Arena, är det lämpligt att använda samma tema på alla sidor. Du kan senare välja andra andra teman på enskilda sidor.

1. Om du inte redan loggat in i Liferay, gör det nu.
2. I toppmenyn, klicka på Hantera och Site pages. Vyn för Site Pages visas.
3. Klicka på Grafiskt utseende i menyn till höger.
4. Välj vilken typ av webbläsare som du vill konfigurera sidan för. Du kan konfigurera för traditionella webbläsare (t.ex. Internet Explorer , Firefox och Safari), eller för mobila webbläsare (t.ex. Opera Mini) på mobila enheter (såsom Blackberry , Palm och iPhone).
5. Klicka på ett tema. (Teman presenteras under Teman.)
6. Klicka på Spara.

Tillgängliga teman

Arena innehåller nedanstående teman (andra teman kan vara tillgängliga),  var och en utformad för att passa olika typer av funktionalitet i Arena.

Arena Toolbar

Arena Toolbarinnehåller följande anpassningar:

• Tre kolumner 20 | 60 | 20.
• Ett sidhuvud med logotyp.
• En meny med flikar för sidor med högsta nivå i sidhierarkin.
• Flytande bredd (beroende på färgschema), vilket säkerställer Arena alltid fyller skärmen.

Arena Toolbar tema har följande färgscheman:

• Grön
• Blå
• Röd
• Brun
• Orange (elastisk bredd - se nedan)

Arena Modern

Detta tema innehåller följande anpassningar:

• Fast bredd, vilket säkerställer att saker stannar på plats
• Särskild layout - mallar optimerade för detta tema
• Stor header med sökportlet
• Övergripande grå färgdesign med analoga texturer för en uppdaterad grafisk design
• Lar-filen innehåller artikel med ett förslag till en sidfot, fritt att använda eller anpassa till dina egna behov

Arena Modern har ett färgschema:

• Röd

Temaegenskaper

Teman med fast bredd

I dessa teman är bredden på wrapper är fast. Detta säkerställer att alla delar av Arena visas på datorskärmar med begränsad upplösning. En vanlig fast bredd för wrapper är 980 pixlar. Med denna bredd kommer hela  Arena visas på en datorskärm som har en upplösning på 1024x768, utan att behöva scrolla vågrätt för att visa innehåll som annars skulle ligga utanför skärmytan.

Vertikal scrollning kan inte konfigureras bort, eftersom sidors längd varierar efter innehåll. Till exempel kan en katalogsökning producera en lång resultatlista.

Fördelar med fast bredd för wrapper:

• Den huvudsakliga läsbara området är hårt kontrollerat, utan att behöva ställa in lägsta eller högsta värden.
• Layouter med fasta bredder är ibland lättare att styla, beroende på vilken effekt du vill ha. Vissa grafiska designer kan endast uppnås på ett rimligt sätt med en layout med fast bredd.

Nackdelar med fast bredd för wrapper:

• Textstorleken kan inte förstoras mycket. Detta beror på att linjebredd inte ökar tillsammans med ändringen, så vid stora teckenstorlekar kan skärmen se rörig ut.
• På en webbplats med fast bredd på 980 pixlar, kommer användare med små skärmar (800 × 600 pixlar) behöva scrolla horisontellt för att visa innehåll som annars skulle ligga utanför skärmytan. Även om sådana skärmar är gamla, är problemet fortfarande vanligt.
• En webbplats med fast bredd på 980 pixlar kan se smal ut på stora och breda skärmar.

För alla teman där bredden på wrapper inte är bestämd, kan den göras fast genom att skriva till CSS till er CSS-fil.

Flytande teman

Ett flytande tema skapas genom att inte ange en bredd för wrapper alls, eller genom att ange bredden i procent. Förutom border och padding, som inte alltid kan tillämpas, så kommer en 100 % bred webbplats att uppta hela bredden, utan att en horisontell scrollning dyker upp.

Arena Toolbar (tema grön, röd och brun) är utformat med denna anpassning.

Fördelar med en flytande tema:

• Ett flytande tema anpassas till nästan vilka skärmbredder som helst, vilket gör det universellt.
• Flytande bredder matchar webbläsarens standardlayout.
• De flytande layout optimerar användningen av utrymmet på skärmen. Mer innehåll bör vara above-the-fold (vilket betyder att den är tillgänglig utan att scrolla i någon riktning).

Nackdelar med ett flytande tema:

• En övre gräns för tillgängligt innehåll och en önskan att fylla tomrum kan skada användbarheten. För mycket innehåll kan förvirra användarna och gör sidan plottrig.

Elastiska layouter

På en elastisk webbplats, är wrapper och andra element mätt med måttenheten em. Em mäter proportionerligt till bokstaven M i typsnittets standardstorlek. Allt eftersom textstorleken ökas, kommer de avsnitt som uppmätts i em också öka i storlek.

Arenan Toolbar tema orange är utformat med detta stylingval.

Fördelar med ett elastiskt tema:

• Om det utförs på korrekt sätt ger det en mycket stabil layout eftersom, när webbplatsen skalas upp eller ner, ändras allt i samma takt. Resultatet är att ingenting förändras oproportionerligt.

Nackdelar med ett elastiskt tema:

• Om det inte begränsas, kan denna layout vara skadligt för användbarheten. Det beror på att den kan växa i bredd utan att det ger användaren några fördelar.
• När man utvecklar en elastisk layout, måste man se till att det fungerar på små skärmar, eftersom det är där layouten gynnar användarna mest.

Kundstyling

Kundens styling kan baseras på alla teman. Kundspecifik styling görs i en speciell CSS-fil, som inte läses över eller tas bort när Arena programvara uppdateras.

_____________________________________________

Sidmallar                                                 

I Arena arrangeras skärmen i olika områden med hjälp av en sidmall.
Sidmallar.

Arena innehåller en rad sidmallar, så att du kan ordna skärmen på flera olika sätt.

Att ändra sidmallen har en stor inverkan på layouten. Använd sidmallar med försiktighet och observera följande:

• Den förvalda sidmallen är Arena tre kolumner (i proportionerna 20 | 60 | 20). Om du stöter på problem med din valda layout, kan det vara lönt att återgå till den tidigare valda sidmallen, eller återgå till den förvalda sidmallen.
• Om du väljer en sidmall som har färre områden än den sidmall som för närvarande används, kommer innehåll som ligger i förlorade områden automatiskt flyttas till tillgängliga områden. Till exempel, om du byter från en mall med tre kolumner till en mall med två, kommer innehåll som ligger i den högra kolumnen flyttas till någon av de tillgängliga kolumnerna.
• Sidmallen gäller endast för den flik som visas för tillfället.
• Om den sida som visas (även kallad flik) är Arena, kommer sidmallen att gälla för hela Arena.

Det grafiska utseendet för av enskilda portlets diskuteras i Portlethantering.

Så ställer du in sidmallar

1. Om du inte redan har loggat in i Liferay, gör det nu.
2. Gå till den sida där du vill välja sidmall.
3. Klicka på Hantera i toppmenyn och klicka sedan på Sidmall. Vyn för Hantera sida visas.
   
   
    
4. Klicka på den sidmall som du vill använda och klicka sedan på Spara.

_____________________________________________

CSS-filer                                                    

Ett Cascading Style Sheet (CSS) är en kodspråk som används för att beskriva utseende och formatering av ett dokument skrivet på språk som HTML , XHTML och XML. CSS tillåter också en sida att presenteras i olika stilar för olika renderingsmetoder, såsom on-screen, i tryck, etc. Varje dokument är oftast kopplat till en CSS. Dock kan läsarna av dokumentet använda en annan CSS för att skriva över den som författaren angett.

arena.css

arena.css innehåller standardstil för alla Arena-portlets. Varje Arena-portlet måste ha en standarstil lagrad i denna fil. Denna CSS är oberoende av tema, så alla CSS:er i filen gäller för alla teman. Förinställda stilar måste baseras på Liferays klassiska tema, som du ändrar inom varje Arena-tema. ID bör undvikas inom arena.css, eftersom de är mest sannolika att skrivas över av Arenas teman.

arena-default.css

arena-default.css innehåller temastilen för Arena-portlets. Denna CSS är temaberoende, så bara stilar som relaterar till temat ska placeras där. Filen importeras via Liferay, därför laddas den efter arena.css. Det gör det möjligt att lätt skriva över förinställda stilar inom arena.css.

custom.css

custom.css innehåller stilar för varje tema. Det är temaberoende, men får inte innehålla stilar för Arena-portlets. Denna fil innehåller allt bortsett från  stilar för Arena-portlets, inklusive sidstruktur, Liferay-knappar, banner, Liferay-portlets, etc. Dessa stilar kan skrivas över i färgscheman. CSS-filerna för färgscheman importeras sedan via custom.css filen inom varje tema på följande vis:
@ import url ( blue.css ) ;
@ import url ( green.css ) ;
@ import url ( orange.css ) ;

colour scheme.css

CSS-filerna för färgschema inom varje tema laddas på den relevanta sidan. Men eftersom varje färgschema har en unik klass före dess regler, gäller stilen endast för färgschemat på den sida användaren tittar på. Denna klass sätts till body-taggen i HTML-koden:
<body class="green"> .

Färgschemats klass ska normalt visas i början av varje regel, till exempel .green div.portlet-topper. Det enda undantaget från denna regel är när du vill ha en browserspecifik stil, exempelvis .ie6 .green div.portlet-topper. Stilar från någon del av Arenan kan läggas i filen för färgschemat.

customer.css

Eventuella förändringar som en kund vill göra bör placeras i filen customer.css (den läggs till manuellt). Denna fil kommer att vara den sista som laddas och det kommer att åsidosätta någon av de förvalda stilarna ovan.