FANDOM


m (robot Ajoute : be:Даведка:Фон)
(Mise à jour)
Ligne 5 : Ligne 5 :
   
 
* 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.
 
* 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.
* Sur des affichages plus larges, l'arrière-plan ne sera pas visible tant que la zone de contenu ne fera pas au moins 1030px de large.
+
* Sur des affichages plus larges (plus de 1066px), l'arrière-plan sera visible de chaque côté de la zone de contenu.
* Quand la zone de contenu est entre 1030px et 1600px, jusqu'à 170px de 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.
* La zone de contenu arrête de s'étendre quand elle atteint sa largeur maximale de 1600px. Si la largeur de l'affichage est suffisante pour étendre la taille de la fenêtre du navigateur au delà de 1920px de large, plus de l'arrière-plan deviendra visible.
 
   
 
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.
 
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.
   
Voici des exemples de l'image d'arrière-plan du [[w:c:communaute|Centre des communautés]] à différentes tailles :
+
'''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.
 
<gallery position="center" spacing="small" hideaddbutton="true">
 
arrière-plan largeur 1024.png|Espace de contenu large de 1024px (aucun arrière-plan visible)
 
arrière-plan largeur 1280.png|Espace de contenu large de 1280px
 
arrière-plan largeur 2400.png|Espace de contenu large de 2400px
 
Wiki-background|Arrière-plan (sans zone de contenu, pour référence)
 
</gallery>
 
 
Pour la capture « large de 1600px », l'espace de contenu est étiré aux 1600px maximum. Les deux moitiés de l'arrière-plan sont automatiquement séparées et ajustées afin qu'il soit toujours affiché de chaque côté de l'espace de contenu.
 
 
*'''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.
 
   
 
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.
 
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.
Ligne 19 : Ligne 19 :
 
Voici un modèle d'arrière-plan pour référence :
 
Voici un modèle d'arrière-plan pour référence :
   
[[File:Background-darwinfluid.png|center|670px]]
+
[[File:BackgroundDiagram.png|center]]
   
 
Cinq choses à noter à propos de cette image :
 
Cinq choses à noter à propos de cette image :
Ligne 25 : Ligne 25 :
 
*'''Arrière-plan''' : Les ballons colorés mettent en valeur l'aspect créatif de l'arrière-plan (parfois appelé ''skin'').
 
*'''Arrière-plan''' : Les ballons colorés mettent en valeur l'aspect créatif de l'arrière-plan (parfois appelé ''skin'').
 
*'''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.
 
*'''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, jusqu'à ce la zone de contenu atteigne une largeur de 1600px et arrête de s'étendre.
+
*'''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.
 
*'''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.
 
*'''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.
Ligne 35 : Ligne 35 :
 
==Quelques conseils pour le Concepteur de thème==
 
==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.
 
*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.
+
*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.
 
*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.
 
*Recherchez des arrières-plans et images basés sur le sujet de votre communauté pour trouver l'inspiration pour votre arrière-plan.
*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 impactés de façon inattendue par des mises à jour système de FANDOM et peuvent aussi augmenter le temps de chargement des pages.
+
*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.
*Si vous souhaitez ancrer un arrière-plan fixe en bas de l'écran plutôt qu'en haut, ajoutez le code suivant au MediaWiki:Wikia.css de votre wiki :
 
<source lang="css" style="margin-left:2em;">/* Bottom anchor background image */
 
body.background-dynamic:after,
 
body.background-dynamic:before {
 
bottom: 0 !important;
 
top: inherit !important;
 
}</source>
 
   
 
==Voir aussi==
 
==Voir aussi==

Version du septembre 18, 2017 à 15:06

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 Concepteur de thème.

Informations

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 :

  • 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.
  • Sur des affichages plus larges (plus 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.

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.

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.

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.

Voici un modèle d'arrière-plan pour référence :

BackgroundDiagram

Cinq choses à noter à propos de cette image :

  • Arrière-plan : Les ballons colorés mettent en valeur l'aspect créatif de l'arrière-plan (parfois appelé skin).
  • 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 :

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.
  • Recherchez des arrières-plans et images basés sur le sujet de votre communauté pour trouver l'inspiration pour votre arrière-plan.
  • 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.

Voir aussi

Plus d'aide

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