Jönköpings kommun

Webbplatsfärger

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ärg

Nyckel

HEX-värde

Färgexempel

Primär primar #009375
Svart svart #000000
Mörkgrå morkgra #404040
Ljusgrå ljusgra #efefef
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 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 ##

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

  #if( $color.slug.equals('primar') )
    .lp-link-button > div,
    .sv-login-portlet input[type=submit],
    .lp-level-1 > li > a,
    .lp-level-1 > .lp-current > a,
    .sv-login-portlet input[type=submit] { background: $!color.htmlHexValue; }

    footer .normal a,
    footer a.normal,
    .lp-has-children > button .lp-icon,
    header .sv-searchform-portlet button { color: $!color.htmlHexValue; }

    .sv-archivemenu-portlet a:hover,
    .sv-archivemenu-portlet a:focus,
    .sv-archivemenu-portlet li li.lp-selected a { border-color: $!color.htmlHexValue; }
  #end
#end

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


  .lp-site-color-primar-bg { background: #009375; }
  .lp-site-color-primar-color { color: #009375; }

      .lp-link-button > div,
    .sv-login-portlet input[type=submit],
    .lp-level-1 > li > a,
    .lp-level-1 > .lp-current > a,
    .sv-login-portlet input[type=submit] { background: #009375; }

    footer .normal a,
    footer a.normal,
    .lp-has-children > button .lp-icon,
    header .sv-searchform-portlet button { color: #009375; }

    .sv-archivemenu-portlet a:hover,
    .sv-archivemenu-portlet a:focus,
    .sv-archivemenu-portlet li li.lp-selected a { border-color: #009375; }
    .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: #efefef; }
  .lp-site-color-ljusgra-color { color: #efefef; }

    .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"