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ärgNyckelHEX-värdeFärgexempel
Svartsvart#000000
Mörkgråmorkgra#303030
Ljusgråljusgra#c0c0c0
Vitvit#ffffff
Rödrod#b50000
Linneaus Dark Greenlinneaus-dark-green#344a48
Linneaus Turcoiselinneaus-turcoise#128082
Moss Greenmoss-green#007c52
Blueblue#005293
Petrol Bluepetrol-blue#2d7888
Winter Sky Bluewinter-sky-blue#62798d
Pistill Greenpistill-green#b2c5bc

Anpassade stilklasser för färgerna

Om man vill skapa speciella stilklasser för varje färg kan man redigera velocity-mallen som är utpekad i skriptmodulens variabel selectorTemplate.

I velocity-kontexten finner ni $colors som är en samling av alla webbplatsfärger. Varje färg har följande attribut:

Tabell över tillgängliga variabler i varje färg.
VariabelBeskrivning
$nameNamnet på färgen
$slugCSS-vänligt namn på färgen
$baseSubstituteNamnet kört via EndecUtil.getBaseSubstitute()
$htmlHexValueFärgens hexvärde.
$!context.selectorTemplate

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

#set( $velocityContext = $velocityRenderer.getVelocityContext($request, $context.printWriter) ) $!velocityContext.put('colors', $context.colors)
$!velocityRenderer.render($velocityContext, "$context.selectorTemplate")

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"