Understregning af links i DDB CMS

Standard temaet i DDB CMS, DDBasic, leveres med et stylesheet, hvor man har fjernet understregning fra links, formentlig af æstetiske årsager. Det gør det imidlertid svært at skelne links fra brødtekst og forringer brugervenligheden.

Sådan genetablerer du understregning af links i DDB CMS

Det er et lidt grimt hack fordi det modificerer allerede etableret kode og det er i princippet skidt for performance. Men det er den eneste måde at gøre det på, hvis man vil slippe for at bygge et nyt tema til Drupal. Metoden kræver dog, at dit bibliotek som minimum har webmaster hosting planen hos DBC.

Du skal først installere modulet CSS Injector i Drupal.

1. Start med at gå til CSS Injector projektet på Drupal.org.
Scroll ned til Downloads og kopier URL’en til tar.gz filen til Drupal 7 (eller nap URL’en her – http://ftp.drupal.org/files/projects/css_injector-7.x-1.10.tar.gz).

2. Log ind i dit dev site som admin.

3. Klik dig frem til “Installér nyt modul”:
Hjem » Administration » Moduler » Moduler

4. Sæt URL’en ind i feltet “Installér fra URL” og klik på knappen “Installér”.

5. Husk at aktivere modulet, når det er installeret.

6. Klik dig frem til CSS Injector:
Hjem » Administration » Indstillinger » Udvikling » CSS injector

7. Klik på “Create a new rule”.
Her er et tekstfelt, “CSS-kode”, hvor du kan skrive den CSS, du ønsker at tilpasse.

Man er nødt til at “overskrive” den kode, der allerede er etableret i temaet. Derfor må man ramme HTML’en mere specifikt og det kræver lidt flere linjer kode, end man umiddelbart skulle tro. Jeg skal prøve at forklare med kommentarer undervejs:

/* Understregning af links
   ----------------------- */
.primary-content a, /* Links i det primære indholdsområde. */
.secondary-content a, /* Links i det sekundære indholdsområde, f.eks. nyhedslisten på forsiden. */
.tertiary-content a, /* Links i det tertiære indholdsområde, f.eks. arrangementer på forsiden. */
.group-blocks--wrapper a, /* Links i kolonne-opstillinger, f.eks. grupper/temaer i bunden af forsiden. */
.ting-object .heading h2 a, /* Links i h2 overskrifter, f.eks. på poster og samlinger i databrønden. */
.secondary-content .sub-menu li a:active, /* Aktive links i sidemenuen på undersider. */
.secondary-content .sub-menu li a:hover, /* Når musen føres over links i sidemenuen på undersider. */
.secondary-content .sub-menu li a:focus {text-decoration: underline;}  /* Links i fokus i sidemenuen på undersider. */

/* Fjernelse af understregning af links
   ------------------------------------ */
.primary-content a:active, /* Aktive links i det primære indholdsområde. */
.secondary-content a:active, /* Aktive links i det sekundære indholdsområde, f.eks. nyhedslisten på forsiden. */
.tertiary-content a:active, /* Aktive links i det tertiære indholdsområde, f.eks. arrangementer på forsiden. */
.group-blocks--wrapper a:active, /* Aktive links i kolonne-opstillinger, f.eks. grupper/temaer i bunden af forsiden. */
.primary-content a:hover, /* Når musen føres over links i det primære indholdsområde. */
.secondary-content a:hover, /* Når musen føres over links i det sekundære indholdsområde, f.eks. nyhedslisten på forsiden. */
.tertiary-content a:hover, /* Når musen føres over links i det tertiære indholdsområde, f.eks. arrangementer på forsiden. */
.group-blocks--wrapper a:hover, /* Når musen føres over links i kolonne-opstillinger, f.eks. grupper/temaer i bunden af forsiden. */
.primary-content a:focus, /* Links i fokus i det primære indholdsområde. */
.secondary-content a:focus, /* Links i fokus i det sekundære indholdsområde, f.eks. nyhedslisten på forsiden. */
.tertiary-content a:focus, /* Links i fokus i det tertiære indholdsområde, f.eks. arrangementer på forsiden. */
.group-blocks--wrapper a:focus, /* Links i fokus i kolonne-opstillinger, f.eks. grupper/temaer i bunden af forsiden. */
.secondary-content .sub-menu li a, /* Vi vil ikke have understregning på links i sidemenuen på undersider. */
.primary-content a.icon, /* Ingen understregning af links på ikoner */ 
.secondary-content a.icon, /* Ingen understregning af links på ikoner */
.tertiary-content a.icon, /* Ingen understregning af links på ikoner */
.group-blocks--wrapper a.icon, /* Ingen understregning af links på ikoner */
.view-node-search-result .node-ding-event .group-right-col-search .event-arrow-link a, /* Ingen understregning af links på pile */
.ting-reference-reverse-list .node-ding-event .group-right-col-search .event-arrow-link a, /* Ingen understregning af links på pile */
.event-list .event-arrow-link a, /* Ingen understregning af links på pile */
.groups-list .groups-arrow-link a {text-decoration: none!important;} /* Ingen understregning af links på pile */

Du kan roligt slette mine kommentarer, dvs. alt indenfor /* */, inkl. skråstreger og asterisker.

8. I feltet “Themes to show on” vælges “DDBasic”.

9. I feltet “Add the CSS on specific pages” vælges radioknappen “Add on every page except the listed pages.”

10. Kryds af i “Enable rule”, tryk på knappen “Gem” and you are good to go.