FANDOM


(Mise à jour)
(Mise à jour de la page.)
 
(5 révisions intermédiaires par 3 utilisateurs sont masquées)
Ligne 1 : Ligne 1 :
Cette page fournit des conseils sur comment créer un '''arrière-plan''' optimal pour la mise en page fluide de FANDOM. L'image d'arrière-plan s'importe via le [[Aide:Concepteur de thème|Concepteur de thème]].
+
<jwplayer media-id="U38WGVTm" />
  +
Les '''arrière-plans''' peuvent aider à construire l'identité visuelle d'un wiki et à le mettre en valeur. Cette page contient des recommandations sur la manière de créer un habillage d'arrière-plan optimal pour votre communauté.
   
==Informations==
+
==Présentation==
Voici quelques détails sur la mise en page fluide et la façon dont le site de FANDOM se comporte avec différents affichages :
+
L'image de fond est configurée via le [[Aide:Concepteur de thème|Concepteur de thème]], dans la section Personnaliser. Vous pouvez télécharger l'arrière-plan au format PNG, JPG ou GIF, à condition que le fichier ne dépasse pas 300 kibi-octets (kio). S'il est plus grand, vous pouvez essayer de réduire sa taille en augmentant la compression, en réduisant la qualité de l'image, ses dimensions, ou en changeant de format (le JPG avec perte sera toujours plus petit que le PNG sans perte).
   
* Sur les affichages les plus petits, comme les iPads avec des écrans larges de 1024px, l'apparence fluide fait que le fond est complètement couvert par l'espace de contenu, aussi l'arrière-plan ne sera pas visible dans ce cas.
+
L'apparence finale de l'arrière-plan dépendra de plusieurs facteurs, dont les plus importants sont l'''affichage''' et les '''dimensions''' de l'arrière-plan&nbsp;:
* Sur des affichages plus larges (plus de 1066px), l'arrière-plan sera visible de chaque côté de la zone de contenu.
+
* Sur les affichages les plus petits (1065px ou moins), la mise en page dimensionnera automatiquement la zone de contenu pour remplir tout l'écran et utilisera la couleur de base du fond (''principale'' dans le concepteur de thème) au lieu de l'image.
* La zone de contenu arrête de s'étendre quand elle atteint sa largeur maximale de 1240px.
+
* Sur des affichages plus larges (à partir de 1066px), l'arrière-plan sera visible de chaque côté de la zone de contenu. La zone de contenu arrête de s'étendre quand elle atteint sa largeur maximale de 1240px.
   
Comment est-il possible que la même image d'arrière-plan soit visible sur toutes ces différentes tailles quand on importe juste un seul fichier ? L'image est coupée et l'espace au centre (majoritairement couvert par la zone de contenu) est rempli avec une couleur unie choisie dans le Concepteur de thème. Une couleur unie sera aussi affichée au delà des bords de l'image, en bas et sur l'extérieur, pour les écrans très larges.
+
L'image d'arrière-plan peut être réglée sur ''mosaïque'', ce qui fait qu'elle se répète et remplit toute la zone d'arrière-plan. À moins que vous ne créiez une image spécifiquement pour fusionner avec les bordures de façon transparente, cela pourrait entraîner un affichage gênant et des bords irréguliers entre les images qui se répètent.
   
'''Note :''' Si vous ne souhaitez pas que votre arrière-plan soit coupé en deux, vous devez importer une image qui soit large de 2000px au moins, point à partir duquel l'option du Concepteur de thème pas de séparation ») permettant à l'arrière-plan de rester en un seul morceau, peu importe la taille de la zone de contenu, deviendra disponible.
+
Sinon, l'image sera affichée une seule fois, alignée en haut et au centre de l'arrière-plan, selon les dimensions. Si sa largeur est inférieure à 2000px, le wiki la divisera automatiquement en deux afin qu'elle puisse s'afficher à gauche et à droite de la zone de contenu. Si sa largeur est supérieure à 2000px, une option&nbsp;pas de séparation&nbsp;») sera proposée dans le concepteur de thème, ce qui fera que l'image s'affichera entière en tant que partie de l'arrière-plan.
   
Créer un arrière-plan qui peut s'adapter à ces différentes tailles peut paraître être un défi mais ne vous inquiétez pas, nous avons quelques astuces pour vous.
+
Dans tous les cas, l'option ''Fixe'' vous permet de choisir si l'arrière-plan restera fixe, en restant visible lorsque vous faites défiler la page vers le haut ou vers le bas, ou s'il restera aligné vers le haut, en laissant place à la couleur de fond («&nbsp;principal&nbsp;», comme expliqué ci-dessus).
   
==Créer l'arrière-plan ==
+
==Créer l'arrière-plan==
Pour créer le meilleur arrière-plan possible, il est utile d'utiliser un logiciel permettant de modifier des images, comme Photoshop, GIMP ou Paint.
+
Il peut être difficile de créer un arrière-plan qui soit beau en toutes circonstances, voici donc quelques conseils. Le plus important est d'utiliser un croquis d'arrière-plan comme référence lors de l'édition d'une image dans GIMP, Paint, Photoshop ou tout autre logiciel d'édition d'images&nbsp;:
   
Voici un modèle d'arrière-plan pour référence :
+
[[Fichier:BackgroundDiagram.png|center|700px]]
   
[[File:BackgroundDiagram.png|center]]
+
* ''Espace de l'image''&nbsp;: Les zones situées en dehors de la zone de contenu grise afficheront toujours l'image de fond. Les parties en gris foncé ne le font que parfois, en fonction de la taille de l'écran du visiteur. Assurez-vous que votre image est bien visible dans les zones plus sombres.
  +
* ''Espace de contenu''&nbsp;: La zone gris clair au milieu du modèle est l'endroit où le contenu de la page wiki ira. Par défaut, l'arrière-plan ne sera pas du tout visible derrière cette zone, mais la transparence peut être ajoutée via le Concepteur de thème.
   
Cinq choses à noter à propos de cette image :
+
Il peut être utile d'utiliser ce modèle d'arrière-plan pour réaliser vos propres arrière-plans créatifs&nbsp;! Vous pouvez télécharger un modèle d'arrière-plan au format PSD [[:Fichier:Background template.psd|ici]]. Le format PSD est compatible avec la plupart des programmes d'édition d'images, comme Photoshop ou GIMP mentionnés ci-dessus.
   
*'''Arrière-plan''' : Les ballons colorés mettent en valeur l'aspect créatif de l'arrière-plan (parfois appelé ''skin'').
+
==Conseils pour le Concepteur de thème==
*'''Dégradé''' : Le bas et les côtés de l'arrière-plan sont dégradés (en utilisant l'outil de flou ou dégradé de votre logiciel de modification d'images) afin que la couleur d'arrière-plan se fonde progressivement dans votre image d'arrière-plan.
 
*'''Marges :''' Les zones en rouge de chaque côté de l'espace de contenu. Ces rectangles rouges indiquent quelles parties de l'arrière-plan seront visibles la plupart du temps.
 
*'''Espace de contenu''' : Le rectangle semi-transparent au milieu du modèle est là où la page de contenu ira. Par défaut, l'arrière-plan ne sera pas du tout visible sous cette zone, mais de la transparence peut être ajoutée dans le Concepteur de thème.
 
*'''Ligne de séparation''' : La ligne jaune au milieu de la capture est là où l'arrière-plan est coupé en deux et séparé pour s'ajuster à la taille de l'espace de contenu. La couleur qui remplit cette espace peut être définie dans le Concepteur de thème.
 
 
Il peut être utile d'utiliser ce modèle d'arrière-plan pour réaliser vos propres arrière-plans créatifs ! Si vous le souhaitez, vous pouvez télécharger le modèle d'arrière-plan au format PSD, qui peut être ouvert sous Photoshop ou GIMP, via le lien suivant :
 
 
[[homepage:w:File:Background_template.psd|File:Background_template.psd]]
 
 
==Quelques conseils pour le Concepteur de thème==
 
*L'image que vous importerez au final via le Concepteur de thème ne peut excéder 300 kilooctets (Ko) en taille. Vous aurez peut-être besoin de réduire la qualité d'image à l'enregistrement pour atteindre cette taille.
 
*Le plus large le flou (ou dégradé de couleur) sur l'arrière-plan sera et plus la transition avec la couleur d'arrière-plan sera fluide.
 
*Vous ne devriez pas rendre l'espace de contenu trop transparent, parce qu'il sera alors plus difficile de lire le contenu.
 
 
*Quand vous réalisez un arrière-plan, considérez toujours la plus grande possibilité de résolutions d'écran. Plus vous adaptez votre arrière-plan pour correspondre à différentes résolutions, plus votre communauté sera contente.
 
*Quand vous réalisez un arrière-plan, considérez toujours la plus grande possibilité de résolutions d'écran. Plus vous adaptez votre arrière-plan pour correspondre à différentes résolutions, plus votre communauté sera contente.
*Recherchez des arrières-plans et images basés sur le sujet de votre communauté pour trouver l'inspiration pour votre arrière-plan.
+
*Les fonds d'écran, les œuvres d'art clés et les recherches d'images basées sur le thème de votre communauté peuvent être une bonne idée pour trouver une inspiration créative pour votre fond d'écran.
*Essayez de toujours utiliser le Concepteur de thème pour importer votre image d'arrière-plan et concevoir l'apparence de votre communauté. Les arrière-plans ajoutés en utilisant le CSS personnalisé peuvent être touchés de façon inattendue par des mises à jour système de FANDOM et peuvent aussi augmenter le temps de chargement des pages.
+
*Tenez compte de l'ensemble du site lorsque vous créez le fond. Un fond d'écran animé et dynamique peut nuire à la lisibilité de l'espace de contenu si son arrière-plan est défini avec un fort degré de transparence. À l'inverse, un arrière-plan discret et subtil peut être la touche finale dont votre wiki a besoin.
  +
*Plus le flou (ou dégradé de couleur) sur l'arrière-plan sera large, plus la transition avec la couleur d'arrière-plan sera fluide. Voir [[Aide:Concepteur de thème/dégradés]] pour plus de détails sur la façon de créer des dégradés sur une image de fond.
  +
*Essayez de toujours utiliser le Concepteur de thème pour importer votre image d'arrière-plan et concevoir l'apparence de votre communauté. Les arrière-plans ajoutés en utilisant le CSS personnalisé peuvent être touchés de façon inattendue par des mises à jour système de Fandom et peuvent aussi augmenter le temps de chargement des pages.
  +
*En général, il est recommandé d'utiliser le concepteur de thème pour télécharger des images de fond et concevoir votre wiki. Les arrière-plans ajoutés via le CSS personnalisé peuvent être désactivés par des mises à jour du système ou des modifications des classes CSS utilisées par le site, ou avoir un effet négatif sur les temps de chargement.
  +
*Il est possible de faire en sorte que l'image de fond ''couvre'' toute la zone visible de l'arrière-plan. Pour ce faire, modifiez [[Mediawiki:Wikia.css]] sur votre wiki et ajoutez&nbsp;:
  +
<pre>
  +
body.skin-oasis,
  +
body.background-dynamic.skin-oasis::after,
  +
body.background-dynamic.skin-oasis::before {
  +
background-size: cover;
  +
}
  +
</pre>
  +
* Si vous modifiez un ancien wiki non-UCP, le code est un peu différent&nbsp;:
  +
<pre>
  +
body {
  +
background-size: cover;
  +
}
  +
</pre>
   
==Voir aussi==
+
==Lectures complémentaires==
 
*Apprenez-en plus sur le [[Aide:Concepteur de thème|Concepteur de thème]]
 
*Apprenez-en plus sur le [[Aide:Concepteur de thème|Concepteur de thème]]
*Apprenez-en plus sur l'utilisation des [[Aide:Couleur|couleurs]] pour la conception de l'apparence de votre FANDOM
+
*Apprenez-en plus sur l'utilisation des [[Aide:Couleur|couleurs]] pour la conception de l'apparence de votre Fandom
 
*Apprenez-en plus sur comment modifier la [[Aide:Navigation du wiki|navigation du wiki]]
 
*Apprenez-en plus sur comment modifier la [[Aide:Navigation du wiki|navigation du wiki]]
   
Ligne 45 : Ligne 45 :
 
[[pt:Ajuda:Fundo]]
 
[[pt:Ajuda:Fundo]]
 
[[ru:Справка:Фон]]
 
[[ru:Справка:Фон]]
  +
[[tr:Yardım:Arka plan]]
 
[[uk:Довідка:Фон]]
 
[[uk:Довідка:Фон]]
 
[[vi:Trợ giúp:Ảnh nền]]
 
[[vi:Trợ giúp:Ảnh nền]]
Ligne 50 : Ligne 51 :
   
 
[[Catégorie:Aide]]
 
[[Catégorie:Aide]]
  +
[[Catégorie:Aide à l'administration]]
  +
[[Catégorie:Bases de la personnalisation]]

Version actuelle en date du septembre 1, 2020 à 19:51

Les arrière-plans peuvent aider à construire l'identité visuelle d'un wiki et à le mettre en valeur. Cette page contient des recommandations sur la manière de créer un habillage d'arrière-plan optimal pour votre communauté.

PrésentationModifier

L'image de fond est configurée via le Concepteur de thème, dans la section Personnaliser. Vous pouvez télécharger l'arrière-plan au format PNG, JPG ou GIF, à condition que le fichier ne dépasse pas 300 kibi-octets (kio). S'il est plus grand, vous pouvez essayer de réduire sa taille en augmentant la compression, en réduisant la qualité de l'image, ses dimensions, ou en changeant de format (le JPG avec perte sera toujours plus petit que le PNG sans perte).

L'apparence finale de l'arrière-plan dépendra de plusieurs facteurs, dont les plus importants sont laffichage et les dimensions de l'arrière-plan :

  • Sur les affichages les plus petits (1065px ou moins), la mise en page dimensionnera automatiquement la zone de contenu pour remplir tout l'écran et utilisera la couleur de base du fond (principale dans le concepteur de thème) au lieu de l'image.
  • Sur des affichages plus larges (à partir de 1066px), l'arrière-plan sera visible de chaque côté de la zone de contenu. La zone de contenu arrête de s'étendre quand elle atteint sa largeur maximale de 1240px.

L'image d'arrière-plan peut être réglée sur mosaïque, ce qui fait qu'elle se répète et remplit toute la zone d'arrière-plan. À moins que vous ne créiez une image spécifiquement pour fusionner avec les bordures de façon transparente, cela pourrait entraîner un affichage gênant et des bords irréguliers entre les images qui se répètent.

Sinon, l'image sera affichée une seule fois, alignée en haut et au centre de l'arrière-plan, selon les dimensions. Si sa largeur est inférieure à 2000px, le wiki la divisera automatiquement en deux afin qu'elle puisse s'afficher à gauche et à droite de la zone de contenu. Si sa largeur est supérieure à 2000px, une option (« pas de séparation ») sera proposée dans le concepteur de thème, ce qui fera que l'image s'affichera entière en tant que partie de l'arrière-plan.

Dans tous les cas, l'option Fixe vous permet de choisir si l'arrière-plan restera fixe, en restant visible lorsque vous faites défiler la page vers le haut ou vers le bas, ou s'il restera aligné vers le haut, en laissant place à la couleur de fond (« principal », comme expliqué ci-dessus).

Créer l'arrière-planModifier

Il peut être difficile de créer un arrière-plan qui soit beau en toutes circonstances, voici donc quelques conseils. Le plus important est d'utiliser un croquis d'arrière-plan comme référence lors de l'édition d'une image dans GIMP, Paint, Photoshop ou tout autre logiciel d'édition d'images :

BackgroundDiagram
  • Espace de l'image : Les zones situées en dehors de la zone de contenu grise afficheront toujours l'image de fond. Les parties en gris foncé ne le font que parfois, en fonction de la taille de l'écran du visiteur. Assurez-vous que votre image est bien visible dans les zones plus sombres.
  • Espace de contenu : La zone gris clair au milieu du modèle est l'endroit où le contenu de la page wiki ira. Par défaut, l'arrière-plan ne sera pas du tout visible derrière cette zone, mais la transparence peut être ajoutée via le Concepteur de thème.

Il peut être utile d'utiliser ce modèle d'arrière-plan pour réaliser vos propres arrière-plans créatifs ! Vous pouvez télécharger un modèle d'arrière-plan au format PSD ici. Le format PSD est compatible avec la plupart des programmes d'édition d'images, comme Photoshop ou GIMP mentionnés ci-dessus.

Conseils pour le Concepteur de thèmeModifier

  • Quand vous réalisez un arrière-plan, considérez toujours la plus grande possibilité de résolutions d'écran. Plus vous adaptez votre arrière-plan pour correspondre à différentes résolutions, plus votre communauté sera contente.
  • Les fonds d'écran, les œuvres d'art clés et les recherches d'images basées sur le thème de votre communauté peuvent être une bonne idée pour trouver une inspiration créative pour votre fond d'écran.
  • Tenez compte de l'ensemble du site lorsque vous créez le fond. Un fond d'écran animé et dynamique peut nuire à la lisibilité de l'espace de contenu si son arrière-plan est défini avec un fort degré de transparence. À l'inverse, un arrière-plan discret et subtil peut être la touche finale dont votre wiki a besoin.
  • Plus le flou (ou dégradé de couleur) sur l'arrière-plan sera large, plus la transition avec la couleur d'arrière-plan sera fluide. Voir Aide:Concepteur de thème/dégradés pour plus de détails sur la façon de créer des dégradés sur une image de fond.
  • Essayez de toujours utiliser le Concepteur de thème pour importer votre image d'arrière-plan et concevoir l'apparence de votre communauté. Les arrière-plans ajoutés en utilisant le CSS personnalisé peuvent être touchés de façon inattendue par des mises à jour système de Fandom et peuvent aussi augmenter le temps de chargement des pages.
  • En général, il est recommandé d'utiliser le concepteur de thème pour télécharger des images de fond et concevoir votre wiki. Les arrière-plans ajoutés via le CSS personnalisé peuvent être désactivés par des mises à jour du système ou des modifications des classes CSS utilisées par le site, ou avoir un effet négatif sur les temps de chargement.
  • Il est possible de faire en sorte que l'image de fond couvre toute la zone visible de l'arrière-plan. Pour ce faire, modifiez Mediawiki:Wikia.css sur votre wiki et ajoutez :
body.skin-oasis,
body.background-dynamic.skin-oasis::after,
body.background-dynamic.skin-oasis::before {
    background-size: cover;
}
  • Si vous modifiez un ancien wiki non-UCP, le code est un peu différent :
body { 
    background-size: cover;
}

Lectures complémentairesModifier

Plus d'aide

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA .