Dokuwiki : personnalisation du thème vector

1. Logo : Pour personnaliser le logo affiché en haut à gauche, créez simplement un logo /vector/user/logo.[png|gif|jpg]. Le thème utilisera ce fichier à la place du logo par défaut. Note : N'oubliez pas de vider le cache de votre navigateur si vous ne voyez aucun effet.
2. Favicône : Pour personnaliser la favicône, créez une favicône /vector/user/favicon.ico. Le thème utilisera ce fichier à la place de la favicône par défaut.Vous pouvez vous aider du Générateur de favicônes en ligne ¹⁾ Note : “favicon.png” n'est pas recommandé.

Créez un fichier :

1. vector/user/screen.css pour la mise en page normale. Vous pouvez renommer le fichier screen.css.dist en screen.css comme point de départ.
2. vector/user/print.css pour la mise en page de l'impression. Vous pouvez renommer le fichier print.css.dist en print.css comme point de départ.
3. vector/user/rtl.css pour les langues qui s'écrivent de droite à gauche comme l'hébreu. Vous pouvez renommer le fichier rtl.css.dist en rtl.css comme point de départ.

Ces fichiers seront inclus automatiquement (en dernier pour le media concerné, vous pouvez donc passer outre les styles existants)

vector/user/screen.css

/* Automatically numbering Headings via CSS 
https://philarcher.org/diary/2013/headingnumbers/ */
body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}
 
h2:before {counter-increment: h2; content: counter(h2) ". "}
h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
 
h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before, #dw__toc h3:before, #panel h5:before { content: ""; counter-increment: none }
 
/* Automatically numbering Table of Contents (TOC) via CSS
https://www.freecodecamp.org/news/numbering-with-css-counters/ */
#dw__toc ul ul {
  list-style-type: none;
  counter-reset: css-counters 0; /* intializes counter, set -1 for zero-based counters */
}
 
#dw__toc ul ul li div.li:before {
  counter-increment: css-counters;
  content: counters(css-counters, ".") " "; /* generates inherited counters from parents */
}

vector/user/screen.css

/* Give sidebar more space. Default: 10em. */
div#content,
div#head-base,
div#footer {
    margin-left: 12em;
}
div#panel,
div#p-logo,
div#p-logo a {
    width: 12em;
}
#left-navigation {
    left: 12em;
}

Remplacez simplement 12em par la valeur voulue. La valeur par défaut est 10em.

vector/user/screen.css

div#p-navigation li.level1 ul {
  margin-top: 0.5em !important;
  margin-left: 1em !important;
}

Police plus petite, espace sur les breadcrumbs, texte plus sombre, bordure plus claire

vector/user/screen.css

.catlinks {
        font-size: 75%;
        border: 1px solid #ddd;
}
.bchead, a.breadcrumbs {
        opacity: 0.6;
}
a.breadcrumbs {
        margin: 0 2px;
}
a.breadcrumbs:hover {
        opacity: 1;
}

vector/user/screen.css

/* Indent table of contents (TOC) (if position: sidebar)
   Note: Config option "Table of contents (TOC) position" (vector_toc_position)
         has to be set to "sidebar". Otherwise, this does not have any effect) */
div#panel #p-toc .dokuwiki li.level2 {
  margin-top: 0.5em;
  margin-left: 4px;
}
div#panel #p-toc .dokuwiki li.level3 {
  margin-top: 0.5em;
  margin-left: 7px;
}
div#panel #p-toc .dokuwiki li.level4,
div#panel #p-toc .dokuwiki li.level5,
div#panel #p-toc .dokuwiki li.level6 {
  margin-top: 0.5em;
  margin-left: 10px;
}

Si vous avez besoin de plus / moins d'indentation, ajustez les valeurs de marge gauche selon vos besoins.

Police plus grande, couleur plus claire pour le texte d'en-tête de la table des matières, léger dégradé pour l'en-tête de la table des matières, plus d'espace après les puces, coins arrondis + ombres.

vector/user/screen.css

div.dokuwiki div.toc {
        font-size: 90%;
}
div.dokuwiki .toc a {
        padding-left: 0.3em;
}
div.dokuwiki div.tocheader {
        padding-left: 1em;
        color: #333;
}
.tocheader {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        -moz-border-radius-topleft: 8px;
        -moz-border-radius-topright: 8px;
        box-shadow: 4px 4px 10px #aaa;
        -moz-box-shadow: 4px 4px 10px #aaa;
        background: -webkit-linear-gradient(left, #eaf2f8, #dee7ec);
        background: -moz-linear-gradient(left, #eaf2f8, #dee7ec);
        background: -ms-linear-gradient(left, #eaf2f8, #dee7ec);
}
#toc__inside {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        -moz-border-radius-bottomleft: 8px;
        -moz-border-radius-bottomright: 8px;
        box-shadow: 4px 4px 10px #aaa;
        -moz-box-shadow: 4px 4px 10px #aaa;
}

vector/user/screen.css

/* centered footer (instead of left aligned) */
#footer #footer-info li,
#footer #footer-info .dokuwiki,
#footer #footer-info .license,
#footer #footer-places li,
#footer #footer-places .dokuwiki {
  text-align: center !important;
}
#footer #footer-places li {
  float: none !important;
}

Je préfère la façon dont le thème default met en évidence les boutons du pied de page lorsque vous passez votre souris dessus (ou plutôt, comment ils sont estompés lorsque vous ne passez pas votre souris dessus), j'ai donc ajouté ceci à /vector/user/screen.css :

/vector/user/screen.css

/* highlight footer buttons on hover */
#footer #footer-places a img {
  opacity: 0.5;
  border: 0;
}
#footer #footer-places a:hover img {
  opacity: 1;
}

/vector/user/screen.css

:target { background-color: lightblue; }

/vector/user/screen.css

div.dokuwiki a.interwiki {
  background-position: center left;
  padding: 0 0 0 17px;
}

/vector/user/screen.css

div#bodyContent a.mail,
div#bodyContent a.urlextern {
  background-position: center left;
  padding: 0 0 0 13px;
}
div.dokuwiki a.windows {
  background-position: center left;
  padding: 0 0 1px 18px;
}

/vector/user/screen.css

#qsearch__out,
#qsearch__out ul {
  width: 17em;
  *width: 16em; /* do not remove the star in front, attribute hack for MS IE6/7 */
}

/vector/user/screen.css

div.qq-upload-button {
  border: 1px solid __border__;
}

Pour appliquer des règles CSS supplémentaires pour une langue spécifique uniquement, créez vector/lang/<your-language>/style.css

Ce fichier sera inclus automatiquement si DokuWiki exécute une page dans la langue choisie ( en dernier lieu, vous pouvez donc annuler les styles existants)

Par défaut, les images ne sont pas mises à l'échelle à la largeur du corps de la page et dépassent la zone visible de la page : ajoutez ceci à /vector/user/user.js:

/vector/user/user.js

let vectorstyle = document.createElement('style');
vectorstyle.id = "custom-styles";
document.head.appendChild(vectorstyle);
vectorstyle.innerHTML = "div#bodyContent img, div#bodyContent svg { max-width: 100%; height: auto; object-fit: cover; }";

créez un fichier vector/user/tabs.php.

Vous pouvez renommer le fichier tabs.php.dist en tabs.php comme un bon point de départ (il contient quelques exemples et des commentaires utiles pour définir vos propres onglets).

Voici des exemples d'onglets personnalisés

Pour les modifications récentes :

/vector/user/tabs.php

//recent changes
if (!empty($conf["recent_days"])){
    $_vector_tabs_right["ca-recent"]["text"]     = $lang["btn_recent"]; //language comes from DokuWiki core
    $_vector_tabs_right["ca-recent"]["href"]     = wl("", array("do" => "recent"), false, "&");
    $_vector_tabs_right["ca-recent"]["nofollow"] = true;
}

/vector/user/tabs.php

//recent changes
if (!empty($conf["recent_days"])){
    $_vector_tabs_right["ca-recent"]["text"]     = $lang["btn_recent"]; //language comes from DokuWiki core
    $_vector_tabs_right["ca-recent"]["href"]     = wl("", array("do" => "recent"), false, "&");
    $_vector_tabs_right["ca-recent"]["nofollow"] = true;
}

/vector/user/tabs.php

//(un)subscribe namespace tab
if (!empty($conf["useacl"]) &&
    !empty($conf["subscribers"]) &&
    !empty($loginname)){ //$loginname was defined within main.php
    if (empty($INFO["subscribedns"])){ //$INFO comes from DokuWiki core
        $_vector_tabs_right["ca-watchns"]["href"] = wl(cleanID(getID()), array("do" => "subscribens"), false, "&");
        $_vector_tabs_right["ca-watchns"]["text"] = $lang["vector_subscribens"]; 
    }else{
        $_vector_tabs_right["ca-watchns"]["href"] = wl(cleanID(getID()), array("do" => "unsubscribens"), false, "&");
        $_vector_tabs_right["ca-watchns"]["text"] = $lang["vector_unsubscribens"]; 
    }
}

Le thème vector ne gère pas l'événement MENU_ITEMS_ASSEMBLY, donc les plugins qui s'appuient sur cet événement pour ajouter des boutons aux menus (comme les plugins deletepagebutton et bookcreator) ne montrent pas son icône / lien (bouton).

Mais vous pouvez, pour chaque élément PageMenu, ajouter son icône / lien manuellement.

/vector/user/tabs.php

//custom plugin tab
$skip_types = ['edit', 'revs', 'backlink', 'export_pdf', 'export_odt', 'top'];
foreach((new \dokuwiki\Menu\PageMenu())->getItems() as $item) {
    if(in_array($item->getType(), $skip_types)) {
        continue;
    }
 
    $_vector_tabs_right["tab-" . $item->getType()]["text"]     = $item->getLabel();
    $_vector_tabs_right["tab-" . $item->getType()]["href"]     = $item->getLink();
    $_vector_tabs_right["tab-" . $item->getType()]["class"]    = $item->getType();
    $_vector_tabs_right["tab-" . $item->getType()]["nofollow"] = true;
}

Pour créer vos propres boutons dans le pied de page (→ ces petites images 80×15), créez un fichier vector/user/buttons.php.

Vous pouvez renommer le fichier buttons.php.dist en buttons.php comme un bon point de départ (il contient quelques exemples et des commentaires utiles pour définir les boutons)

Pour appliquer vos propres boîtes dans la barre de gauche, créez un fichier vector/user/boxes.php.

Vous pouvez renommer le fichier boxes.php.dist en boxes.php comme un bon point de départ (il contient quelques exemples et des commentaires utiles pour définir vos propres boîtes).

Pour modifier la boîte à outils (si elle ne vous convient pas) ou changer l'ordre des boîtes :

1. Désactivez-les via la configuration :

   • Show navigation?
     […]
   • Show 'print/export' box?
     […]
   • Show toolbox?
2. Copiez le code PHP de la boîte à personnaliser de /vector/conf/boxes.php dans /vector/user/boxes.php
3. et éditez le fichier /vector/user/boxes.php pour le personnaliser

Les outils comme Piwik et Google Analytics fournissent un petit bout de code (“tag”) à inclure sur votre site web pour que tout fonctionne.

Pour utiliser un tel logiciel avec ce modèle, créez un fichier vector/user/tracker.php.dist.

Vous pouvez renommer tracker.php.dist en tracker.php comme un bon point de départ (il contient quelques exemples et des commentaires utiles sur la façon de définir vos boîtes).

• (fr) https://www.dokuwiki.org/template:vector

Basé sur « vector for DokuWiki » par DokuWiki.