Webbplatsfärger

Webbaddresser till stilmall och javascript

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

• Länk till CSS
• Länk till JS

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.

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:

## 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, #404040 */
  .lp-site-color-morkgra-bg { background: #404040; }
  .lp-site-color-morkgra-color { color: #404040; }

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

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

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

  /* Redaktionell markering, redaktionell-markering, redaktionellmarkering, #ed3604 */
  .lp-site-color-redaktionell-markering-bg { background: #ed3604; }
  .lp-site-color-redaktionell-markering-color { color: #ed3604; }

  /* Himmel, himmel, himmel, #00a6e2 */
  .lp-site-color-himmel-bg { background: #00a6e2; }
  .lp-site-color-himmel-color { color: #00a6e2; }

  /* Shiffer, shiffer, shiffer, #706f6f */
  .lp-site-color-shiffer-bg { background: #706f6f; }
  .lp-site-color-shiffer-color { color: #706f6f; }

  /* Betong, betong, betong, #b2b2b2 */
  .lp-site-color-betong-bg { background: #b2b2b2; }
  .lp-site-color-betong-color { color: #b2b2b2; }

  /* Stenshamn, stenshamn, stenshamn, #003d7c */
  .lp-site-color-stenshamn-bg { background: #003d7c; }
  .lp-site-color-stenshamn-color { color: #003d7c; }

  /* Aspö, aspo, aspo, #98c21d */
  .lp-site-color-aspo-bg { background: #98c21d; }
  .lp-site-color-aspo-color { color: #98c21d; }

  /* Tving, tving, tving, #e31836 */
  .lp-site-color-tving-bg { background: #e31836; }
  .lp-site-color-tving-color { color: #e31836; }

  /* Kyrkhult, kyrkhult, kyrkhult, #d7007f */
  .lp-site-color-kyrkhult-bg { background: #d7007f; }
  .lp-site-color-kyrkhult-color { color: #d7007f; }

  /* Korkås, korkas, korkas, #6e368c */
  .lp-site-color-korkas-bg { background: #6e368c; }
  .lp-site-color-korkas-color { color: #6e368c; }

  /* Askunga, askunga, askunga, #f18700 */
  .lp-site-color-askunga-bg { background: #f18700; }
  .lp-site-color-askunga-color { color: #f18700; }

  /* Tjärö, tjaro, tjaro, #29b8cc */
  .lp-site-color-tjaro-bg { background: #29b8cc; }
  .lp-site-color-tjaro-color { color: #29b8cc; }

  /* Hallabro, hallabro, hallabro, #2d934f */
  .lp-site-color-hallabro-bg { background: #2d934f; }
  .lp-site-color-hallabro-color { color: #2d934f; }

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"