Webbplatsfärger

Den här funktionen gör det möjligt att enkelt använda webbplatsfärgerna i dina egna stilklasser och klientskript.

Funktionen exponerar stilregler som baseras på webbplatsfärgernas namn. Det är sedan upp till administratören hur formatet på stilklasserna ska se ut.

Ta bort funktionen

För att ta bort funktionen behöver man genomföra följande steg.

  1. Ta bort den inlänkade stilmallen och klientskriptet från mallarna.
  2. Ta bort aliaset som sitter på huset (/site-colors).
  3. Ta bort den här sidan.
  4. Ta bort modulens filer från filarkivet (Filarkiv/system/modules/site-colors).

Webbaddresser till stilmall och javascript

Webbadresser att lägga till i din grundmall om de inte redan är inlagda.

Tillgängliga färger

Nedan ser du en lista på de webbplatsfärger som finns skapade på huset. Nyckeln används främst för att hämta färg i klientskript via lp.siteColors.get(colorSlug, defaultColor) där colorSlug är nyckeln.

Färg

Nyckel

HEX-värde

Färgexempel

Svart svart #000000
Mörkgrå morkgra #404040
Ljusgrå ljusgra #c0c0c0
Ljusgul ljusgul #f9f4e4
Vit vit #ffffff
Röd rod #ff0000

Anpassade stilklasser för färgerna

Om man vill skapa speciella stilklasser för varje färg kan man redigera en variabel på skriptmodulen. Variabeln heter selectorTemplate och är en velocity-mall som körs för varje webbplatsfärg.

I velocity-kontexten finner ni $name (css-vänligt namn på färgen) och $color (hex-värdet för färgen).

.lp-site-color-${name}-bg { background: $color; } .lp-site-color-${name}-color { color: $color; }

Med velocity-mallen ovan genereras följande stilklasser för de webbplatsfärger som finns:

.lp-site-color-svart-bg { background: #000000; } .lp-site-color-svart-color { color: #000000; }
.lp-site-color-morkgra-bg { background: #404040; } .lp-site-color-morkgra-color { color: #404040; }
.lp-site-color-ljusgra-bg { background: #c0c0c0; } .lp-site-color-ljusgra-color { color: #c0c0c0; }
.lp-site-color-ljusgul-bg { background: #f9f4e4; } .lp-site-color-ljusgul-color { color: #f9f4e4; }
.lp-site-color-vit-bg { background: #ffffff; } .lp-site-color-vit-color { color: #ffffff; }
.lp-site-color-rod-bg { background: #ff0000; } .lp-site-color-rod-color { color: #ff0000; }

Velocity

Nedan ser du det velocity-macro som används för att generera css-vänligt namn på färgen. Detta kan du använda i dina egna velocity-mallar för att vara säker på att ett korrekt namn genereras.

## Macro for generating a valid string for html class/id
#macro (slug $str)${str.toLowerCase().replaceAll("å|ä", 'a').replaceAll("ö", 'o').replaceAll("[^a-z0-9]+", '-').replaceAll("^-+|-+$", '')}#end

JavaScript (klient)

Vill du använda webbplatsfärgerna i skript på klientsidan finns färgerna exponerade via ett enkelt api.

lp.siteColors.getAll()
// Object {vit: "#ffffff", ljusgra: "#e8e8e8", morkgra: "#404040"...}

lp.siteColors.get(colorSlug, defaultColor)
// "#ffffff"

lp.siteColors.getSlug(colorName)
// "ljusgra"

Kommande händelser

Drottningholms slott kan du upptäcka på egen hand i egen takt, men att att kombinera med en guidad visning ger besöket en extra upplevelse.

Biljetter

Drottningholms slott byggdes på uppdrag av en drottning och här har många kungligheter levt genom historien. På söndagar är en av de guid...

Biljetter

Följ med våra kunniga guider på en slottsvandring genom paradrummen på Kungliga slottet. Under vandringen levandegörs historien när samli...

Biljetter