Tutoriel et Présentation de l'extension Stylebot

Dz'AiiRy

Membre
Inscription
13 Juin 2011
Messages
843
Réactions
174
Points
19 948
RGCoins
25
"Avez-vous déjà eu envi d'avoir une page comme celle-ci ? "

Plutot "Avez-vous déjà eu envi d'avoir un ordinateur comme cellui-ci ? " oui ...
 

iDaRkSkYᴴᴰ

♠ ♥ ♣ ♦
Premium
Inscription
10 Août 2012
Messages
3 444
Réactions
1 526
Points
13 904
RGCoins
0
GG Pour le tuto, demande à un staff de le récompenser :ok:
 

Bougnoulinho

Mangeur de chips
Premium
Inscription
6 Mars 2014
Messages
877
Réactions
280
Points
4 341
RGCoins
0
Merci pour ce tuto je le teste de suite !
 

KTC Lobby

Platines/Trophées, COD/GtaV.
VIP
Inscription
20 Mars 2013
Messages
7 999
Réactions
3 604
Points
23 310
RGCoins
10
Bon tuto et surtout bien expliqué
 
Inscription
8 Septembre 2013
Messages
1 713
Réactions
655
Points
908
RGCoins
0
Salut tout le monde,

Avez-vous déjà eu envi d'avoir une page comme celle-ci ? :)
1383588102-capture-d-ecran-2013-11-04-a-19-00-49.png

Aujourd'hui je vous fait ce topic, pour vous montrer une extension Google Chrome, qui se nomme Stylebot.

Au début vous allez me dire, "C'est quoi ça ? :mmh:". Stylebot, c'est une extension vraiment utile, pour ceux qui veulent personnalisés leur sites a leur guises.

Là vous allez me dire "WOW ! Comment ça !? :d:".

Donc comme je vous l'ai expliquer plus haut, vous allez pouvoir "customiser" votre site, et en plus, très simplement.
Pour les connaisseurs en HTML, Stylebot sert enfaite, a modifier le .CSS de votre page, et ça, même quand vous la refresherais, et dans n'importe quel onglet de la page ;)

Si cela vous intéresse, voici le lien de téléchargement:

Une fois l'installation faite, vous aurez ceci dans votre barre de navigation:
VbelwHo.png
(tout à droite)

Une fois installé, vous pouvez vous rendre sur la page que vous voulez customiser, en l'occurence pour ce topic, j'ai choisi :RG: :)
Lorsque vous serrez sur votre page, cliquez sur l'icône où il y a marquer CSS, puis sur Open Stylebot.

Une fenêtre devrait s'ouvrir sur le droite de votre page:
1383589321-capture-d-ecran-2013-11-04-a-19-21-12.png


Une fois cette petite fenêtre ouverte, il faut que le gris en haut soit présenté de cette manière:
XSboYTd.png

Avec la case en bleu, et le menu déroulant sur "Select an element".

Après être sur cette configuration, sélectionnez la zone sur laquelle vous désirez modifier le fichier .CSS de la page, comme ceci, en l'occurence pour moi, je prend la Notice comme exemple :):
nnv0K2N.png


Vous y verrez un encadrement vert, cliquez, et vous verrez les options sur le fenêtre, qui ne seront plus en gris, vous pourrez ainsi modifier ce que bon vous semble :).

Vous devriez avoir ça:
1383589421-capture-d-ecran-2013-11-04-a-19-23-11.png


Cette première colonne, vous serviras a modifier la police et l'apparence du texte présent sur la zone sélectionnée:
mrwftcx.png


Cette deuxième colonne, vous serviras a modifier la couleur et le fond de la zone sélectionnée:
LbE8JPx.png


Cette troisième colonne, vous serviras a modifier le contour de la zone sélectionnée:
5PPttT6.png


Cette quatrième et dernière colonne, vous servira a éditer toute la zone sélectionnée, mais en une seule fois:
hOxG0Df.png


Une fois votre personnalisation faite, vous pourrez admirer votre travail :D

Si vous avez mit quelque chose que vous ne vouliez pas mettre, vous pourrez cliquer sur "Undo", pour remettre votre page comme elle était, vous pourrez cliquer sur "Reset" ou "Reset Page", pour éditer manuellement vous même le .CSS de la page, cliquez sur "Edit CSS" ou sur "Advenced".
1383590804-capture-d-ecran-2013-11-04-a-19-43-05.jpg


Et voilà, j'espère que cet assez gros Tutoriel/Présentation vous auras plus, car il m'a pris quand même 1h a rédiger :)

Si c'est le cas n'oubliez pas l'évaluation positive :)

Bonne customisation, et bonne fin de journée à tous ! :D
Gros Tuto ! GG & Merciiiii :)
 
Haut