Voir la source de Wiki Le Seigneur des Anneaux:Charte graphique

{{Page Administration}}
Afin de reconnaître le wiki et maintenir une cohésion et une harmonie dans l'apparence, voici les règles et principes à suivre lors de votre visite sur le wiki.

Cette page présentera d'abord l'apparence globale du wiki et ensuite les modifications et techniques mises en place pour la personnalisation.

== Apparence par défaut ==
L'apparence par défaut est conçu à l'aide du [[w:fr:Aide:Concepteur de thème|Concepteur de thème]]. Il permet de déterminer pour chaque thème (clair et sombre) :
* Le fond d'écran (qui sont [[Media:Site-background-light]] et [[Media:Site-background-dark]]) ;
* L'image communautaire (qui est utilisée lors de d'aperçu de liens) ;
* Le logo et la favicon (la favicon est le logo apparaissant dans le menu d'onglets) ;
* La couleur des liens ;
* La couleur de la [[w:fr:Aide:Navigation|navigation supérieure]] ;
* La couleur d'accentuation (couleur des boutons, des infoboxes par défaut, etc.).
Nous avons choisi en premier lieu d'unifier la couleur d'accentuation pour qu'elle soit utilisée dans le plus de cas possible, et qu'elle devienne la '''couleur principale du wiki'''. Unifier les couleurs permet la stabilité et aux utilisateurs de reconnaître rapidement le site.
{{Couleurs thème}}

== Ajout par fichiers MediaWiki ==
Le logiciel [[wikipedia:MediaWiki|MediaWiki]] permet aux administrateurs de modifier et d'ajouter du contenu [[w:fr:Aide:Personnalisation du CSS et JS|CSS et JS]] pour améliorer le wiki. Vous pouvez consulter [{{fullurl:Spécial:Toutes_les_pages|namespace=8}} ici] tous les fichiers mais seuls les administrateurs peuvent modifier les [[w:fr:Aide:CSS et JS de la communauté|fichiers communautaires]] (car il est possible d'en créer des [[w:fr:Aide:CSS et JS personnels|personnels]]).

=== Ajouts divers ===
Afin de renforcer l'apparence et la présence de la couleur principale du wiki, quelques ajouts ont été effectués sur les fichiers CSS. D'autres ajouts peuvent aussi se faire selon leur utilité.
;Bordure orange en haut
: En haut de l'espace d'article se trouve une petite barre orange
;Couleur pour l'équipe administrative
: Les modérateurs et les administrateurs bénéficient, afin de les reconnaître, d'une couleur différente.

=== Variables ===
{{Article détaillé|MediaWiki:Variables.css}}
Sur [[MediaWiki:Variables.css]], des variables ont été créées. Elles permettent d'utiliser la même couleur sur différents feuilles de style. Ceci est particulièrement utile pur uniformiser les infoboxes (mobiles et Desktop) et les navboxes ; et modifier leur couleur ne nécessite qu'une modification au lieu d'une.

=== Imports de scripts ===


== Infobox & Navbox : fonctionnement ==
=== Infoboxes personnalisées ===
{{Article détaillé|MediaWiki:Infoboxes.css}}
Toutes les infoboxes (hormis [[Modèle:CastInfobox|CastInfobox]], [[Modèle:Infobox Lieu|Infobox Lieu]] & [[Modèle:Infobox Personnage|Infobox personnage]]) ont des thèmes personnalisés, ce que résume le tableau ci-dessous : 
{| class="article-table" style="width:80%"
|+ Infobox, couleur et logo associé
|-
!<center>Infobox</center>
!<center>Nom du thème</center>
!colspan="2"|<center>Code hexadécimal</center>
!colspan="2"|<center>Exemple couleur</center>
!<center>Logo</center>
!<center>Taille des logos</center>
!<center>Statut</center>
|-
|[[Modèle:Infobox Âge]]
|<pre>age</pre>
|colspan="2" |<pre>C1AD81</pre>
|colspan="2" style="background-color:#C1AD81;" |
|[[Fichier:Infobox Âge.svg|50px]]
|38px
|🟢
|-
|[[Modèle:Infobox Animal]]
|<pre>creature</pre>
|colspan="2" |<pre>CB0F0F</pre>
|colspan="2" class="creature" |
|[[Fichier:Infobox Bête.svg|50px]]
|40px
|🟢
|-
|[[Modèle:Infobox Association]]
|<pre>association</pre>
|colspan="2" |<pre>7C3FC6</pre>
|colspan="2" class="association" |
|[[Fichier:Infobox Association.svg|50px]]
|38px
|🟢
|-
|[[Modèle:Infobox Auteur]]
|<pre>auteur</pre>
|colspan="2" |<pre>777CD2</pre>
|colspan="2" style="background-color:#777CD2;" |
|[[Fichier:Infobox Auteur.svg|50px]]
|38px
|🟢
|-
|[[Modèle:Infobox Bataille]]
|<pre>bataille</pre>
|colspan="2" |<pre>E20000</pre>
|colspan="2" class="bataille" |
|[[Fichier:Infobox Bataille.svg|50px]]
|38px
|🟢
|-
|[[Modèle:Infobox Chapitre]]
|<pre>chapitre</pre>
|colspan="1" |<pre>3131B1</pre>
|colspan="1" |<pre>3E3ED3</pre>
|colspan="1" style="background-color:#3131B1;" |
|colspan="1" style="background-color:#3E3ED3;" |
|[[Fichier:Infobox Chapitre.svg|50px]]
|25px
|🟡
|-
|[[Modèle:Infobox Créature]]
|<pre>creature</pre>
|colspan="2" |<pre>CB0F0F</pre>
|colspan="2" class="creature" |
|[[Fichier:Infobox Bête.svg|50px]]
|40px
|🟢
|-
|[[Modèle:Infobox Film]]
|<pre>film</pre>
|colspan="2" |<pre>2CD564</pre>
|colspan="2" style="background-color:#2CD564;" |
|[[Fichier:Infobox Film.svg|50px]]
|40px
|🟢
|-
|[[Modèle:Infobox Fleuve & Rivière]]
|<pre>fleuve</pre>
|colspan="2" |<pre>0072D6</pre>
|colspan="2" class="riviere" |
|[[Fichier:Infobox Rivière.svg|50px]]
|48px
|🟢
|-
|[[Modèle:Infobox Forêt]]
|<pre>foret</pre>
|colspan="2" |<pre>228B22</pre>
|colspan="2" class="foret" |
|[[Fichier:Infobox Forêt.svg|50px]]
|48px
|🟢
|-
| [[Modèle:Infobox Jeu]]
|<pre>jeu</pre>
|colspan="2" |<pre>905438</pre>
|colspan="2" style="background-color:#905438;" |
|[[Fichier:Infobox Jeu.svg|50px]]
|38px
|🟢
|-
|[[Modèle:Infobox Langue]]
|<pre>langue</pre>
|colspan="2" |<pre>CC3FA6</pre>
|colspan="2" class="langue" |
|[[Fichier:Infobox Langue.svg|50px]]
|48px
|🟢
|-
|[[Modèle:Infobox Lieu]]
|
|colspan="2" |
|colspan="2" |
|
|
|🟢
|-
|[[Modèle:Infobox Livre]]
|<pre>livre</pre>
|colspan="1" |<pre>3131B1</pre>
|colspan="1" |<pre>3E3ED3</pre>
|colspan="1" style="background-color:#3131B1;" |
|colspan="1" style="background-color:#3E3ED3;" |
|[[Fichier:Infobox Livre.svg|50px]]
|25px
|🟢
|-
|[[Modèle:Infobox Maison]]
|<pre>association</pre>
|colspan="2" |<pre>7C3FC6</pre>
|colspan="2" style="background-color:#7C3FC6;" |
|[[Fichier:Infobox Maison.svg|50px]]
|38px
|🟢
|-
|[[Modèle:Infobox Mer & Lac]]
|<pre>mer</pre>
|colspan="2" |<pre>000080</pre>
|colspan="2"  class="mer" |
|style="background-color:#000080;" | [[Fichier:Infobox Mer.svg|50px]]
|48px
|🟢
|-
|[[Modèle:Infobox Musique]]
|<pre>musique</pre>
|colspan="2" |<pre>F0AA50</pre>
|colspan="2" style="background-color:#F0AA50;" |
|[[Fichier:Infobox Musique.svg|50px]]
|38px
|🟡
|-
|[[Modèle:Infobox Objet]]
|<pre>objet</pre>
|colspan="2" |<pre>FFD700</pre>
|colspan="2"  class="objet" |
|[[Fichier:Infobox Objet.svg|50px]]
|40px
|🟡
|-
|[[Modèle:Infobox Race]]
|<pre>peuple</pre>
|colspan="2" |<pre>B0A00E</pre>
|colspan="2"  class="race" |
|[[Fichier:Infobox Race.svg|50px]]
|48px
|🟢
|-
|[[Modèle:Infobox Relief]]
|<pre>montagne</pre>
|colspan="2" |<pre>A0522D</pre>
|colspan="2"  class="relief" |
|[[Fichier:Infobox Relief.svg|50px]]
|70px
|🟢
|-
|[[Modèle:Infobox Route]]
|<pre>route</pre>
|colspan="2" |<pre>B1008B</pre>
|colspan="2"  class="route" |
|[[Fichier:Infobox Route.svg|50px]]
|48px
|🟢
|-
|[[Modèle:Infobox Rune]]
|
|colspan="2" |
|colspan="2" |
|
|
|🟠
|-
|[[Modèle:Infobox Royaume & Région]]
|<pre>region</pre>
|colspan="2" |<pre>FF0000</pre>
|colspan="2"  class="region" |
|[[Fichier:Infobox Région.svg|50px]]
|48px
|🟢
|-
|[[Modèle:Infobox Utilisateur]]
|<pre>user</pre>
|colspan="1" |<pre>C2B170</pre>
|colspan="1" |<pre>736326 </pre>
|colspan="1" style="background-color:#C2B170;" |
|colspan="1" style="background-color:#736326;" |
|[[Fichier:Infobox Utilisateur.svg|50px]]
|33px
|🟡
|-
|[[Modèle:Infobox Végétal]]
|<pre>plante</pre>
|colspan="2" |<pre>85D700</pre>
|colspan="2"  class="vegetal" |
|[[Fichier:Infobox Végétal.svg|50px]]
|38px
|🟢
|-
|[[Modèle:Infobox Événement]]
|<pre>evenement</pre>
|colspan="2" |<pre>754770</pre>
|colspan="2"  class="evenement" |
|style="background-color:#754770;" | [[Fichier:Infobox Évènement.svg|50px]]
|35px 
|🟢
|}
<br>
'''Infoboxes spéciales'''
''Infobox Cité & Forteresse'' (inutilisé)
{| class="article-table" style="width:55%"
|+Infobox Cité & Forteresse
|-
!<center>Thème</center>
!<center>Nom à remplir</center>
! colspan="2" |<center>Code hexadécimal</center>
! colspan="2" |<center>Exemple couleur</center>
!<center>Logo</center>
!<center>Taille des logos</center>
!<center>Statut</center>
|-
|Cité
|<pre>ville</pre>
| colspan="2" |<pre>FF6600 </pre>
| colspan="2" style="background-color:#FF6600 ;" |
| [[Fichier:Infobox Architecture.svg|50px]]
| 40px
|🟢
|-
|Forteresse
| <pre>forteresse</pre>
| colspan="2" |<pre>2F4F4F</pre>
| colspan="2" style="background-color:#2F4F4F;" |
| [[Fichier:Infobox Forteresse.svg|50px]]
| 40px
|🟢
|-
|Tour
|<pre>tour</pre>
| colspan="2" |<pre>DAA520</pre>
| colspan="2" style="background-color:#DAA520;" |
| [[Fichier:Infobox Tour.svg|50px]]
| 40px
|🟢
|}
''Infobox Personnage''
{| class="article-table" style="width:55%"
|+Infobox Personnage
|-
!<center>Thème</center>
!<center>Nom à remplir</center>
! colspan="2" |<center>Code hexadécimal</center>
! colspan="2" |<center>Exemple couleur</center>
!<center>Statut</center>
|-
|[[Homme]]
|<pre>homme</pre>
| colspan="2" |<pre>A639B7</pre>
| colspan="2"  class="homme" |
|🟢
|-
|[[Elfe]]
| <pre>elfe</pre>
| colspan="2" |<pre>3CBD3E</pre>
| colspan="2"  class="elfe" |
|🟢
|-
|[[Peredhel]]
|<pre>semi-elfe</pre>
| colspan="2" |<pre>00BA79</pre>
| colspan="2"  class="semi-elfe" |
|🟢
|-
|[[Nain]]
| <pre>nain</pre>
| colspan="2" |<pre>FFF200</pre>
| colspan="2"  class="nain" |
|🟢
|-
|[[Hobbit]]
|
<pre>hobbit</pre>
| colspan="2" |<pre>53DBFC</pre>
| colspan="2"  class="hobbit" |
|🟢 
|-
|[[Orque]]
|<pre>orque</pre>
| colspan="2" |<pre>833E2C</pre>
| colspan="2"  class="orque" |
|🟢
|}
'''Statuts & Légende'''<br>
''Légende'' :
* 🔴 : Infobox à refaire et adapter les pages ;
* 🟠 : Infobox refaite mais page à faire (documentation et TemplateData) et adapter le champs ;
* 🟡 : Infobox refaite et adapter les pages ;
* 🟢 : Infobox achevée ;
* ⚫ : État inconnu et à vérifier.

==== Desktop ====
{{Article détaillé|MediaWiki:Infobox.css}}
Sur Desktop, ou version PC, le fond du titre de l'infobox ainsi que les bordures prennent la couleur du thème.
De plus, une icône issue de [https://fontawesome.com/ FontAwesome] se place en haut à droite de l'infobox. Elles sont sous licence CC-BY-SA et vous pouvez consulter celles enregistrées sous forme d'image ici : [[Catégorie:Galerie logo infobox]].

==== Mobile ====
{{Article détaillé|MediaWiki:InfoboxMobile.css}}
Sur mobile, seule la couleur apparaît. Ele est utilisée :
* Pour le soulignement du titre, avec une opacité de 50% ;
* Les bordures extérieures ;
* Les bordures intérieures (séparation des sections) ;
Pour l'instant (septembre 2023), seuls les infoboxes desktop ayant leur variable (voir plus [[#Variables|haut]]) sont adaptés sur mobile.

=== Navbox personnalisés ===
{{Article détaillé|Modèle:Navbox|MediaWiki:Navbox.css}}
Les navboxes peuvent être personnalisées via CSS en utilisant le modèle [[Modèle:Navbox|Navbox]]. Il permet notamment de :
* Changer la couleur du titre 
* Ajouter un fond coloré au titre et sous-titres
* Ajouter le logo de la catégorie (voir [[Catégorie:Galerie logo infobox]])

== Modèles ==
=== Bandeau ===




[[Catégorie:Règles]]