Wikia

Wikia Français

Commentaires61

Personnaliser la page d'accueil

Wyz juin 18, 2012 Blog utilisateur:Wyz

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, 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.

Titre niveau 2 (optionnel)

Conteneur contenu

Conteneur global avec la classe CSS BoiteAccueil

Une fois le modèle BoiteAccueil créé, définissez vos différentes boîtes qui l'utilisent, exemples :

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:Wikia.css.

Comme dit précédemment, la classe BoiteAccueilpermet 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
  • Aller à Wiki Sly Cooper
  • Aller à Wiki Ratchet & Clank
  • Aller à Wiki Marvel
  • Aller à Wiki Ondar
  • Aller à Wiki Les Royaumes d'Amalur
  • Aller à Wiki Need For Speed
  • Aller à Wiki Music Story
Autres pages d'accueil
  • Aller à Wiki Harry Potter
  • Aller à Wiki Inazuma Eleven
  • Aller à Picsou Wiki