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	#222222
Ljusgrå	ljusgra	#e6e8eb
Vit	vit	#ffffff
Röd	rod	#ff0000
Grön 100	gron-100	#00863c
Grön 70	gron-70	#5ead77
Grön 30	gron-30	#b7d5bd
Grön 10	gron-10	#e4efe6
Grön 5	gron-5	#f2f9f5
Beige 100	beige-100	#e0d5c3
Beige 70	beige-70	#e5dbd0
Beige 30	beige-30	#f6f1eb
Beige 10	beige-10	#fcfbf9
Gul 10	gul-10	#fdf6e3

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.
Variabel	Beskrivning
`$name`	Namnet på färgen
`$slug`	CSS-vänligt namn på färgen
`$baseSubstitute`	Namnet kört via `EndecUtil.getBaseSubstitute()`
`$htmlHexValue`	Färgens hexvärde.

## MAIN ##
## Each $color contains:
## - name             The name of the color.
## - slug             The machine friendly name of the color.
## - baseSubstitute   The name run through EndecUtil.getBaseSubstitute().
## - htmlHexValue     The color's HEX value.

#foreach( $color in $!colors )
  /* $color.name, $color.slug, $color.baseSubstitute, $color.htmlHexValue */
  .lp-site-color-$!{color.slug}-bg { background: $!color.htmlHexValue; }
  .lp-site-color-$!{color.slug}-color { color: $!color.htmlHexValue; }

#end

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


  /* Svart, svart, svart, #000000 */
  .lp-site-color-svart-bg { background: #000000; }
  .lp-site-color-svart-color { color: #000000; }

  /* Mörkgrå, morkgra, morkgra, #222222 */
  .lp-site-color-morkgra-bg { background: #222222; }
  .lp-site-color-morkgra-color { color: #222222; }

  /* Ljusgrå, ljusgra, ljusgra, #e6e8eb */
  .lp-site-color-ljusgra-bg { background: #e6e8eb; }
  .lp-site-color-ljusgra-color { color: #e6e8eb; }

  /* Vit, vit, vit, #ffffff */
  .lp-site-color-vit-bg { background: #ffffff; }
  .lp-site-color-vit-color { color: #ffffff; }

  /* Röd, rod, rod, #ff0000 */
  .lp-site-color-rod-bg { background: #ff0000; }
  .lp-site-color-rod-color { color: #ff0000; }

  /* Grön 100, gron-100, gron100, #00863c */
  .lp-site-color-gron-100-bg { background: #00863c; }
  .lp-site-color-gron-100-color { color: #00863c; }

  /* Grön 70, gron-70, gron70, #5ead77 */
  .lp-site-color-gron-70-bg { background: #5ead77; }
  .lp-site-color-gron-70-color { color: #5ead77; }

  /* Grön 30, gron-30, gron30, #b7d5bd */
  .lp-site-color-gron-30-bg { background: #b7d5bd; }
  .lp-site-color-gron-30-color { color: #b7d5bd; }

  /* Grön 10, gron-10, gron10, #e4efe6 */
  .lp-site-color-gron-10-bg { background: #e4efe6; }
  .lp-site-color-gron-10-color { color: #e4efe6; }

  /* Grön 5, gron-5, gron5, #f2f9f5 */
  .lp-site-color-gron-5-bg { background: #f2f9f5; }
  .lp-site-color-gron-5-color { color: #f2f9f5; }

  /* Beige 100, beige-100, beige100, #e0d5c3 */
  .lp-site-color-beige-100-bg { background: #e0d5c3; }
  .lp-site-color-beige-100-color { color: #e0d5c3; }

  /* Beige 70, beige-70, beige70, #e5dbd0 */
  .lp-site-color-beige-70-bg { background: #e5dbd0; }
  .lp-site-color-beige-70-color { color: #e5dbd0; }

  /* Beige 30, beige-30, beige30, #f6f1eb */
  .lp-site-color-beige-30-bg { background: #f6f1eb; }
  .lp-site-color-beige-30-color { color: #f6f1eb; }

  /* Beige 10, beige-10, beige10, #fcfbf9 */
  .lp-site-color-beige-10-bg { background: #fcfbf9; }
  .lp-site-color-beige-10-color { color: #fcfbf9; }

  /* Gul 10, gul-10, gul10, #fdf6e3 */
  .lp-site-color-gul-10-bg { background: #fdf6e3; }
  .lp-site-color-gul-10-color { color: #fdf6e3; }

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"