====== 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>|Encom1.fr]]((Site du porteur de projet)). Elle multiplie la pomme originale, symbolisant ainsi les trois postes clés d'une association : présidence, trésorerie, secrétariat.

{{:logo.png?direct|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 #BF0413: BF0413 pomme>
<colorswatch #0583F2: 0583F2 bleu>
<colorswatch #05F2DB: 05F2DB cyan>
<colorswatch #05F26C: 05F26C vert>
<colorswatch #F29F05: F29F05 orange>

<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 #05f2db>  |
| Couleur générale des liens                                                                   |  <colorswatch #2b73b7>  |  <colorswatch #0583f2>  |
| Couleur du fond (derrière la boîte de contenu)                                               |  <colorswatch #fbfaf9>  |  <colorswatch #fbfaf9>  |
| Couleur des liens pour les pages existantes                                                  |  <colorswatch #008800>  |  <colorswatch #bf0413>  |
| Couleur des liens pour les pages inexistantes                                                |  <colorswatch #dd3300>  |  <colorswatch #f29f05>  |
| Thème de couleur de l'application web                                                        |  <colorswatch #008800>  |  <colorswatch #bf0413>  |

++++

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

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

<WRAP column round box pomme >
Bloc pomme
</WRAP>
<WRAP column round box bleu >
Bloc bleu
</WRAP>
<WRAP column round box cyan >
Bloc cyan
</WRAP>
<WRAP column round box vert >
Bloc vert
</WRAP>
<WRAP column round box orange >
Bloc orange
</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_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;
}
</code>

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

++++

==== Boutons ====
<WRAP column>
Par défaut \\
[[{}wiki:projet:projet|Découvrez le projet]]
</WRAP>
<WRAP column>
Style //rouge// \\
[[{|rouge}wiki:projet:projet|Découvrez le projet]] 
</WRAP><WRAP clear/>

++++ 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|max-width:15em;font-family: Kreon; font-weight:bold; font-size:1.2em;color:#F29F05;border-color:#F29F05;
  rouge|color:#bf0413;border-color:#bf0413;
</code>

++++

===== Polices =====

Pour ce site on utilise les polices suivantes :
<WRAP column 250px>
pour les titres
[[https://www.1001fonts.com/kreon-font.html|{{https://il.static.1001fonts.net/k/r/kreon-font-1-big.png}}]].
</WRAP>
<WRAP column 250px>
pour les textes
[[https://www.1001fonts.com/ubuntu-font.html|{{https://il.static.1001fonts.net/u/b/ubuntu-font-2-big.png}}]].
</WRAP>
<WRAP clear/>

<wrap lo>Pour appareiller 2 polices le site https://fontpair.co/ est très utile</wrap>

++++ 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: "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%; }
</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 orange>
<do>Charte Graphique - Définir les règles de mise en page</do>
</WRAP>

Des [[wiki:snippets:sommaire|]] sont prédéfinis et intégrable à toute page via le module [[doku>plugin:snippets|snippets]].


/*  Bas de page */

~~SNIPPET_O1781743305~~wiki:snippets:parcourir_le_site~~
====== Parcourir le site ======
<WRAP round box center centeralign 100% noprint>
/* Pages principales du site */
<nspages : -h1 -textPages="" -simpleLine -exclude>
/* Espaces collaboratifs */
[[wiki:]], [[playground:]]
/* Pôles associatif */
<nspages wiki: -subns -nopages -h1 -hideNoSubns  -simpleLine -textNS="" -exclude:snippets: -exclude:impressions: >
/* Contribuer et utiliser */
<WRAP center 60% noprint>
<nspages wiki: -h1 -simpleLine -textPages="Contribuer et utiliser" -actualTitle=4 -exclude:sommaire -exclude>
</WRAP>

</WRAP>
~~SNIPPET_C~~wiki:snippets:parcourir_le_site~~