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
Il reprend le nom de l'association avec un éclair représentant l'énergie électrique.
logo_green.png
logo_white.png
Mise en place sur le site
Avec le gestionnaire multimédia, télécharger le fichier choisit 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.
Oc Citen
La société dispose aussi d'un logo qui peut être utilisée pour les pages spécifiques à celles-ci.
Couleurs
Palette
La roue des couleurs
a permis de décliner des couleurs web à partir de l'image suivante :
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 contours1) | | |
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: #F2E9BB;
color: #000;
padding: .5em .5em .5em .5em;
margin-bottom: 1em;
overflow: hidden;
}
.dokuwiki div.wrap_violet { /* added */
background-color: #532A8C;
color: #ffffff;
}
.dokuwiki div.wrap_vert { /* added */
background-color: #9DBF21;
color: #000000;
}
.dokuwiki div.wrap_jaune { /* added */
background-color: #F2CE16;
color: #000000;
}
.dokuwiki div.wrap_cadre { /* added */
background-color: #FFF;
color: #000000;
background-image: url("/fonts/cadre.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
Le module Advanced facilite cette opération à partir de l'option Administrer > DokuWiki Advanced: Configuration
.
Boutons
Ils sont réglés par défaut avec : largeur fixe, texte et bordure en violet et fond jaune.
Découvrez le projet
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|width:15em;color:#4c2a7e;background-color:#F2CE16;border-color:#4c2a7e;font-family: Oswald, sans-serif;
Polices
Pour ce site on utilise :
Oswald pour le texte
.
Carter One pour le logo
.
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: "Oswald Light";
src: url("/fonts/oswald.light.ttf") format("truetype");
}
@font-face {
font-family: "Oswald";
src: url("/fonts/oswald.regular.ttf") format("truetype");
}
@font-face {
font-family: "Oswald Bold";
src: url("/fonts/oswald.bold.ttf") format("truetype");
}
@font-face {
font-family: "Carter";
src: url("/fonts/carter-one.regular.ttf") format("truetype");
}
body {
font-weight: normal;
font-size: 100%;
line-height: 1.4;
font-family: Oswald Light, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
padding: 0;
line-height: 1.2;
clear: left;
font-family: Oswald Bold, sans-serif;
}
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
Parcourir le site