Table des matières

Installation du thème
Personnalisation des feuilles de style
- Récupérer un thème
- Activation d'un thème personnel
Barre de navigation
Logo et favicon
Plugins utilisés / tentés / à tester
Autres liens
DIVERS
Local.protected.php

tag

Modification du thème de la documentation Ubuntu-fr

Cette page fait partie du Chantier de refonte du design relancé en 2017 et sert de guide aux administrateurs qui ont pris le parti de repartir de zéro. Une fois en place tous les éléments notés ici feront parti intégrante de l'installation en locale et la page servira ensuite uniquement d'aide-mémoire pour eux.

Il s'agit ici de compléter l'installation de la documentation en locale par la mise en place de son thème et sa personnalisation.

Pour facilité la lecture, les chemins des fichiers indiqués partent du dossier où vous avez installé votre documentation. Il s'agira donc ici de /var/www/html/ubuntu-fr/ubuntu-fr-doc/

Installation du thème

Installer le plugin bootstrap3 depuis le gestionnaire d'extensions.

Celà correspondra, après l'avoir téléchargée, à l'extraire avec le nom boostrap3 dans le dossier lib/tpl et à ajouter dans le fichier conf/local.protected.php la ligne suivante

$conf['template']    = 'bootstrap3';

Activer le thème United depuis les paramètres de configuration

Celà correspondra à modifier dans le fichier local.protected.php les lignes comme suit

$conf['tpl']['bootstrap3']['bootstrapTheme'] = 'bootswatch';
$conf['tpl']['bootstrap3']['bootswatchTheme'] = 'united';

Après enregistrement de ces modifications, actualiser le navigateur: vous devriez être sur le thème United :)

Personnalisation des feuilles de style

Il est tout à fait possible de partir d'un thème existant pour l'adapter à vos envies.

Récupérer un thème

Vous pouvez créer votre propre thème en vous basant et adaptant le fichier bootstrap.min.css d'un des thèmes qui se trouve dans /lib/tpl/bootstrap3/assets/bootstrap/.

D'autres navigateurs le font mais Firefox avec ses outils de développement web déjà présent par défaut, permet également de récupérer une feuille de style basé sur bootstrap.

Pour la suite ce fichier bootstrap.min.css sera placé dans un dossier dédié de notre documentation local : lib/tpl/bootstrap3/assets/bootstrap/themeperso1/.

Modifiez le fichier bootstrap.min.css à votre convenance pour en faire un thème à votre goût.

C'est le nom de votre dossier qui défini celui de votre thème. Ne renommez en aucun cas le fichier bootstrap.min.css sans quoi il ne sera pas reconnu.

Activation d'un thème personnel

Pour activer votre thème il faudra :

Modifier dans le fichier lib/tpl/bootstrap3/conf/metadata.php la ligne suivante
```
$meta['bootswatchTheme']     = array('multichoice', '_choices' => array( 'darkly', 'united', 'themeperso1'));
```
C'est d'ailleurs cette même ligne qui défini la liste des thèmes que vous rendez disponible.

Ensuite depuis les paramètres de configuration :

activer le menu pour les thèmes de bootswatch.com
activer le répertoire local de Bootswatch

Celà correspondra à ajouter dans conf/local.protected.php les lignes

$conf['tpl']['bootstrap3']['showThemeSwitcher'] = 1;
$conf['tpl']['bootstrap3']['useLocalBootswatch'] = 1;

Actualiser la page du navigateur. Vous devriez avoir une icône supplémentaire vous permettant de choisir votre thème.

Barre de navigation

La suite fonctionne pour le moment mais des tests sont fait -02/2017- avec les font awesome plus pratique et fourni avec bootstrap

Dans le fichier lib/tpl/bootstrap3/tpl_navbar.php remplacer les lignes 33 à 53 par le contenu suivant:

      <?php
 
	$logo_accueil=tpl_getMediaFile(array(':wiki:accueil.png', ':accueil.png', 'images/accueil.png'), false, $logoSize);
	$logo_forum=tpl_getMediaFile(array(':wiki:forum.png', ':forum.png', 'images/forum.png'), false, $logoSize);
	$logo_planet=tpl_getMediaFile(array(':wiki:planet.png', ':planet.png', 'images/planet.png'), false, $logoSize);
 
        // get logo either out of the template images folder or data/media folder
        $logoSize  = array();
        $logo      = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false, $logoSize);
        $title     = $conf['title'];
        $tagline   = ($conf['tagline']) ? '<span id="dw__tagline">'.$conf['tagline'].'</span>' : '';
        $logo_size = 'height="20"';
 
        if ($tagline) {
          $logo_size = 'height="32" style="margin-top:-5px"';
        }
 
        // display logo and wiki title in a link to the home page
        tpl_link(
            '//www.ubuntu-fr.org',
            '<img src="'.$logo_accueil.'" alt="Accueil" class="pull-left" id="dw__accueil" '.$logo_size.' /> ',
            'accesskey="a" title="[A]" class="navbar-brand"'
        );
 
	tpl_link(
            wl(),
            '<img src="'.$logo.'" alt="'.$title.'" class="pull-left" id="dw__logo" '.$logo_size.' /> ',
            'accesskey="h" title="[H]" class="navbar-brand"'
        );
 
	tpl_link(
            '//forum.ubuntu-fr.org',
            '<img src="'.$logo_forum.'" alt="Forum" class="pull-left" id="dw__forum" '.$logo_size.' /> ',
            'accesskey="f" title="[F]" class="navbar-brand"'
        );
 
	tpl_link(
            '//planet.ubuntu-fr.org',
            '<img src="'.$logo_planet.'" alt="Planet" class="pull-left" id="dw__planet" '.$logo_size.' /> ',
            'accesskey="p" title="[P]" class="navbar-brand"'
        );
 
	tpl_link(
            wl(),
            '<span id="dw__title" '.($tagline ? 'style="margin-top:-5px"': '').'>'. $title . $tagline .'</span>',
            'accesskey="t" title="[T]" class="navbar-brand"'
        );
 
      ?>

Il vous faudra mettre les icônes suivantes: lien provisoire et chemin exact à remplacer

accueil.png : dans les dossiers data/wiki/ , data/ , images/
forum.png : dans les dossiers data/wiki/ , data/ , images/
planet.png : dans les dossiers data/wiki/ , data/ , images/
guide.png : dans les dossiers data/wiki/ , data/ , images/

Logo et favicon

Pour mettre en place le logo et le favicon

Plugins utilisés / tentés / à tester

Pour avoir les liens sous la main :)

Template

Boostrap3 avec thème united

Numérotation titre / tdm

Discussion

discussion : ajoute une section en bas ou en haut
talkpage : créé une page dédiée
Voir le mode discussion intégré à bootstrap

dans bootstrap activer l'option discussion. $conf['tpl']['bootstrap3']['showDiscussion'] = 1;
dans plugin discussion: ne pas activer sur toutes les pages et ajouter dans exclude_ns /discussion/.
$conf['plugin']['discussion']['excluded_ns'] = '/discussion/';

Piste: https://www.dokuwiki.org/plugin:newpagetemplate

Autres liens

Chantier du design chez aldian

DIVERS

voir si c'est utile ou pas de noter ça:

Option sur bootswatch

open in jsfiddle : Permet de
bootstrap.min.css : semble être la version non indenté de bootstrap.css
bootstrap.css : le fichier de feuilles de style
_variable.scss :
_bootswatch.scss :

Je garde la suite ça sous le coude pour le moment

Autre Installer le Plugin Bootswrapper

Celà correspondra à ajouter dans conf/local.protected.php la ligne suivante :

$conf['loadBootstrap'] = 1;

Cette extension nécessite le module SimpleXML pour php. Vérifier que vous l'avez bien

php -m | grep -i simplexml

devrait vous répondre

SimpleXML

Sinon installez-le

Activer le module navbar en modifiant dans lib/tpl/bootstrap3/conf/default.php la ligne suivante

$conf['useLegacyNavbar']             = 1;

<nav type="tabs">
  * [[:start]]
  * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>

Local.protected.php

20180302_local.protected.php

<?php
    /*
     * Paramètres de configuration propres à votre serveur de travail
     * Attention les options principales sont dans local.php qu'il ne faut pas modifier
     * Penser à en faire une sauvegarde avant une màj
    */
    //Le fichier userscripts.js sert pour les bouton en mode édition (exemple modifier un fichier, installer un paquet)
    //https://www.dokuwiki.org/fr:rewrite pour pas avoir doku.php?id=nompage
    //https://www.dokuwiki.org/rewrite#discussion pour php
    //0: pas de rewrite / 1:passe par lighttpd.conf/ 2:interne à dokuwiki
    //dans local.php ->= 1 car rewrite fait sur le serveur. Risque 404-not found en localhost
    // donc:
$conf['userewrite'] = 2;
 
    //passer en dev sinon ???
$conf['is_dev'] = 1;
 
    //Gestion du thème
    //Choix du template
 //$conf['template']    = 'adoradark';
//$conf['template']    = 'dokuwiki';
$conf['template']    = 'bootstrap3';
$conf['tpl']['bootstrap3']['showThemeSwitcher'] = 1;
$conf['tpl']['bootstrap3']['bootstrapTheme'] = 'bootswatch';
 
//barre de navigation fixe
$conf['tpl']['bootstrap3']['fixedTopNavbar'] = 1;
//$conf['loadBootstrap'] = 1;
 
     //Reactive toutes les actions
$conf['disableactions']='';
 
    //* Gestion de connexion utilisateur pour le serveur de DEV.
$conf['authtype']='authplain'; //pour la connexion sans la base du forum
    //remplir users.auth.php en faisant un sha1 sur le net.
    //par exemple le login+mdp y on été mis à testeur/testeur avec
    //testeur:0dd3d8466da1d1b581d8b1036f24ef43d37c7974:Moi:moi@nawak.og:members
 
    //pour être admin et pas simple user
$conf['superuser']= 'testeur';
 
    // Suivi des modifications non nécessaires en DEV
$conf['notify'] = '';
 
// Lieu des données. Ici Lien symbolique
$conf['savedir']= './data';