Ceci est une ancienne révision du document !
tag
Modification du thème de la documentation Ubuntu-fr
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.
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.
Installation du thème
- Installer le plugin bootstrap3 depuis le gestionnaire d'extensions.
- Activer le thème United depuis les paramètres de configuration
$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
D'autres navigateurs le font mais Firefox avec ses outils de développement web déjà présent par défaut, permet de récupérer la feuille de style pour l'adapter à vos envies et créer ainsi votre propre thème.
Une fois le thème United en place :
- ouvrez l'éditeur de style depuis le menu développement web de Firefox accessible directement avec le raccourci clavier Maj + F7.
- enregistrez le fichier bootstrap.min.css où vous le souhaitez.
- Pour la suite il sera renommé montheme.css et sera placé dans un dossier dédié de notre documentation local. http://localhost/ubuntu-fr/ubuntu-fr/lib/tpl/bootstrap3/assets/bootstrap/themeperso1/
- modifiez le fichier montheme.css à votre convenance.
Activation d'un thème personnel
Pour activer ensuite ce thème avec vos propres couleurs, il faudra depuis les paramètres de configuration
- remplacer Bootswatch par Custom
$conf['tpl']['bootstrap3']['bootstrapTheme'] = 'custom';
- indiquer l'adresse de votre thème.
$conf['tpl']['bootstrap3']['bootswatchTheme'] = 'http://localhost/ubuntu-fr/ubuntu-fr/lib/tpl/bootstrap3/assets/bootstrap/themeperso1/montheme.css';
Logo et favicon
Pour mettre en place le logo et le favicon
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 :
Autres liens
Chantier du design chez aldian