Fandom

Wikia Français

Commentaires61

Personnaliser la page d'accueil

Wyz juin 18, 2012 Blog utilisateur:Wyz

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.

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

Sur le réseau Fandom

Wiki au hasard