{{tag>Logiciel}}

====== Monobook : configuration ======

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

Jetez un oeil à [[https://github.com/andreashaerter/dokuwiki-template-monobook/blob/master/README|README]]. Vous trouverez ici de quoi personnaliser :
  * votre logo
  * votre favicon
  * votre CSS
  * votre JavaScript
  * votre CSS, selon la langue
  * votre [[http://developer.apple.com/library/IOs/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html|icône Apple Touch]] (''apple-touch-icon.png'')
  * **vos tabs**
  * **vos buttons/icons** (footer)
  * **vos boxes** (left-column)

<WRAP center round important 60%>
Pour ceux qui ne lisent jamais les READMEs:
  * toutes les personnalisations définies par l'utilisateur sont placées dans le répertoire **monobook/user**. En effet, ce dossier ne sera pas touché par les mises à jour.
  * Pour remplacer le logo par défaut qui s'affiche dans le coin supérieur gauche, il suffit de créer un fichier **/monobook/user/logo.[png|gif|jpg]**. Le modèle reconnaît automatiquement ce fichier et l'utilisera à la place du logo par défaut.
  * Pour ajouter des onglets, jetez un oeil sur **/monobook/**user**/tabs.php** (**PAS** /monobook/**conf**/tabs.php).
  * Pour ajouter vos propres boutons (en bas), jetez un oeil sur **/monobook/**user**/buttons.php** (**PAS** /monobook/**conf**/buttons.php).
  * Pour ajouter vos propres boîtes (colonne de gauche), jetez un oeil sur **/monobook/**user**/boxes.php** (**PAS** /monobook/**conf**/boxes.php).

Si l'un des fichiers dans /monobook/**user**/ n'existe pas, ne touchez pas au contenu de /monobook/**user**/, prenez les fichiers manquants dans la nouvelle archive d'installation et copiez-les dans /monobook/**user**/.
</WRAP>

===== Exemples d'onglets personnalisés =====

À 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)

==== Modifications récentes ====

<code php /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;
}
</code>

===== Exemples de boîtes personnalisées =====

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

==== QR Code de la page courante ====

<code 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>';
</code>

==== Prise en charge du plugin pdfbook ====

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

<code php>
//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>";
</code>

==== Modifications récentes et plugin "listeabo" ====

Pour ajouter "modifications récentes" et le plugin listeabo

ajoutez dans ** lang.php ** (//français ://)
<code>
$lang['monobook_changes'] = "Modifications récentes";
$lang['monobook_listeabo'] = "Liste des abonnements";
</code>

Et ce qui suit dans **user/boxes.php** :
<code - 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>";
</code>

===== Hacks pour /user/screen.css =====

... à insérer dans ''/monobook/**user**/screen.css'' (**PAS** ''/monobook/**static**/css/screen.css'') ((car les fichiers dans **monobook/user/** seront conservés lors des mises à jour, ce qui évite de refaire sans cesse vos personnalisations)).

==== Couleurs de liens personnalisées (wiki / liens internes) ====

Ouvrez ''**/user/**screen.css'' et insérez :
<code css /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; 
}
</code>

Remplacez simplement les couleurs par les valeurs que vous voulez.

==== Barre latérale plus large / plus d'espace pour la colonne de gauche ====

Ouvrez ''**/user/**screen.css'' et insérez :
<code css /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
}
</code>

==== Image d'arrière-plan personnalisée ====

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

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

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

==== Ajax Quicksearch : afficher les résultats dans la barre latérale ====

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

<code css /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;
}
</code>

==== Préserver les espaces (plusieurs espaces, tabulations) dans le texte de code ====

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

<code css /user/screen.css>
div#content .dokuwiki code {
  white-space: pre;
}
</code>

===== Utilisation =====

===== Désinstallation =====

===== Voir aussi =====

  * **(fr)** [[http://Article]]

----
//Basé sur << [[http://Article|Article]] >> par Auteur.//