{{tag>Logiciel}} ====== Dokuwiki : personnalisation du thème vector ====== Les éléments personnalisés définis par l'utilisateur doivent être placés dans **vector/user** car ce dossier n'est pas touché lors des mises à jour. ===== Logo et favicône ===== - **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. - **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** ((http://tools.dynamicdrive.com/favicon/)) Note : "favicon.png" n'est pas recommandé. ===== CSS ===== ==== Appliquer des règles CSS supplémentaires ==== Créez un fichier : - **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. - **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. - **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) N'oubliez pas de vider le cache de votre navigateur si vous ne voyez aucun effet. === Numérotation automatique des titres et de la table des matières (TOC) via 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 */ } === Élargir la barre latérale : plus d'espace pour la colonne de gauche === /* 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. === Navigation: indentation de liste === div#p-navigation li.level1 ul { margin-top: 0.5em !important; margin-left: 1em !important; } === Trace: font, spacing, border color === Police plus petite, espace sur les breadcrumbs, texte plus sombre, bordure plus claire .catlinks { font-size: 75%; border: 1px solid #ddd; } .bchead, a.breadcrumbs { opacity: 0.6; } a.breadcrumbs { margin: 0 2px; } a.breadcrumbs:hover { opacity: 1; } === Table des matières (TOC): indenter si position = 'sidebar' === /* 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. === Table des matières (TOC): police, espacement, coins, ombres === 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. 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; } === Pied de page: centré === /* 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; } === Boutons de bas de page (style du thème défault) : mise en évidence au survol de la souris === 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 : /* highlight footer buttons on hover */ #footer #footer-places a img { opacity: 0.5; border: 0; } #footer #footer-places a:hover img { opacity: 1; } === Mettre en évidence la section en cours === :target { background-color: lightblue; } === Icônes de liens InterWiki sur le côté gauche (au lieu du côté droit) === div.dokuwiki a.interwiki { background-position: center left; padding: 0 0 0 17px; } === Icônes de courrier, d'URL externe et de lien de partage samba sur le côté gauche === 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; } === Limiter la largeur des résultats de la recherche rapide Ajax === #qsearch__out, #qsearch__out ul { width: 17em; *width: 16em; /* do not remove the star in front, attribute hack for MS IE6/7 */ } === Ajouter une bordure au bouton de téléchargement du gestionnaire de médias === div.qq-upload-button { border: 1px solid __border__; } ==== CSS personnalisé, spécifique à la langue ==== Pour appliquer des règles CSS supplémentaires pour une langue spécifique uniquement, créez **vector/lang//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) N'oubliez pas de vider le cache de votre navigateur si vous ne voyez aucun effet. ===== Javascript personnalisé ===== à insérer dans **/vector/user/user.js**. Vous pouvez renommer le fichier **user.js.dist** en **user.js** comme point de départ (il contient quelques exemples et des commentaires utiles pour définir votre propre JavaScript). Activez l'option **vector_loaduserjs** (-> Load 'vectoruseruser.js' ?) du thème dans le gestionnaire de configuration de DokuWiki. ==== Les images dépassent la largeur du corps de la page ==== 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: 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; }"; ===== Onglets personnalisés ===== ==== Créer vos propres onglets ==== 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 remplacez **$_vector_tabs_right** par **$_vector_tabs_left** pour ajouter les onglets de gauche au lieu de ceux de droite (et vice versa). Pour les modifications récentes : //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; } ==== Exemples d'onglets personnalisés ==== === Changements récents === //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; } === S'abonner ou se désabonner à un espace de noms === //(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"]; } } === Plugin sur mesure === 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. //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; } ===== Boutons de pied de page ===== Pour créer vos propres boutons dans le pied de page (-> ces petites images 80x15), 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) ===== Boîtes ===== 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). Ne modifiez que le fichier **/vector/user/boxes.php**. Ne modifiez PAS /vector/conf/boxes.php pour éviter des problèmes lors des mises à jour Pour modifier la boîte à outils (si elle ne vous convient pas) ou changer l'ordre des boîtes : - **Désactivez-les** via la configuration : * Show navigation?\\ […] * Show 'print/export' box?\\ […] * Show toolbox? - Copiez le code PHP de la boîte à personnaliser de /vector/conf/boxes.php dans /vector/user/boxes.php - et éditez le fichier /vector/user/boxes.php pour le personnaliser ==== Créer une boîte à outils ou une boîte d'exportation personnalisée ? Modifier l'ordre des boîtes intégrées ==== Rappelons tout d'abord que les modifications ne doivent être apportées qu'à **/vector/user/boxes.php** pour éviter les problèmes lors des mises à jour. - **Dans la section d'administration de DokuWiki, désactiver les boîtes** dont vous ne voulez pas. - **Copiez le code de la boîte que vous voulez personnaliser** de **/vector/conf/boxes.php** dans **/vector/user/boxes.php** et faites les modifications voulues. ===== Logiciels d'analyse de sites web (Piwik, Google Analytics, etc.) ===== 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). ===== Voir aussi ===== * **(fr)** [[https://www.dokuwiki.org/template:vector]] ---- //Basé sur << [[https://www.dokuwiki.org/template:vector|vector for DokuWiki]] >> par DokuWiki.//