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[]

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, ce qui fait qu'une modification du modèle (code ou apparence) s'appliquera à toutes les boîtes qui sont basées dessus.
Le modèle Modèle:BoiteAccueil définit un conteneur global ayant la classe CSS BoiteAccueil
. 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.
Conteneur contenu
BoiteAccueil
Une fois le modèle BoiteAccueil créé, définissez vos différentes boîtes qui l'utilisent, exemples :
- Modèle:BoiteAccueil/Bienvenue
- Modèle:BoiteAccueil/Lumières
- Modèle:BoiteAccueil/Vidéo
- Modèle:BoiteAccueil/Actualité — ce modèle affiche ici les 3 derniers billets postés avec la catégorie « Actualité Wikia »
Pour les placer sur la page d'accueil, en mode source, 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 /> __NOTOC__
Note : Le mot clé __NOTOC__
permet d'éviter que le sommaire s'affiche si vous avez 5 boîtes ou plus.
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:Common.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 { margin: 10px 0; background-color: #FF6A00; border: 1px solid #000; border-radius: 8px; }
Pour centrer le titre de la boîte et le mettre en blanc :
.BoiteAccueil h2 { margin: 10px 20px 8px; text-align: center; color: #FFF; }
Pour ajouter un peu d'espacement au niveau du détail :
.BoiteAccueil .corps { padding: 0 5px 5px; }
Et voilà comment obtenir une page d'accueil sexy assez simplement ! N'hésitez pas à nous présenter vos créations...
- Pages d'accueil utilisant le système de boîtes décrit ici
- Autres pages d'accueil