Uppräknare

Webbappen Uppräknare används för att visa på nyckeltal för att lyfta fakta ett snyggt sätt. Här används den i samband med en grön bakgrundsfärg. Här är en steg-för-steg-guide för att ställa in och konfigurera Puff liggande.

0

Ton fraktas via våra hamnar

Den här webbappen är beroende av en CSS klass för att få rätt utseende. Det finns färdiga block med Uppräknare under Administration/Byggstenar/ Uppräknare i sidstrukturen i menyn till vänster i redigeringsläget. Enklaste sättet är att kopiera ett färdigt block med uppräknare under Byggstenar. Men det går även bra att söka upp en Uppräknare i Modulväljaren uppe i verktygsfältet.

1. Kopiera ett färdigt block med uppräknare från Byggstenar.

  • Högerklicka på en av de 2 layouterna och välj Kopiera
  • Gå till fönstret med rubriken Innehåll.
  • Klicka på det översta objektet, i vårt exempel heter det Vänsterspalt. Men det kan även heta Mittenspalt eller något annat.
  • Högerklicka och välj Klistra in
  • Nu ligger uppräknarna längst ner i listan bland moduler och webappar. Dra och släpp den i den ordningen du vill ha dina uppräknare.

Högerklicka på en av uppräknarna och välj Inställningar. Här ser du se själva inställningsfönstret för uppräknaren. Detta är samma som på övriga webappar och moduler, vi täcker även detta på sidan om Webappar .

Välj Ikon som ska visas för uppräknare. Skriv även vilken text som ska visas, hur långt räknaren ska räkna samt hur snabbt räknaren ska räkna.

Klicka sedan på OK

Bakgrundsfärger och CSS klasser

Som ni ser i Byggstenar och sidan med Uppräknare så finns det 2 olika bakgrundsfärger. Här förklarar vi hur man ställer in bakgrundsfärger.

Högerklicka på överliggande Layout, eller direkt på webappen Uppräknare och välj Egenskaper.

Välj Stil (CSS)

Under CSS-regler kan du se att där ligger en klass som heter hhr-infographic__wrapper. Det är den klassen som sätter grön bakgrund på kontainern som Uppräknaren omsluts av.

Om du sedan lägger till klassen "hhr-light-dark-blue-bg-all-content-dark-blue" kommer räknare och text att ändra färg till ljusblå. Ikonen har den färg den har när du laddar upp den till bildbiblioteket.

Meny