Documentation du Dr FRAPPE

Ce wiki regroupe les résultats de mes expériences en informatique accumulés au cours de mes recherches sur le net.
Dans la mesure du possible, j'ai cité mes sources ; il en manque certainement…
Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
{{tag>Logiciel}}

====== Dokuwiki : personnalisation du thème vector ======

<WRAP center round important 60%>
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.
</WRAP>
===== 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)

<WRAP center round tip 60%>
N'oubliez pas de vider le cache de votre navigateur si vous ne voyez aucun effet.
</WRAP>

=== Numérotation automatique des titres et de la table des matières (TOC) via CSS ===

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

=== Élargir la barre latérale : plus d'espace pour la colonne de gauche ===

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

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

=== Navigation: indentation de liste ===

<code css vector/user/screen.css>div#p-navigation li.level1 ul {
  margin-top: 0.5em !important;
  margin-left: 1em !important;
}</code>

=== Trace: font, spacing, border color ===

Police plus petite, espace sur les breadcrumbs, texte plus sombre, bordure plus claire<code css 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;
}</code>

=== Table des matières (TOC): indenter si position = 'sidebar' ===

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

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.

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

=== Pied de page: centré ===

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

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

=== Mettre en évidence la section en cours ===

<code css /vector/user/screen.css>:target { background-color: lightblue; }</code>

=== Icônes de liens InterWiki sur le côté gauche (au lieu du côté droit) ===

<code css /vector/user/screen.css>div.dokuwiki a.interwiki {
  background-position: center left;
  padding: 0 0 0 17px;
}</code>

=== Icônes de courrier, d'URL externe et de lien de partage samba sur le côté gauche ===

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

=== Limiter la largeur des résultats de la recherche rapide Ajax ===

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

=== Ajouter une bordure au bouton de téléchargement du gestionnaire de médias ===

<code css /vector/user/screen.css>
div.qq-upload-button {
  border: 1px solid __border__;
}</code>

==== CSS personnalisé, spécifique à la langue ====

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)

<WRAP center round tip 60%>
N'oubliez pas de vider le cache de votre navigateur si vous ne voyez aucun effet.
</WRAP>


===== Javascript personnalisé =====

<WRAP center round important 60%>
à 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).
</WRAP>

<WRAP center round important 60%>
Activez l'option **vector_loaduserjs** (-> Load 'vectoruseruser.js' ?) du thème dans le gestionnaire de configuration de DokuWiki.
</WRAP>

==== 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:
<code 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; }";
</code>

===== 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

<WRAP center round tip 60%>
remplacez **$_vector_tabs_right** par **$_vector_tabs_left** pour ajouter les onglets de gauche au lieu de ceux de droite (et vice versa).
</WRAP>

Pour les modifications récentes :<code php /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;
}
</code>

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

=== Changements récents ===

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

=== S'abonner ou se désabonner à un espace de noms ===

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

=== 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.

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

===== 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).

<WRAP center round important 60%>
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
</WRAP>

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 ====

<WRAP center round important 60%>
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.
</WRAP>

<WRAP list-deep>
  - **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.
</WRAP>

===== 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.//
Piste : • Restaurer un profil de Firefox • move : déplace et renomme des pages et des fichiers multimédias • SFTP sur un Raspberry Pi • GIMP : Comment réaliser un pêle-mêle de photographies • e2label : étiquette d'une partition • Rsync • folded : Sections de page repliables • SparkleShare, un Dropbox-like Open Source
Documentation du Dr FRAPPE

Recherche

Navigation

Imprimer/exporter

Outils

QR Code
