Tema i praktiken

Redaktörstips

Vi har tidigare pratat om hur du kommer igång med teman i Sitevision och hur du väljer rätt färger — men hur fungerar egentligen tema i praktiken? Den frågan försöker vi besvara i denna artikel där vi ger konkreta exempel på vilka möjligheter det skapar på en webbplats eller i en modul.

Vi kan börja med att fräscha upp minnet lite! Inställningarna för teman hittar du i webbplatsinställningarna. Kortfattat så kan du med hjälp av teman färgsätta hela eller delar av din webbplats baserat på ett gäng inställningar som bland annat innefattar bakgrundsfärger, textfärger, rundning av hörn och kantlinjer. Detta ger dig möjligheten att ändra färgerna på din webbplats och därmed hela känslan. Man kan ha flera teman vilket gör att du kan särskilja delar av webbplatsen utseendemässigt. Detta kan vara väldigt användbart och smidigt för exempelvis underwebbar eller kampanjwebbar.

Känns något rörigt? Ta då gärna del av våra tema-glosor längst ner i artikeln där vi förtydligar vissa begrepp.

En liten ansträngning som gör stor skillnad

Älmhult.se Länk till annan webbplats. har teman använts för att kunna temasätta olika grenar av webbplatsen. Grunden, i form av sidhuvud och sidfot bland annat, följer alltid samma färgschema. På så sätt blir det tydligt att alla delar är en del av Älmhults kommun. Däremot kan man se skillnader i vissa moduler och andra lösningar. På deras underwebbar finns också en banner under sidhuvudet där färgen hämtas från temat för den specifika grenen.

Kika gärna in på någon av deras underwebbar:

Skärmdumpar från Älmhult.se som visar temafärger

Precis som på Älmhult har teman använts även på kungsbacka.se Länk till annan webbplats.. Där har större delar även temasatts så som sidhuvud vilket kan bli väldigt effektfullt. Ändrar man tema och exempelvis herobilden på en ingångssida kan känslan bli en helt annan på under 5 minuter.

Kolla gärna in deras webbplats för att se möjligheterna med teman:

Skärmdumpar från kungsbacka.se som visar exempel på temats användning

Temasätt din modul

Hämtar du en modul från Marketplace idag så kan det mycket väl vara så att utseendet baseras på det aktiva temat. Däremot kan det variera en del mellan de olika modulerna för hur dessa inställningarna appliceras. Vi ska kika lite närmare på några konkreta exempel.

Knappmodulen

Sitevisions knappmodul finns att hämta gratis i Marketplace och den gör precis det den säger — skapar knappar som du kan länka till valfri sida. I modulens inställningar kan man bland annat välja färg: Default, Primary, Secondary, Success, Danger, Info och Warning. Dessa hämtas direkt ifrån temats inställningar.

Kikar vi på den första knappen så har vi valt Primary som färg. Modulen i sin tur hämtar då, med hjälp av variabler, de färger som vi valt för Primary i Element i inställningarna för temat (Webbplatsinställningar > Tema > Element > Primary). I det här fallet har vi valt #647a0f som bakgrundsfärg och #ffffff som textfärg.

På bilden nedan kan ni se hur inställningarna ser ut i verktyget för dessa knappar. Utöver färger finns också möjlighet att ställa in kantradie och typsnitt för knappar.

Exempel på färginställningar för Element i tema

Filtrerbar listning

Bland Limeparks moduler kan vi hitta en av våra populäraste lösningar — Filtrerbar listning. Den baseras på temat på din webbplats och exakt vilka inställningar som påverkar vad kan ni hitta bland våra hjälpsidor för modulen: Filtrerbar listning - Temainställningar. Då modulen i dess grundutförande är ganska enkel med sparsamt använda färger blir skillnaderna kanske inte lika märkbara som i knappmodulen men små detaljer gör stor skillnad.

På vår demowebb kan ni se ett exempel på hur modulen kan se ut. Länk till annan webbplats. Vi har också satt upp ytterligare en sida med samma innehåll, samma styling men ett annat tema. Så kolla gärna in Filtrerbar listning med ett annat tema Länk till annan webbplats. om ni är nyfikna.

Om ni dessutom vill se hur modulen kan se ut hos några av våra kunder så hittar ni några exempel nedan. En del av dessa har specialanpassats.

Man kan inte alltid få precis som man vill

Efter att ha läst allt detta är ni förhoppningsvis lite extra taggade på att dyka ner bland temats alla inställningar. Ni laddar då ner en ny modul från Marketplace och har stora visioner för hur modulen ska se ut på er webbplats. Men när ni väl lägger in den så kanske inte färgerna appliceras exakt så som ni tänkt? Då är det viktigt att behålla ett helhetstänk. Har ni exempelvis bara en modul kan ni med enkelhet gå in och ändra i temat. Om ni däremot redan har ett gäng lösningar som baseras på detta kan det vara lockande att skapa upp ett nytt tema bara för den specifika modulen, detta är något som vi inte rekommenderar.

Det här kanske låter lite tråkigt, det spelar väl ingen roll? Men jo, intrycket kan väldigt lätt bli spretigt och det blir dessutom svårare att underhålla och ha koll på. Det finns dock en lösning! I detta fallet, om ni fortfarande verkligen vill ha den så som ni tänkt, är det bättre att ni kontaktar någon som kan hjälpa er att justera variablerna i modulens CSS. På så sätt kan den fortfarande följa färgerna på er webbplats men ni kan få hjälp att ändra vilka färger som appliceras vart.

Glosor i bokstavsordning för inställningar i Sitevisions tema

Block — Ett objekt som är tänkt att innehålla flera objekt. T.ex. en färgad ruta runt ett formulär.
Danger — Det "alarmerande" utförandet av ett element. Används som standard vid validering då den t.ex. används som textfärg och ram runt komponenter i ett formulär.
Default — Standardutförandet av ett block eller element.
Element — Ett objekt eller komponent. T.ex. en knapp eller en textbox.
Envision — Namnet på det ramverk som Sitevision tagit fram för att hantera temainställningar i sitt system. Envision grundas till stort på samma principer som Bootstrap för er som är bekanta med det, och vill du grotta ner dig i principerna bakom Envision kan du göra det här på BEM Länk till annan webbplats, öppnas i nytt fönster..
Info — Det "informerande" utförandet av ett element. T.ex. en ruta överst på en webbsida där besökaren gör väl i att informeras.
Primary — Det "primära" utförandet av ett block eller element. Används med fördel om man har en handling eller information som man vill rikta uppmärksamheten mot. Primary kan sättas på både block och element.
Secondary — Det "sekundära" utförandet av ett block eller element. Till skillnad från det primära utförandet bör det sekundära vara lite mer diskret. Secondary kan sättas på både block och element.
Success — Det "gratulerande" utförandet av ett element. T.ex. bekräftelse på ett inskickat formulär.
Variabel — En variabel är något som kan ändras. I Sitevision betyder det att varje inställning du gör i ditt tema påverkar en eller flera variabler. Variablerna kan sedan Sitevision, eller en underleverantör, använda för att ge ett objekt en viss egenskap. T.ex. en bakgrundfärg till en ruta.
Warning — Det "varnande" utförandet av ett element. 
Webbplatsfärg — Webbplatsfärger är en webbplatsinställning. I panelen Webbplatsfärger definieras de färger som du sedan kan använda i andra inställningar, exempelvis teman (beroende på vilken version av Sitevision du har). A word to the wise —tänk på att en Webbplatsfärg ALDRIG kan tas bort från din webbplats när den väl är tillagd. Så lägg inte till en färg om du inte är säker på att den behövs.

Nyfiken på möjligheterna med Tema?

Tveka inte att kontakta oss så berättar vi gärna mer! Denna artikel är också den sista i raden av tre som behandlar teman i Sitevision. Så ta gärna del av dem om du har missat det.

Artikeln är skriven av: Anna Darner Webbutvecklare anna@limepark.se