====== 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 [[rezoanais>|réseau ANAIS]].

{{:logo.png?|Logo du site}} 

++++ 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 [[wpfr>favicon]] correspondant convertir ce fichier en favicon.ico et le placer au même endroit.
 
<wrap lo>Le logo de 75x75 pixels est aussi décliné en 16x16 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.</wrap>
++++
===== Couleurs =====

==== Palette ====

Elle est définie à partir du logo avec [[https://color.adobe.com/fr/create/color-wheel/|la roue des couleurs]].

<colorswatch #F20544: F20544 rouge>
<colorswatch #5A0273: 5A0273 violet>
<colorswatch #03A696: 03A696 cyan>
<colorswatch #97BF04: 97BF04 vert>
<colorswatch #401201: 401201 brun>
<colorswatch #FFC900: FFC900 jaune>

<wrap lo>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 [[doku>plugin:colorswatch|Color Swatch]] nous permet d'afficher la palette de couleur sur le wiki.</wrap>

==== 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 |
{{tablelayout?rowsHeaderSource=Auto&float=center&tablePrint=1}}
^ Paramètre                                                                                    ^  Valeur par défaut      ^  Valeur du thème        ^
| Couleur de texte principale                                                                  | <colorswatch #333333>   |  <colorswatch #333333>  |
| Couleur de fond principale                                                                   | <colorswatch #ffffff>   |  <colorswatch #ffffff>  |
| Couleur de texte alternative                                                                 | <colorswatch #999999>   |  <colorswatch #999999>  |
| Couleur de fond alternative                                                                  |  <colorswatch #eeeeee>  |  <colorswatch #eeeeee>  |
| Couleur de texte neutre                                                                      |  <colorswatch #666666>  |  <colorswatch #666666>  |
| Couleur de fond neutre                                                                       |  <colorswatch #dddddd>  |  <colorswatch #dddddd>  |
| Couleur des contours((à définir plus claire ou identique à la couleur de fond alternative))  |  <colorswatch #cccccc>  |  <colorswatch #cccccc>  |
| Couleur de surbrillance (utilisée principalement pour les résultats de recherche)            |  <colorswatch #ffff99>  |  <colorswatch #FFC900>  |
| Couleur générale des liens                                                                   |  <colorswatch #2b73b7>  |  <colorswatch #401201>  |
| Couleur du fond (derrière la boîte de contenu)                                               |  <colorswatch #fbfaf9>  |  <colorswatch #fbfaf9>  |
| Couleur des liens pour les pages existantes                                                  |  <colorswatch #008800>  |  <colorswatch #5a0273>  |
| Couleur des liens pour les pages inexistantes                                                |  <colorswatch #dd3300>  |  <colorswatch #f20544>  |
| Thème de couleur de l'application web                                                        |  <colorswatch #008800>  |  <colorswatch #401201>  |

++++

==== Blocs personnalisés ====

Les couleurs du thème sont déclinées pour les [[wiki:syntaxe_avancee|blocs personnalisés]].

<WRAP column round box rouge >
Bloc rouge
</WRAP>
<WRAP column round box violet >
Bloc violet</WRAP>
<WRAP column round box cyan >
Bloc cyan
</WRAP>
<WRAP column round box vert >
Bloc vert
</WRAP>
<WRAP column round box brun >
Bloc brun
</WRAP>
<WRAP column round box jaune >
Bloc jaune
</WRAP>
<WRAP clear/>
La syntaxe d'utilisation est la suivante :
<code txt syntaxe d'utilisation>
 <WRAP column round box couleur >
 Bloc couleur
 </WRAP>
</code>
<wrap lo>Remplacer **couleur** par la couleur souhaitée.</wrap>
++++ Mise en place sur le site |
Le code CSS suivant est ajouté par l'administrateur dans le fichier ''userall.css''
<code 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_rouge { /* added */
        background-color: #f20544;
        color: #ffffff;
    }
.dokuwiki div.wrap_violet { /* added */
        background-color: #5A0273;
        color: #ffffff;
    }
.dokuwiki div.wrap_cyan { /* added */
        background-color: #03A696;
        color: #00000;
    }
.dokuwiki div.wrap_vert { /* added */
        background-color: #97BF04;
        color: #000000;
    }
.dokuwiki div.wrap_brun { /* added */
        background-color: #401201;
        color: #ffffff;
    }
.dokuwiki div.wrap_jaune { /* added */
        background-color: #FFC900;
        color: #000000;
    }
</code>

<wrap tip>Le module [[doku>plugin:advanced|Advanced]] facilite cette opération à partir de l'option ''Administrer > DokuWiki Advanced: Configuration''.</wrap>

++++

==== Boutons ====
Ils sont réglés par défaut avec une largeur fixe, fond jaune et bord brun.

[[{}wiki:projet:projet|Découvrez le projet]]

++++ Mise en place sur le site |

Le module [[doku>plugin:button]] permet de personnaliser les boutons avec un paramètre de configuration.
Le code suivant est utilisé:
<code css button>
  default|width:15em;background-color:#FFC900;border-color:#401201;
</code>

++++
==== Modèles ====
Des blocs de code réutilisables sont disponibles à partir du bouton ''Insérer modèles'' de la barre d'outil.

Chaque modèle est une page de la catégorie ''wiki:snippets''. En voici [[wiki:snippets:sommaire|le sommaire]].
===== Polices =====

Pour ce site on utilise 
<WRAP column 250px>
Pour les titres
[[https://www.1001fonts.com/amatic-sc-font.html|{{https://il.static.1001fonts.net/a/m/amatic-sc-font-1-big.png}}]]
</WRAP>
<WRAP column 250px>
Pour le texte
[[https://www.1001fonts.com/chewy-font.html|{{https://il.static.1001fonts.net/c/h/chewy-font-1-big.png}}]].
</WRAP><WRAP clear/>


++++ 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 :

<code css userall.css>
/* Chargement des polices */
@font-face {
 font-family: "Amatic";
 src: url("/fonts/amatic-sc.regular.ttf") format("truetype");
}
@font-face {
 font-family: "Amatic Bold";
 src: url("/fonts/amatic-sc.bold.ttf") format("truetype");
}
@font-face {
 font-family: "Chewy";
 src: url("/fonts/chewy.regular.ttf") format("truetype");
}
/* Définition des polices par tag */
/* Style du texte */
body {
    font-weight: normal;
    font-size: 90%;
    line-height: 1.4;
    font-family: Chewy, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    padding: 0;
    line-height: 1.2;
    clear: left;
    font-family: Amatic Bold, sans-serif;
}

</code>

Il est possible de définir plusieurs polices.

<wrap tip>Le module [[doku>plugin:advanced|Advanced]] facilite cette opération à partir de l'option ''Administrer > DokuWiki Advanced: Configuration''.</wrap>

++++

===== Règles de mise en page =====

<WRAP round todo cyan>
<do>Charte Graphique - Définir les règles de mise en page</do>
</WRAP>




~~SNIPPET_O1781818813~~wiki:snippets:retourner_aux_sommaires~~
/* Bloc à utiliser au niveau R+3 */
====== Retourner aux sommaires ======
<WRAP center centeralign>
/* lien vers les sommaires des catégories supérieure */
[[:]] - [[..:]] - [[.:]]
</WRAP>
~~SNIPPET_C~~wiki:snippets:retourner_aux_sommaires~~