Pimp dine DDB CMS sider med ikoner og layout

Bemærk:
I efteråret 2016 lægges der et nyt tema på DDB CMS. Så går denne metode i stykker! Jeg arbejder på et sæt metoder, der vil være uafhængige af det tema, der til enhver tid er installeret i Drupal:
Sådan installeres “stand alone” ikoner i DDB CMS

DDB CMS er et Drupal-baseret content management system, der er målrettet danske folkebiblioteker. CMS’et er endelig parat til at hælde indhold i og netop nu står de fleste biblioteker foran en stor implementeringsopgave. I den anledning, er der oprettet en erfa-gruppe på Facebook.

Layout-tip til biblioteks-webredaktører
Redigeringsværktøjet (editoren) i DDB CMS er fint til brødtekst, men det giver ganske begrænset mulighed for at lave layout på f.eks. oversigtssider. Men hvis man kan lidt HTML, er der en del muligheder indbygget i CMS’et. Der medfølger nemlig både en samling ikoner og layouts i stylesheet’et. Man skal bare kende nogle classes for at udnytte dem.

Screenshot af Horsens Kommunes Bibliotekers selvbetjeningsside
Sådan ser Horsens kommunes bibliotekers selvbetjeningsside ud. Bemærk layout og ikoner.

Stil indholdet op i 2 kolonner

For at stille indholdet op i 2 kolonner, skal du pakke det ind i lidt HTML.

1. Start med at skrive dit indhold

Start med at skrive dit indhold i editoren og inddel det i afsnit som herunder.Tekst i afsnit wysiwyg editoren

2. Klik på “Kilde”

Klik i værktøjslinjen på “Kilde”. Nu får du vist indholdet, som det er kodet i HTML.Wysiwyg editoren i DDB CMS

Dit indhold ser nu nogenlunde således ud (dog uden linjeskift, som jeg har indsat for overskuelighedens skyld):



  <strong>Overskrift 1</strong>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Aenean commodo ligula eget dolor.




  <strong>Overskrift 2</strong>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Aenean commodo ligula eget dolor.




  <strong>Overskrift 3</strong>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Aenean commodo ligula eget dolor.




  <strong>Overskrift 4</strong>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Aenean commodo ligula eget dolor.


3. Pak det hele ind

Pak det hele ind i nogle <div> elementer og giv det klassenavne.


<div class="group-blocks--wrapper">

<div class="group-blocks--inner group-blocks--two">


      <strong>Overskrift 1</strong>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Aenean commodo ligula eget dolor.
    



      <strong>Overskrift 2</strong>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Aenean commodo ligula eget dolor.
    

  </div>


<div class="group-blocks--inner group-blocks--two">


      <strong>Overskrift 3</strong>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Aenean commodo ligula eget dolor.
    



      <strong>Overskrift 4</strong>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Aenean commodo ligula eget dolor.
    

  </div>

</div>

Kopier gerne koden herover for at have et udgangspunkt.

Forklaring:

  • Klassen group-blocks--wrapper sørger for, at dine kolonner bliver responsive, så de tilpasser sig til mindre skærme.
  • Klasserne group-blocks--inner group-blocks--two definerer rækken samt antallet af kolonner.
  • Klassen group-blocks--first fortæller browseren, at dette er første kolonne og klassen group-blocks--second at dette er anden kolonne i rækken.

Gem siden. Dit layout ser nu således ud.Layout med tekst


Tilsæt  ikoner

DDB CMS kommer som udgangspunkt med ikon-sættet Font Awesome, version 3.01. Det betyder at du har en række ikoner at vælge imellem til dine sider. Du skal bare kende klasse-navnene.

Først et eksempel, dernæst forklaring:

<a aria-hidden="true" class="icon icon-3x pull-left icon-user" href="http://horsens.ddbcms.dk/">&nbsp;</a>

Forklaring:

  • Attributten aria-hidden="true" skjuler ikonet fra skærmlæsere, så folk med synshandicap ikke får det læst højt.
  • Klassen icon betyder, at dette element skal opføre sig som et ikon, jvf. stylesheet’et.
  • Klassen icon-3x betyder, at ikonet skal være 3 × så stort, som det oprindelige udgangspunkt.
  • Klassen pull-left betyder, at ikonet skal flyde venstre om teksten.
  • Klassen icon-user angiver det valgte ikon-motiv.

Du kan nu indsætte ikonerne i dine kolonner:


<div class="group-blocks--wrapper">

<div class="group-blocks--inner group-blocks--two">


      <a aria-hidden="true" class="icon icon-3x pull-left icon-user" href="https://horsens.ddbcms.dk/">&nbsp;</a>
      <strong>Overskrift 1</strong>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Aenean commodo ligula eget dolor.
    



      <a aria-hidden="true" class="icon icon-3x pull-left icon-shopping-cart" href="https://horsens.ddbcms.dk/">&nbsp;</a>
      <strong>Overskrift 2</strong>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Aenean commodo ligula eget dolor.
    

  </div>


<div class="group-blocks--inner group-blocks--two">


      <a aria-hidden="true" class="icon icon-3x pull-left icon-book" href="https://horsens.ddbcms.dk/">&nbsp;</a>
      <strong>Overskrift 3</strong>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Aenean commodo ligula eget dolor.
    



      <a aria-hidden="true" class="icon icon-3x pull-left icon-headphones" href="https://horsens.ddbcms.dk/">&nbsp;</a>
      <strong>Overskrift 4</strong>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Aenean commodo ligula eget dolor.
    

  </div>

</div>

Kopier gerne koden herover for at have et udgangspunkt.

Og få et resultat i stil med selvbetjeningssiden fra Horsens.Layout med ikoner og tekst

Overblik over ikoner og classes

Du kan variere ikonerne med følgende valgfrie classes:

  • pull-left: Ikonet flyder venstre om teksten.
  • pull-right: Ikonet flyder højre om teksten.
  • icon-2x: Ikonet bliver dobbelt så stort, som udgangspunktet.
  • icon-3x: Ikonet bliver 3 × så stort, som udgangspunktet.
  • icon-4x: Ikonet bliver 4 × så stort, som udgangspunktet.
  • icon-muted: Ikonet bliver lysegråt.

Oversigt over motiver
Alfabetisk overblik over classes, der repræsenterer forskellige motiver. Der er 245 at vælge imellem.
Jeg har lavet et visuelt overblik over ikonerne fra A-Z her.

icon-adjust
icon-align-center
icon-align-justify
icon-align-left
icon-align-right
icon-ambulance
icon-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-asterisk
icon-backward
icon-ban-circle
icon-bar-chart
icon-barcode
icon-beaker
icon-beer
icon-bell
icon-bell-alt
icon-bold
icon-bolt
icon-book
icon-bookmark
icon-bookmark-empty
icon-briefcase
icon-building
icon-bullhorn
icon-calendar
icon-camera
icon-camera-retro
icon-caret-down
icon-caret-left
icon-caret-right
icon-caret-up
icon-certificate
icon-check
icon-check-empty
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up
icon-circle
icon-circle-arrow-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-circle-blank
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-coffee
icon-cog
icon-cogs
icon-columns
icon-comment
icon-comment-alt
icon-comments
icon-comments-alt
icon-copy
icon-credit-card
icon-cut
icon-dashboard
icon-desktop
icon-double-angle-down
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-download
icon-download-alt
icon-edit
icon-eject
icon-envelope
icon-envelope-alt
icon-exchange
icon-exclamation-sign
icon-external-link
icon-eye-close
icon-eye-open
icon-facebook
icon-facebook-sign
icon-facetime-video
icon-fast-backward
icon-fast-forward
icon-fighter-jet
icon-file
icon-file-alt
icon-film
icon-filter
icon-fire
icon-flag
icon-folder-close
icon-folder-close-alt
icon-folder-open
icon-folder-open-alt
icon-font
icon-food
icon-forward
icon-fullscreen
icon-glass
icon-globe
icon-gift
icon-github
icon-github-alt
icon-github-sign
icon-google-plus
icon-google-plus-sign
icon-group
icon-h-sign
icon-hand-down
icon-hand-left
icon-hand-right
icon-hand-up
icon-hdd
icon-headphones
icon-heart
icon-heart-empty
icon-home
icon-hospital
icon-inbox
icon-indent-left
icon-indent-right
icon-info-sign
icon-italic
icon-key
icon-laptop
icon-leaf
icon-legal
icon-lemon
icon-lightbulb
icon-link
icon-linkedin
icon-linkedin-sign
icon-list
icon-list-alt
icon-list-ol
icon-list-ul
icon-lock
icon-magic
icon-magnet
icon-map-marker
icon-medkit
icon-minus
icon-minus-sign
icon-mobile-phone
icon-money
icon-move
icon-music
icon-off
icon-ok
icon-ok-circle
icon-ok-sign
icon-paper-clip
icon-paste
icon-pause
icon-pencil
icon-phone
icon-phone-sign
icon-picture
icon-pinterest
icon-pinterest-sign
icon-plane
icon-play
icon-play-circle
icon-plus
icon-plus-sign
icon-plus-sign-alt
icon-print
icon-pushpin
icon-question-sign
icon-qrcode
icon-quote-left
icon-quote-right
icon-random
icon-refresh
icon-remove
icon-remove-circle
icon-remove-sign
icon-reorder
icon-repeat
icon-reply
icon-resize-full
icon-resize-horizontal
icon-resize-small
icon-resize-vertical
icon-retweet
icon-road
icon-rss
icon-save
icon-screenshot
icon-search
icon-share
icon-share-alt
icon-shopping-cart
icon-sign-blank
icon-signal
icon-signin
icon-signout
icon-sitemap
icon-sort
icon-sort-down
icon-sort-up
icon-spinner
icon-star
icon-star-empty
icon-star-half
icon-step-backward
icon-step-forward
icon-stethoscope
icon-stop
icon-strikethrough
icon-suitcase
icon-table
icon-tablet
icon-tag
icon-tags
icon-tasks
icon-text-height
icon-text-width
icon-th
icon-th-large
icon-th-list
icon-thumbs-down
icon-thumbs-up
icon-time
icon-tint
icon-trash
icon-trophy
icon-truck
icon-twitter
icon-twitter-sign
icon-umbrella
icon-underline
icon-undo
icon-unlock
icon-upload
icon-upload-alt
icon-user
icon-user-md
icon-volume-down
icon-volume-off
icon-volume-up
icon-warning-sign
icon-wrench
icon-zoom-in
icon-zoom-out

Se også dokumentation på Github.

20 thoughts on “Pimp dine DDB CMS sider med ikoner og layout

    1. Tak Jørgen.

      Ja, det her er jo i hvert fald ikke den “rigtige” måde at gøre det på. Der burde være felter i back-end’en til det. Jeg forestiller mig noget, hvor man nemt kan tilføje flere punkter til sin to-spaltede liste og nemt vælge det ikon, det skal vises sammen med.

      Det kan da i hvert fald foreslås som et udviklingsønske.

    1. Det ville være fint, Kalle, men:
      1. Der er ikke defineret nogen CSS columns i det medfølgende stylesheet, som vi jo blot trækker på classes fra.
      2. CSS columns er ret dårligt understøttet i ældre versioner af især Internet Explorer.

      Men antallet af div’er kan muligvis reduceres ved at tilføje en clearfix class på det yderste div element. Jeg har ikke helt testet det, dog.

      1. Jep – jeg er med.
        Jeg følger ikke så godt med – jeg troede man kunne tilføje supplerende stylesheet-css, udover det som medfølger som standard. Altså, at man blot kunne tilføje de relevante ‘colomn’-classes til stylesheet-informationen.

        Tak for svar og fortsat held og lykke med det supergode projekt 🙂

  1. Hej Morten. Tak for tippet! Kan ikke lige gennemskue om det kan lade sig gøre at indsætte ikonerne uden at de fungerer som hyperlinks… er det noget du har tænkt over?

    1. Hej Morten

      Det kan man godt men ikke helt semantisk korrekt, hvis ikonet skal stå alene. Allerhelst ville jeg bruge et <i> eller et <b> element til det formål, for de har ingen semantisk betydning. Desværre er editoren så restriktiv, at den stripper disse elementer.

      Man kan dog bruge et <em> eller et <strong> element i stedet:

      <em class="icon icon-search">&nbsp;</em>

      Eller man kan sætte ikonet på et element, der allerede har indhold (hvilket også er semantisk korrekt):

      <p class="icon icon-search">&nbsp; Her er noget tekst.</p>

      Bemærk &nbsp; og mellemrummet: Det er nødvendigt for at skabe afstand til ikonet. Hvis der ikke står &nbsp; stripper editoren nemlig mellemrummet.

    1. Hvis du skal bruge punktopstillinger i dine kolonner, eller hvis du bare har flere tekstafsnit eller <h1><h6>, skal du ikke sætte dem ind i <p> tags, da <p> er beregnet til tekstafsnit og som sådan semantisk sideordnet med punktopstillinger og overskrifter. Af samme grund vil det ikke fungere ordentligt.

      I stedet skal du erstatte <p class="group-blocks--first"> med <div class="group-blocks--first">. Et <div> tag kan du stort set smide alt ind i. Husk også at erstatte det afsluttende </p> med en afsluttende </div>.

  2. Tak for guiden – det bliver så fint! Jeg har dog problemer med farven på ikonerne, og kan se, at samme problem gælder for Horsens Bibliotek. Her er farven på Lydbøger og SMS-noveller lysere, end de andre mørkerøde ikoner: https://horsens.ddbcms.dk/e-biblioteket.
    På vores hjemmeside, er alle ikonerne på siden “e-biblioteket” mørke, hvorimod de fleste er brune på “e-baser”
    https://ballerup.ddbcms.dk/e-biblioteket
    https://ballerup.ddbcms.dk/e-biblioteket/e-baser

    Kan du gennemskue, hvor det går galt?

    Mange hilsner Maria

    1. Hej Maria

      Det hænger sammen med, at farven på hhv. links og besøgte links er forskellige. Man kan rette farverne på begge i color modulet. Men jeg ville være forsigtig med at rette dem til samme farve som ubesøgte links af hensyn til brugervenligheden.

  3. Tak for svar.
    Det havde jeg ikke lige tænkt på.
    I color modulet er der dog ikke mulighed for at stille på farven for visited links, så vidt jeg kan se. Hvad er det for et felt man skal stille på for at lade farven forblive den samme?
    Jeg kan godt forstå dit synspunkt med brugervenligheden – men burde visited links ikke blive “renset” når man kommer ind på siden på ny?
    Det siger min æstetiske orientering mig i hvert fald 😀
    Mange hilsner Maria

    1. Næh, Maria.
      Jeg tror sørme, du har ret. Man kan ikke rette farven på visited links. De farves bare automatisk mørkere, uanset hvilken farve, du giver dine links.

      Anyway: Visited links “nulstilles” ikke, bare fordi man har forladt siden og besøger den igen og det bør de heller ikke, for så kan man jo ikke se hvilke sider, man tidligere har besøgt og det er jo netop pointen.

      For at “nustille” dem, skal man tømme browserens cache.

Skriv en kommentar