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.

Ta bort den inlänkade stilmallen och klientskriptet från mallarna.
Ta bort aliaset som sitter på huset (/site-colors).
Ta bort den här sidan.
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
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"