Une version 2.0.2 qui apporte rien de nouveau pour vous mais qui permet de mieux personnaliser les éléments des blogs.

Ajout de : #profil, #profil-titre, #profil-content .

Donc, téléchargez la ou pas, suivant ce que vous allez en faire :

-- Cliquez ici si vous ne savez pas de quoi on parle.

-- Cliquez ici pour installer la nouvelle version.

Passons aux choses sérieuses.

Cet article sera beaucoup plus long que d'habitude car je vais expliquer comment j'ai fais pour permettre aux gens de modifier leur blog, et j'essaierai de vous expliquez comment modifier vous même les éléments de votre blog.



Je vais essayer d'être le plus compréhensible possible; mais ça paraît tellement simple pour l'habitué que c'est possible que je prenne des raccourcis, si c'est le cas, faites moi signe.

Le fonctionnement du script :

Le principe: un navigateur internet (firefox) charge la page internet, une extension (Greasemonkey) execute un script (Gamekyo Blog+) qui permet de modifier le contenu de la page, comme ajouter/modifier/supprimer des éléments sur la page.

En partant sur ce principe, il est possible de changer TOUT ce qu'on veut sur la page affichée (c'était le but premier du script - permettre d'afficher/cacher, muter/unmuter des membres).

Voila un schéma explicatif assez simplifié:


Je dis simplifié parce qu'en fait, la page est chargée, affichée ET ensuite les modifications sont faites.

Le souci ici, c'est que comme vous le voyez, tout se passe CHEZ vous.

Donc pour pouvoir faire des modifications que tout le monde va voir, il fallait monter un serveur de synchronisation qui ferait basiquement ceci:



Une fois que ça a été mis en place, il fallait que le script puisse faire des requêtes distantes. Heureusement Greasemonkey peut faire ça.

Je rentre volontairement pas dans les détails de programmation pour pas en perdre plus d'un (ouai, on est quand même sur un site de jeu) ^^.

Retenez qu'à chaque blog que vous visitez, une requête silencieuse est faite au serveur de synchro, si l'utilisateur a pas de CSSe (étendue) alors le script renvoie rien.

Voilà comment marche la synchronisation de la nouvelle monture de GKB+.

Maintenant place aux CSS étendue !

TOUT D'ABORD, je tiens à préciser que Gamekyo n'accepte pas les balises HTML donc gardez en tête que les + blabla + sont en fait des < et > .



Pour ceux qui ne savent pas, la page que vous avez sous les yeux en ce moment est une succession de "balises" de texte. Ces balises sont appelées des balises HTML, le HTML (HyperText Markup Language) n'est pas un langage à proprement parlé (comme peut l'être le C, C++, etc...), il permet de bien cataloguer les informations que vous voulez montrer à vos visiteurs.

Par exemple, suivant ce que vous voulez montrer, une liste par exemple, vous devez mettre vos éléments comme ceci :

Il en existe plusieurs et certaines sont plus utilisées (ou mal utilisées c'est à voir) que d'autres.

Par exemple, la balise +p+ permet de mettre un texte en paragraphe, la balise +strong+ +/strong+ (ou +b+ +/b+ mais dépréciée) mettra en gras automatiquement ce que vous écrirez dedans. Ou encore, y'a la balise +img+ qui permet d'insérer une image !

Vous voyez le genre ? Si vous êtes sous Firefox, faites CTRL + U pour voir à quoi ressemble la page que vous regardez en ce moment en HTML.

C'est fouillis hein ? Pleins de balises partout, pleins de trucs incompréhensibles, c'est normal ce que vous voyez est "juste" DU CONTENU !

Mais je vous vois venir ceux qui suivent encore, vous vous demandez, comment ça se fait que la page affiche des cadres avec des bordures en couleur, un fond bleu alors que ce qu'on voit, c'est juste des balises et pas d'information de couleur ?

Et bien, justement, il y a le CSS (pour Cascading Style Sheets - Feuilles de style en cascade en Français) qui est un langage de "mise en forme".

Avec ça, on peut modifier n'importe quel élément de la page pour le rendre comme on le souhaite.

La syntaxe ressemble à ça :

(Il ne faut pas oublier le point virgule à la fin, le style pourrait ne pas s'appliquer si vous l'oubliez !)

La syntaxe est très simple, il suffit de repérer l'élément que l'on veut changer et lui imposer des nouvelles propriétés. Je m'explique:

Certains styles sont redondants et d'autres sont "uniques" et utilisés 1 seule fois sur la page.
On va se servir de ça pour cibler ce qu'on veut: un style redondant sera représenté par un . (point) au début de son nom et un style unique par un # (dièse).

Avec la mise à jour 2.0.2 (celle là), si vous tapez dans CSS étendue :

Votre encadré où il y a toutes les informations sur votre profil aura un fond bleu.
Comme il n'y a qu'UN seul encadré profil, le style est unique.

A contrario, si vous en avez marre que votre pseudo ait une majuscule à chaque fois qu'il apparait (oui, moi ça me fait chier ^^), il faudra utiliser :


Comme votre pseudo est susceptible d'apparaitre plusieurs fois sur le site, le style est pas unique, c'est un .(point) qui précède son nom.

Maintenant, la question c'est comment trouver les nom des classes qui changent ce qu'on veut et où on veut ?

Simple, il faut installer une extension qui s'appelle "Firebug", cliquer sur le "cafard" en bas, allez sur l'onglet "HTML" et utilisez la sorte de "souris avec un rectangle" (juste à côté de "Console"), ciblez l'élément que vous voulez modifier et regardez sa dénomination (ses paramètres).



Exemple: Je veux changer la couleur de la bande en haut. Je cible en haut et je vois apparaitre:

Ce qui veut dire que tout ce qui se trouve dans ce "div" (qui est une balise HTML, je vous le rappelle) correspond au haut de la page.
id="header" veut dire que c'est un style UNIQUE, donc il faudra... un # dans son nom ! (si c'était un class="blabla" c'était un POINT)

Donc on écrira: pour changer sa couleur.

On peut aussi modifier les éléments HTML qui n'ont pas de class= ou de id=, il suffit d'écrire leur nom.

Genre, vous voulez la zone de texte des commentaires soit noire sur verte (matrix style !) ?
Simple !

Il existe beaucoup de propriété de mise en forme, une liste non exhaustive est disponible ici : http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html

Essayez-les pour trouver ce que vous recherchez !

Je rajoute que comme on est sur Firefox, on peut utiliser certaines propriétés que d'autres navigateurs n'ont pas tel que -moz-border-radius: 10px; (pour arrondir les angles), opacity: (de 0.1 à 1); et d'autres que je n'utilise pas plus que ça.

Mon article est fini, j'espère que ça vous aura pas mal aidé à comprendre, il faut pratiquer pour arriver à quelque chose de potable, donc si ça rend pas bien ou marche pas bien, PERSÉVÉREZ !

Si vous avez des questions, je vous écoute

P.S: Félicitations, vous avez lu mon pavé en entier (enfin, j'espère ) !