Fandom

Wikia Français

Commentaires45

Liste de personnalisations

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.

Bonjour à tous.

Ce billet de blog sert de mémo-personnel, mais il peut également vous servir si vous souhaitez trouver des éléments de customisations, vous êtes au bon endroit. Ce sont tous les éléments que vous ne pouvez pas customiser depuis le Tableau d'Administration.

Ce billet de blog sera extrêmement long, car toute l'information y est condensée.

Les modifications faites sur les pages MediaWiki:Wikia.css et autres Mediawiki peuvent prendre une vingtaine de minutes avant d'être opérationnelles. Soyez patients avant de penser que vous vous êtes trompé.

Lisez bien le sommaire ci-dessous pour voir ce qui vous intéresse. Sinon, vous allez tomber sur du contenu qui ne vous intéresse sans doute pas. Pour toute aide ou information, envoyez moi un message sur mon mur.

Informations aux novices

Mediawiki.css est disponible sur tous les Wikis et utilisable à l'adresse fr.nomduwiki.wikia.com/wiki/Mediawiki:Wikia.css ou Common.js ou Chat.css etc. (Je mets à chaque fois le nom de la page où vous devez aller, ne vous inquiétez pas.

Améliorer le référencement de votre Wiki en changeant la description

Ceci risque d'être assez court : Comment améliorer le référencement de votre Wiki en une ou deux minutes.

Votre Wiki possède une page qui est celle qu'utilisera Google pour vous référencer. Il s'agit de la page MediaWiki:Description.

Ici, par exemple, elle se trouve ici : http://communaute.wikia.com/wiki/MediaWiki:Description

Pour bénéficier d'un meilleur référencement, il vous faut mettre tous les mots clés du sujet que vous traitez, dans des phrases qui ont un sens.

Exemple :

http://fr.shingekinokyojin.wikia.com/wiki/MediaWiki:Description

Ainsi, la page d'accueil sera mieux référencée. Cela ne veut pas dire que vous atteindrez immédiatement la première place sur Google, mais vous vous en rapprocherez.

A noter que Google met à jour environ une fois tous les 15 jours les descriptions des Wikias sur ses serveurs. Cela veut dire que vous aurez peut-être à attendre deux semaine avant que le message apparaisse, et que vous grimpiez.

Customiser le message qui apparait généralement sous la forme "Les messages de la communauté ont été mis à jour"

Il suffit d'aller sur la page MediaWiki:Communitymessages-notice-msg, puis de changer le message.

Enfin, si vous voulez l'afficher, il vous suffit de modifier MediaWiki:Community-corner, pour que le message apparaisse.

Retrait du « Image ajoutée par »

Il est préférable d'en faire la demande à un Assistant ou un membre du staff (Special:Contact).

Il est aussi possible de le faire en modifiant la page MediaWiki:Wikia.css. Ajoutez ce code :

 /* Important : Retire "Image ajoutée par" */
  
 .picture-attribution { display:none !important; }

Personnaliser le sondage

Utilisable sur la page MediaWiki:Wikia.css Avant toute chose, il vous faut savoir que vous pouvez créer un sondage de cette façon :


<poll> Aimez-vous ce billet de blog ?
oui
non
</poll>
Et ça s'affichera comme ça :

Aimez-vous ce billet de blog ?
 
38
 
3
 

Ce sondage a été créé le octobre 27, 2013 15:05 et 41 personnes ont déjà voté.

Il vous faut savoir qu'il est possible de modifier le fond, et les contours. Voici un code Type :

/*Personnalisation du Sondage*/
.ajax-poll {
     width: auto !important; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     border-radius: 5px;
     -khtml-border-radius: 5px;   
     background: #F9F9F9 url(Adresse Web de l'image) repeat center bottom;
}

Utilisé sur One Piece Wikia (Utilisation-type : http://fr.onepiece.wikia.com/wiki/Sabo#Sondage_du_Site)

En ce qui concerne le "border-radius", il s'agit des contours du sondage. Voici un site qui vous permet de le définir automatiquement. http://border-radius.com/ (Modifier les chiffres sur le côté, pour simuler les contours) Site extrêmement utile, et peu connu, vu que généralement, on se contente de copier sur d'autres Wikis sans trop savoir à quoi ça correspond. Désormais, lorsque vous verrez border-radius dans un code, vous saurez qu'il vous est possible de le modifier, et que ça correspond aux contours.

Si vous voulez juste modifier les contours sans mettre de fond, retirez la ligne qui commence par background:, et laissez le reste.

Si vous voulez modifier uniquement le fond, retirez les quatre lignes correspondant à radius (donc débutant à -moz). Ne retirez pas width: auto !important; car il s'agit justement du code qui vous permet de modifier les paramètre initiaux.

Mettre un fond d'écran plus grand que 150 Ko

Allez sur la page MediaWiki:Wikia.css Insérez le code

/* Fond d'écran */
body {
	        background-image: url(http://www.onepiecebay.net/img/bg/background.jpg);
	        background-size: 100% auto;
	        background-repeat: no-repeat;
	        background-attachment: fixed;
	        background-position: center
                opacity: 0.9;
}

Voici un exemple type. Vous pouvez modifier les paramètres.

Opacity, c'est l'opacité. Si vous mettez un chiffre proche de 0, la page sera de plus en plus transparente, et plus du tout opaque. Au contraire, si vous mettez un chiffre proche de 1, on ne verra le fond que sur les côtés, et il le contenu de votre Wiki ne sera pas sur le fond (Je sais pas si je suis clair, si je le suis pas, commentez).

Il vous faut un très grand font. Dans l'idéal, 1600*900 parait réellement le minimum, sinon, l'image va se couper sur le bas pour ceux qui utilisent un grand écran (Si vous avez mis background-repeat: no-repeat;), si vous avez mis background-repeat: repeat;  - Chose que je ne conseille pas, c'est assez moche), l'image se répètera.

Si vous voulez agrandir l'image pour qu'elle occupe plus de place, modifiez le pourcentage de background-size; 100% auto, et changez le. Je déconseille également, surtout si l'image est en .jpg

Changer de fond d'une ou plusieures pages en particulier

A insérer dans MediaWiki:Wikia.css Ceci prend beaucoup de temps si vous souhaitez le faire pour toute une catégorie par exemple. Il existe d'autres méthodes qui incluent du codage par Verbatim, mais je suis pas très compétent dans le domaine.

Exemple d'utilisation :

<style type="text/css">
body.page-Utilisateur:John_Trololo,
body.page-Sabo,
body.page-Monkey D. Luffy {
        background: white url('Url d'une image') top center no-repeat !important;
}
</style>

Vous devrez le faire autant de fois que vous avez de catégories.

Changer le fond de la page d'accueil du forum

Dans MediaWiki:Wikia.css, utiliser ce code :

body.mw-special-Forum {
        background: white url('Url d'une Image') top center no-repeat !important;
}

Comme je l'ai expliqué plus haut, vous pouvez changer le No-repeat.

Changer l'apparence de la souris (Curseur)

Salut !

Tu vas sur la page MediaWiki:Wikia.css

Elle est accessible par fr.nomdetonwiki/wiki/MediaWiki:Wikia.css

Plusieurs apparences

Tu ajoutes ce code. C'est seulement si tu veux plusieurs apparences de ta souris.

/** Personnalisation de la souris **/
body{
  cursor: url('Url d'une souris (en .png transparent)'), default;
}
 
a:link{
  cursor: url('2ème URL'), pointer;
}
 
text{
  cursor: url('3ème URL'), text;
}
 
a:hover{
  cursor: url('4ème URL'), ddd;
}
 
a:active{
  cursor: url('5ème URL'), move;
}

Comment ça marche ?

La première URL est la souris telle que tu veux qu'elle s'affiche quand n'est sur rien.

La deuxième URL, c'est quand la souris est sur un lien etc.

Si ça peut t'éclairer, voici le code de Sonic

/** Curseur **/
body{
  cursor: url('http://images.wikia.com/sonicthehedgehog/fr/images/8/88/Curseur_Sonic_-_Normal.png'), default;
}
 
a:link{
  cursor: url('http://images.wikia.com/sonicthehedgehog/fr/images/4/4c/Curseur_Sonic_-_Lien.png'), pointer;
}
 
text{
  cursor: url('http://images2.wikia.nocookie.net/sonicthehedgehog/fr/images/0/07/Curseur_Sonic_-_Lien_visit%C3%A9.png'), text;
}
 
a:hover{
  cursor: url('http://images.wikia.com/pottermore-blabla/fr/images/e/eb/Curseur 2.png'), ddd;
}
 
a:active{
  cursor: url('http://images.wikia.com/sonicthehedgehog/fr/images/9/9c/Curseur_Sonic_-_Active.png'), move;
}

Apparence Unique

Enfin, si tu ne veux voir qu'un seul curseur, que ce soit pour les liens ou pour l'ensemble, tu peux utiliser ce code.

body, a:hover {cursor: url(URL de la souris), progress !important;}

Et si tu es très paresseu(x,se) tu peux faire comme Kingdom Heart Wikia, et te rendre sur ce site : http://www.cursors-4u.com/, aller en haut, faire une recherche (Exemple : Mario) et tomber sur un joli curseur, puis prendre le deuxième lien.

Mettre un curseur.png

(Notez la magnifique flèche - Copier-Coller dans le MediaWiki)

Et il suffit de le mettre dans MediaWiki:Wikia.css

Changer le texte "Ajouter une image à cette galerie" dans une galerie d'image

Cette fois, une astuce un peu plus gadget : Comment changer le texte dans une galerie.

Cette fois, il vous faut aller dans l'espace MediaWiki:Common.js de votre Wiki, et ajouter ce code :

/* Changement du Texte de la Galerie
window.galleryButtonText = 'Ajouter une image à cette galerie';
 
importScriptPage('GalleryButtonCustomText/code.js', 'dev');

Là, rien ne changera. Il vous faut mettre par exemple :

/* Changement du Texte de la Galerie
window.galleryButtonText = 'Une image en plus serait la bienvenue !! Ajoutes en une ! Fais plaisir à Mario ! Allez !!';
 
importScriptPage('GalleryButtonCustomText/code.js', 'dev');

Bon, mon texte c'est du n'importe quoi, mets surtout pas ça x)

Installer ChatOptions (Personnalisateur du Tchat) sur son Wiki

Merci à SimsWiki pour son billet de blog !

Blog utilisateur:Simswiki/Tutoriel : Installer ChatOptions sur son wiki

Changer des messages par défaut

Changer les messages de Bienvenue aux Utilisateurs Anonymes et inscrits

Rendez vous sur la page MediaWiki:Welcome-message-anon (Pour le message d'accueil des contributeurs anonymes) Rendez vous sur la page MediaWiki:Welcome-message-user (Pour le message d'accueil des contributeurs enregristrés)

Quelques petites choses à savoir : $1 est une variable, elle désigne le Nom de la page modifiée. $4 est une variable, elle désigne le nom de l'utilisateur ou son adresse IP si c'est un utilisateur anonyme.

Personnaliser la page d'accueil des forums

Bonjour à tous !

Cette fois-ci je vais vous expliquer comment faire une page d'accueil de forum qui ressemble à ça :

Personnalisation forum.png

(Merci à Aster09 et Hulothe pour vos aides respectives)

Donc, il faudra cette fois aller sur la page MediaWiki:Wikia.css. Cette personnalisation est composée d'un code en deux parties :

/* Fond des titres de sous-forum */
.heading {
   background:#A6C1ED;
   width:100%;
   padding:2px;
}


 
/* Icônes des sous-forums */
/* Dans l'ordre : 
73859 : Règlement,
30673 : Journal du Nouveau Monde,
30675 : One Piece ! (Section Générale),
30674 : Bar Chez Blueno,
74734 : Davy Back Fight,
30672 : Blabla Thousand Sunny,
30686 : Colors Trap,
59676 : Présentation,
37366 : Suggestions,
51355 : Aides,
30684 : Gouvernement Mondial,
30977 : Ohara */ 

ul.boards .board {
  padding-left: 120px;
  background-position:15px center;
}
 
.board-73859 {
  background: url("Emporioxd.png") no-repeat scroll;
}
 
.board-30673 {
  background: url("Journal_du_Nouveau_Monde.png") no-repeat scroll;
}
 
.board-30675 {
  background: url("Section_G%C3%A9n%C3%A9rale_One_Piece.png") no-repeat scroll;
}
 
.board-30674 {
  background: url("Bar_Blueno.png") no-repeat scroll;
}
 
.board-74734 {
  background: url("DavyBack.png") no-repeat scroll;
}
 
.board-59676 {
  background: url("Pr%C3%A9sentation.png") no-repeat scroll;
}
 
.board-37366 {
  background: url("Suggestions.png") no-repeat scroll;
}
 
.board-51355 {
  background: url("Aide.png") no-repeat scroll;
}
 
.board-30684 {
  background: url("Gouvernementmondial.png") no-repeat scroll;
}
 
.board-30977 {
  background: url("OharaArchives.png") no-repeat scroll;
}
 
.board-30672 {
  background: url("Sunny.png") no-repeat scroll;
}
 
.board-30686 {
  background: url("Colorstrap.png") no-repeat scroll;
}

Ce code est directement extrait de One Piece Encyclopédie. Donc, prenons la première partie :

/* Fond des titres de sous-forum */
.heading {
   background:#A6C1ED;
   width:100%;
   padding:2px;
}

Cela correspond à la couleur de la barre sur laquelle il y a le lien qui redirige vers le sous-forum. Cela vous permet de l'ajuster et de changer la couleur. #A6C1ED correspond à la couleur bleu clair que vous voyez. Vous pouvez la changer en mettant par exemple

background:yellow

si vous voulez du jaune ou

background:#D30000

si vous voulez une couleur particulière (Allez sur http://code-couleur.com/ pour définir la couleur que vous souhaitez.

Ensuite, la partie 2, un peu plus complexe.

ul.boards .board {
  padding-left: 120px;
  background-position:15px center;
}

Donc là, j'ai choisi de mettre des images de 90*90px. Sachant qu'il y a 15px de chaque côté de l'image, il faut donc un total de 120px défini par padding-left: 120px.

Vous pouvez mettre des images de 50*50px en changeant et en mettant padding-left: 80px. Ainsi de suite. Je vous déconseille de dépasser 125 px pour la taille des images, parce qu'après, l'image devient trop invasive comparé au reste.

Troisième et dernière partie. À chaque sous-forum correspond un numéro de Board. Ici, j'ai mis tous les numéros de board de One Piece Encyclopédie en post-it du code pour m'y retrouver.

/* Dans l'ordre : 
73859 : Règlement,
30673 : Journal du Nouveau Monde,
30675 : One Piece ! (Section Générale),
30674 : Bar Chez Blueno,
74734 : Davy Back Fight,
30672 : Blabla Thousand Sunny,
30686 : Colors Trap,
59676 : Présentation,
37366 : Suggestions,
51355 : Aides,
30684 : Gouvernement Mondial,
30977 : Ohara */

Comment trouver ces numéros ?

C'est assez simple. Allez sur la page Spécial:Forum de votre wiki. Une fois que vous êtes dessus, affichez le code source de la page. (Avec Chrome ou Firefox par exemple, il vous suffit de faire clic droit puis afficher le code source)

Donc ça peut paraitre impressionnant si c'est la première fois que vous le voyez mais ne vous inquiètez pas, c'est facile.

Une fois que le code source apparait, faites Ctrl+F (ou Pomme+F si vous êtes sous MacOS) et tapez board dans la page qui est apparue.

Par exemple sur le forum Fairy tail :

Board.png

Donc on a la première board qui est apparue. Il s'agit de la première de la liste, celle correspondant au Comptoir de la Guilde.

La board est la numéro 17390, et correspond au comptoir de la guilde.

Une fois que vous avez fait ça, vous cliquez sur la touche Entrée (3 fois je crois) jusque vous tombiez sur la prochaine.

Vous pouvez donc faire une liste, ici pour Fairy Tail :

/* Dans l'ordre : 
17390 : Comptoir de la Guilde,
17398 : Siège du Weekly Sorcerer,
27250 : Royaume des Esprits,
17388 : Étage de l'auberge,
17387 : Palier de la porte Eclipse,
*/

et ainsi de suite jusqu'à ce que vous ayez les numéros de tous vos sous-forums (J'ai pas fait tous les sous-forums fairy tail pour ce tuto parce que j'ai pas trop le temps ^^")

Ensuite, c'est tout simple, vous reportez ces numéros sur le code

.board-17390 {
  background: url("Emporioxd.png") no-repeat scroll;
}

Donc là, j'ai le code du sous forum Comptoir de la Guilde. L'image que j'ai mise sera celle qui apparaitra sur le côté.

Et vous mettez ce code avec la board qui change, et l'image qui change, ainsi, vous pouvez créer un code comme celui que j'ai mis au départ de ce tuto.

Voilà, si je ne suis pas clair, n'hésitez pas à le dire sur ma page de discussion, et si vous avez du mal, je peux vous assister dans le codage, et également pour les images.

SUITE DES PERSONNALISATIONS

Prochainement sur ce billet : Créer des effets d'ombres, et de lumières sur les boutons, personnaliser ENTIEREMENT le tchat, et plein d'autres petites choses :)


CE BILLET DE BLOG EST INACTIF, J'AI PEU DE TEMPS POUR M'EN OCCUPER.

DERNIÈRE MÀJ : LUNDI 30 DÉCEMBRE.

Sur le réseau Fandom

Wiki au hasard