Beaucoup de détails sur la personnalisation ici : http://www.dokuwiki.org/template:monobook

Jetez un oeil à README. Vous trouverez ici de quoi personnaliser :

• votre logo
• votre favicon
• votre CSS
• votre JavaScript
• votre CSS, selon la langue
• votre icône Apple Touch (apple-touch-icon.png)
• vos tabs
• vos buttons/icons (footer)
• vos boxes (left-column)

À insérer dans /monobook/user/tabs.php (PAS /monobook/conf/tabs.php) (car les fichiers dans monobook/user/ seront conservés lors des mises à jour, ce qui évite de refaire sans cesse vos personnalisations)

/monobook/user/tabs.php

//Recent Changes (thanks to Stefan Riemer for this)
//To get some space between this and the other tabs, you may add the following
//additional CSS to /monobook/user/screen.css:
//  li#tab-recent {
//    margin-left: 1.6em;
//  }
if (!empty($conf["recent_days"])){     
    $_monobook_tabs["tab-recent"]["text"]     = $lang["btn_recent"]; //language comes from DokuWiki core
    $_monobook_tabs["tab-recent"]["href"]     = wl("", array("do" => "recent"), false, "&");
    $_monobook_tabs["tab-recent"]["nofollow"] = true;
}

… à insérer dans /monobook/user/boxes.php (PAS /monobook/conf/boxes.php) ¹⁾

/monobook/user/boxes.php

//QR-Code of the current page (thanks to Luigi Micco <http://www.luigimicco.altervista.org> for this)
$_monobook_boxes["qrcode"]["headline"] = "QR-Code";
$_monobook_boxes["qrcode"]["xhtml"] = '<img src="http://api.qrserver.com/v1/create-qr-code/?data='.urlencode(cleanID(getID()), false, true, "&")).'&amp;size=135x135" style="margin:0.5em 0 0.3em -0.2em;" alt="QR-Code: '.wl(cleanID(getID()), false, true).'" title="QR-Code: '.wl(cleanID(getID()), false, true).'" /><p style="font-size:6px !important;margin:0;padding:0;color:#aaa;"><a href="http://goqr.me/" style="color:#aaa;">QR Code</a> by <a href="http://qrserver.com/" style="color:#aaa;">QR-Server</a></p>';

Pour prendre en charge le plug-in BookCreator, utilisez ce code:

//To add support for bookcreator plugin
$_monobook_boxes["bookcreator"]["headline"] = "Create book";
$_monobook_boxes["bookcreator"]["xhtml"] =  "        <ul>\n"
                                         ."          <li id=\"tb-bookcreator\"><a href=\"".wl(cleanID(getID()), array("do" => "addtobook"))."\" rel=\"nofollow\">".hsc('Add/Remove page')."</a></li>\n"
                                         ."          <li id=\"tb-bookcreator\"><a href=\"".wl('wiki:ebook')."\" rel=\"nofollow\">".hsc('Show selection')."</a></li>\n"
                                         ."        </ul>";

Pour ajouter “modifications récentes” et le plugin listeabo

ajoutez dans lang.php (français :)

$lang['monobook_changes'] = "Modifications récentes";
$lang['monobook_listeabo'] = "Liste des abonnements";

Et ce qui suit dans user/boxes.php :

user/boxes.php

$_monobook_boxes["Addition"]["headline"] = "TITLE";
$_monobook_boxes["Addition"]["xhtml"] =  "<ul>\n"
                                      // added recent changes 
                                      ."          <li><a href=\"".DOKU_BASE."doku.php?do=recent"."\" rel=\"nofollow\">".hsc($lang["monobook_changes"])."</a></li>\n"
                                      // added listabo
                                      ."          <li><a href=\"".DOKU_BASE."doku.php?do=listeabo"."\" rel=\"nofollow\">".hsc($lang["monobook_listeabo"])."</a></li>\n"
                                      ."</ul>";

… à insérer dans /monobook/user/screen.css (PAS /monobook/static/css/screen.css) ²⁾.

Ouvrez /user/screen.css et insérez :

/user/**screen.css

div.dokuwiki a.wikilink1 :link{
  color: #006600 !important;
}
div.dokuwiki a.wikilink1:visited { 
  color: #009933 !important; 
}
div.dokuwiki a.wikilink1:hover { 
  color: #006600 !important; 
}

Remplacez simplement les couleurs par les valeurs que vous voulez.

Ouvrez /user/screen.css et insérez :

/user/screen.css

/* Donner plus d'espace à la barre latérale.
 
   Largeurs par défaut :
   - espace de 12.2em à gauche pour la zone de contenu. Dans cet exemple : 14.2em.
   - largeur de barre latérale : 11,6em. Dans cet exemple : 13.6em.
   - largeur du champ de recherche : 10.9em. Dans cet exemple : 12.9em.
   - espace de 150px à gauche pour la boîte de recherche Ajax. Dans cet exemple : 180px.
*/
/* déplacer le conteneur vers la droite */
#content {
  margin: 2.8em 0 0 14.2em;
}
#column-content {
  margin: 0 0 .6em -14.2em;
}
#column-content #content {
  margin-left: 14.2em !important; /* adjustment for  IE (7) */
}
/* redéfinir la largeur de la barre latérale + la position de la barre de tabulation */
.portlet {
  width: 13.6em;
}
#p-cactions {
  left: 13.6em; /* tab bar */
}
/* champ de recherche */
#qsearch__in {
  width: 12.9em;
}
/* boîte de recherche ajax "correspondant au nom de page" */
#qsearch__out {
  left: 180px
}

Stockez votre image d'arrière-plan en /user/background.jpg, ouvrez /user/screen.css et insérez :

html {
  background-color: #f9f9f9;
}
body {
  background: #f9f9f9 url(user/background.jpg) 0 0 no-repeat;
}

Si nécessaire, remplacez la couleur #f9f9f9 par une valeur correspondant à vos besoins.

Ouvrez /user/screen.css et insérez :

/user/screen.css

#qsearch__out {
  position: static !important;
  font-size: 85% !important;
  background: __background__ !important;
  margin-top: 0 !important;
  margin-bottom: 0.5em;
  width: 12.2em;
  display: none;
  border: 1px solid #aaa;
  padding: 0 .8em .3em .5em;
}

Ouvrez /user/screen.css et insérez :

/user/screen.css

div#content .dokuwiki code {
  white-space: pre;
}

• (fr) http://Article

Basé sur « Article » par Auteur.