Charte Graphique
La charte graphique vise à donner une identité au site et aux documents de communication.
Vous trouverez ici les informations pratiques concernant sa mise en œuvre.
Logo
Cette image a été crée à partir du logo du site Encom1.fr1). Elle multiplie la pomme originale, symbolisant ainsi les trois postes clés d'une association : présidence, trésorerie, secrétariat.
Mise en place sur le site
Avec le gestionnaire multimédia, télécharger le fichier avec le nom logo.png à la racine du site. Il apparaitra automatiquement en haut de page.
Pour mettre en place le favicon correspondant convertir ce fichier en favicon.ico et le placer au même endroit.
Le logo de 75×75 pixels est aussi décliné en 16×16 pixels de façon à pouvoir être utilisé dans les liens interwiki. Il doit être placé via un client FTP dans le répertoire lib/images/interwiki du site.
Couleurs
Palette
Elle est définie à partir du logo avec la roue des couleurs.
La roue analyse l'image, puis propose plusieurs types d'harmonie, pour chacune une palette de 5 couleurs est déclinée à partir de l'image. Après choix d'une palette, le module Color Swatch nous permet d'afficher la palette de couleur sur le wiki.
Couleurs du thème
L'administrateur peut personnaliser les couleurs du thèmes avec l'option Administrer > Paramètres de style du thème.
Ce tableau reprend les paramètres de couleur proposés par défaut et les valeurs utilisées pour ce site.
Voir le tableau des couleurs du thème
| Paramètre | Valeur par défaut | Valeur du thème |
| Couleur de texte principale | | |
| Couleur de fond principale | | |
| Couleur de texte alternative | | |
| Couleur de fond alternative | | |
| Couleur de texte neutre | | |
| Couleur de fond neutre | | |
| Couleur des contours2) | | |
| Couleur de surbrillance (utilisée principalement pour les résultats de recherche) | | |
| Couleur générale des liens | | |
| Couleur du fond (derrière la boîte de contenu) | | |
| Couleur des liens pour les pages existantes | | |
| Couleur des liens pour les pages inexistantes | | |
| Thème de couleur de l'application web | | |
Blocs personnalisés
Les couleurs du thème sont déclinées pour les blocs personnalisés.
La syntaxe d'utilisation est la suivante :
- syntaxe d'utilisation
<WRAP column round box couleur >
Bloc couleur
</WRAP>
Remplacer couleur par la couleur souhaitée.
Mise en place sur le site
Le code CSS suivant est ajouté par l'administrateur dans le fichier userall.css
- userall.css
/* Style WRAP personnalisés */
.dokuwiki div.wrap_note{ /* added */
background-color: #eee;
color: #000;
padding: .5em .5em .5em .5em;
margin-bottom: 1em;
overflow: hidden;
}
.dokuwiki div.wrap_pomme { /* added */
background-color: #bf0413;
color: #ffffff;
}
.dokuwiki div.wrap_bleu { /* added */
background-color: #0583F2;
color: #ffffff;
}
.dokuwiki div.wrap_cyan { /* added */
background-color: #05F2DB;
color: #00000;
}
.dokuwiki div.wrap_vert { /* added */
background-color: #05F26C;
color: #000000;
}
.dokuwiki div.wrap_orange { /* added */
background-color: #F29F05;
color: #ffffff;
}
Le module Advanced facilite cette opération à partir de l'option Administrer > DokuWiki Advanced: Configuration.
Boutons
Mise en place sur le site
Le module plugin:button permet de personnaliser les boutons avec un paramètre de configuration.
Le code suivant est utilisé:
- button
default|max-width:15em;font-family: Kreon; font-weight:bold; font-size:1.2em;color:#F29F05;border-color:#F29F05;
rouge|color:#bf0413;border-color:#bf0413;
Polices
Pour ce site on utilise les polices suivantes :
pour les titres
.
pour les textes
.
Pour appareiller 2 polices le site https://fontpair.co/ est très utile
Mise en place sur le site
Le site https://www.1001fonts.com recense les polices disponibles et permet de télécharger les fichiers ttf correspondants. Les fichiers sont ensuite téléchargés via la console d'administration du compte web dans un répertoire fonts placé à la racine du site.
L'administrateur doit ensuite modifier la feuille de style (CSS) du site avec le code suivant :
- userall.css
/* Chargement des polices */
@font-face {
font-family: "Ubuntu";
src: url("/fonts/ubuntu.regular.ttf") format("truetype");
}
/* Définition des polices par tag */
body {font-family: Ubuntu, Verdana, Geneva, sans-serif;
font-size-adjust: 100%; }
Il est possible de définir plusieurs polices.
Le module Advanced facilite cette opération à partir de l'option Administrer > DokuWiki Advanced: Configuration.
Règles de mise en page
Charte Graphique - Définir les règles de mise en page
Des Blocs de page sont prédéfinis et intégrable à toute page via le module snippets.
Parcourir le site