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 ##

#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: #1561a1; }
  .lp-site-color-primar-color { color: #1561a1; }

      .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: #1561a1; }

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

    .sv-archivemenu-portlet a:hover,
    .sv-archivemenu-portlet a:focus,
    .sv-archivemenu-portlet li li.lp-selected a { border-color: #1561a1; }
    .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"