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 |
Färgexempel |
|---|---|---|---|
| Svart | svart | #000000 | |
| Mörkgrå | morkgra | #2a2a2a | |
| Ljusgrå | ljusgra | #c0c0c0 | |
| Vit | vit | #ffffff | |
| Himmelsblå | himmelsbla | #35a8df | |
| Mörkblå | morkbla | #0b2c7e | |
| Röd | rod | #ff0000 | |
| Ljusblå | ljusbla | #d3ecf8 |
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: #2a2a2a; } .lp-site-color-morkgra-color { color: #2a2a2a; }
.lp-site-color-ljusgra-bg { background: #c0c0c0; } .lp-site-color-ljusgra-color { color: #c0c0c0; }
.lp-site-color-vit-bg { background: #ffffff; } .lp-site-color-vit-color { color: #ffffff; }
.lp-site-color-himmelsbla-bg { background: #35a8df; } .lp-site-color-himmelsbla-color { color: #35a8df; }
.lp-site-color-morkbla-bg { background: #0b2c7e; } .lp-site-color-morkbla-color { color: #0b2c7e; }
.lp-site-color-rod-bg { background: #ff0000; } .lp-site-color-rod-color { color: #ff0000; }
.lp-site-color-ljusbla-bg { background: #d3ecf8; } .lp-site-color-ljusbla-color { color: #d3ecf8; }
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"
