Pimp dine DDB CMS sider med ikoner og layout

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.

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.

2. Klik på “Kilde”

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

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

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

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

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

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

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">
		<p class="group-blocks--first"><strong class="name"><strong>Overskrift 1</strong><br>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</strong></p>

		<p class="group-blocks--second"><strong class="name"><strong>Overskrift 2</strong><br>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</strong></p>
	</div>

	<div class="group-blocks--inner group-blocks--two">
		<p class="group-blocks--first"><strong class="name"><strong>Overskrift 3</strong><br>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</strong></p>

		<p class="group-blocks--second"><strong class="name"><strong>Overskrift 4</strong><br>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</strong></p>
	</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.

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>

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

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

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

	</div>

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

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

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

	</div>
</div>

Kopier gerne koden herover for at have et udgangspunkt.

Og få et resultat i stil med selvbetjeningssiden fra Horsens.

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.