FANDOM


La page d'accueil est en quelque sorte la vitrine de votre wiki et elle est donc aussi importante que l'apparence du wiki (arrière-plan, couleurs). Voici quelques astuces pour la rendre attrayante.

Disposition

Disposition page accueil.png

Exemple de disposition de page d'accueil

La première chose à considérer est d'utiliser une mise en page avec deux colonnes qui font 2/3 et 1/3 de la largeur. En effet, pour que l'utilisation des wikis qu'elle héberge reste gratuite, Wikia peut être amenée à afficher des publicités en haut à droite de la page d'accueil. Utiliser cette mise en page permet d'éviter des désagréments visuels. Pour ce faire il faut utiliser le code suivant (en mode source) :

<mainpage-leftcolumn-start />
LE CONTENU DE LA COLONNE DE GAUCHE VA ICI
<mainpage-endcolumn />

<mainpage-rightcolumn-start />
LE CONTENU DE LA COLONNE DE DROITE VA ICI
<mainpage-endcolumn />

Ensuite, un système de boîtes peut être être mis en place. L'exemple ci-contre montre un exemple de disposition :

  • Colonne de gauche
    • Message de bienvenue et présentation brève du wiki
    • Carrousel
    • Mise en lumière d'un article
  • Colonne de droite
    • Vidéo à la une
    • Les dernières actualités

Boîtes

Pour simplifier la mise en place des boîtes, il est possible d'utiliser un modèle générique tel que Modèle:BoiteAccueil, ce qui fait qu'une modification du modèle (code ou apparence) s'appliquera à toutes les boîtes. Ce modèle définit un conteneur ayant la classe CSS globale BoiteAccueil, ce qui va nous permettre l'utilisation du CSS pour mettre en forme de la même façon toutes nos boîtes. Ce conteneur contient un titre de niveau 2 (optionnel), qui permet d'indiquer à la page (et aux robots d'indexation qui la parcourt) un élément important et un conteneur pour du texte, des vidéos, etc.

Définissez vos différentes boîtes, exemples :

Pour les placer sur la page d'accueil, avec le carrousel :

<mainpage-leftcolumn-start />
{{BoiteAccueil/Bienvenue}}
<gallery type="slider">
Fichier1.jpg|Titre 1|link=Lien 1|linktext=Détail 1
Fichier2.jpg|Titre 2|link=Lien 2|linktext=Détail 2
Fichier3.jpg|Titre 3|link=Lien 3|linktext=Détail 3
Fichier4.jpg|Titre 4|link=Lien 4|linktext=Détail 4
</gallery>
{{BoiteAccueil/Lumières}}
<mainpage-endcolumn />

<mainpage-rightcolumn-start />
{{BoiteAccueil/Vidéo}}
{{BoiteAccueil/Actualité}}
<mainpage-endcolumn />

Apparence

Si on en reste là, le résultat n'est pas très joli : il faut ajouter de la couleur et du formatage de texte à nos boîtes. Pour cela, on va utiliser les styles que l'on va mettre dans MediaWiki:Wikia.css.

Comme dit précédemment, la classe BoiteAccueil permet de définir la boîte dans son ensemble, soit si on veut une boîte avec un fond orange, une bordure noire et des coins arrondis :

.BoiteAccueil
{
  border-radius: 8px;
  border 1px solid: #000;
  background-color: #FF6A00;
}

Pour centrer le titre de la boîte et le mettre en blanc :

.BoiteAccueil h2
{
  color: #FFF;
  text-align: center;
}


Pour ajouter un peu d'espacement au niveau du détail :

.BoiteAccueil .corps
{
  padding: 0 5px;
}

ASTUCE : le carrousel ne prend pas toute la largeur de la colonne de gauche et on peut constater un léger décrochage entre les boîtes et le carrousel, pour corriger cela, ajouter le code suivant :

div.main-page-tag-lcs-exploded > div:first-child
{
  margin-left: 8px;
}

Et voilà ! N'hésitez pas à nous présenter vos créations...

Interférence d'un bloqueur de publicité détectée !


Wikia est un site gratuit qui compte sur les revenus de la publicité. L'expérience des lecteurs utilisant des bloqueurs de publicité est différente

Wikia n'est pas accessible si vous avez fait d'autres modifications. Supprimez les règles personnalisées de votre bloqueur de publicité, et la page se chargera comme prévu.

Sur le réseau FANDOM

Wiki au hasard