Accueil > Informatique > Personnaliser les titres d’une page Dokuwiki

Personnaliser les titres d’une page Dokuwiki

Dans un précédent article, je vous avais expliqué tout le bien que je pensais de Dokuwiki…
L’autre jour, le trouvant un peu tristounet au niveau de la présentation, je cherchais à modifier la couleurs des différents niveaux de titres que l’on peut appliquer dans une page. Après des recherches infructueuses sur le net, je décidais de tenter ma chance sur l’IRC de Dokuwiki (irc.freenode.net / #dokuwiki).

Voici les étapes à suivre :

1) Créer dans le répertoire conf de Dokuwiki un fichier nommé userstyle.css.
2) Définir dans ce fichier les styles pour chaque niveau de titre, par exemple :
div.dokuwiki h1 a {color: #1f1f52 !important;}
div.dokuwiki h2 a {font-weight: bold; color: #1c1cf4 !important;}
div.dokuwiki h3 a {color: #5b5bf6 !important;}

Remarque 1 : la présence de l’élément !important est impérative pour pouvoir changer la couleur.
Remarque 2 : évidemment il n’y a pas que les titres qu’il est possible de modifier. Par exemple on peut aussi modifier l’apparence des portions de code :
div.dokuwiki pre.code {
border: none;
border-left: 2px solid #F99451;
background-color: #e8e4e4;
color: #000053;
font-family: monospace;
font-size: 120%;
}

Remarque 3 : pour repérer les styles, aller sur la page et utiliser l’excellente extension de Firefox : firebug.

Categories: Informatique Tags: .: css .: dokuwiki
  1. 15/12/2010 à 12:26 | #1

    Le !important n’est pas obligatoire si tu fais ça :
    body div.dokuwiki h1 a {color: #1f1f52}
    body div.dokuwiki h2 a {font-weight: bold; color: #1c1cf4}
    body div.dokuwiki h3 a {color: #5b5bf6}

    ou (à tester)
    div.dokuwiki div.page h1 a {color: #1f1f52}
    div.dokuwiki div.page h2 a {font-weight: bold; color: #1c1cf4}
    div.dokuwiki div.page h3 a {color: #5b5bf6}

    Il suffit d’être plus précis que la css de base.

    Le « problème » avec !important c’est qu’il a pas le même comportement sur tous les navigateurs (typiquement des vieilles versions d’IE)

  2. Marco
    15/12/2010 à 18:33 | #2

    Chez moi aucune des 2 alternatives que tu proposes ne marche… (Firefox 3.6.13)

  3. tonguide
    29/06/2012 à 17:15 | #3

    Juste un petit merci, pas moyen de trouver la solution sur le site anglais 🙂

  4. aranud
    03/08/2014 à 02:13 | #4

    Bonjour,

    Si comme moi vous cherchez, le code a dû être modifié (Actuellement en version : Release 2014-05-05a « Ponder Stibbons »).
    L’adresse de la page à créer reste la même mais voici le code :

    h1 {
    color: #262F45;
    }

    Voir : https://www.dokuwiki.org/tips:styling-headers

  1. Pas encore de trackbacks