YOUPASS - convertir le crédit téléphonique en monnaie ! : Partenaire RealityGaming.fr

Tutoriel Tutoriel et Présentation de l'extension Stylebot

RocKz

The unseen blade, is the deadliest.
Premium
Inscrit
28 Octobre 2012
Messages
1 153
J'aime
557
Points
4 798
Reply from RocKz Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #1
Salut tout le monde,

Avez-vous déjà eu envi d'avoir une page comme celle-ci ? :)
proxy.php?image=http%3A%2F%2Fimage.noelshack.com%2Ffichiers%2F2013%2F45%2F1383588102-capture-d-ecran-2013-11-04-a-19-00-49.png&hash=dce64032d45a56610c190b250a0cf957

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:
Vous devez vous inscrire pour voir les liens !


Une fois l'installation faite, vous aurez ceci dans votre barre de navigation:
proxy.php?image=http%3A%2F%2Fi.imgur.com%2FVbelwHo.png&hash=5040f20afad5d577246a19d0576b9845
(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:
proxy.php?image=http%3A%2F%2Fimage.noelshack.com%2Ffichiers%2F2013%2F45%2F1383589321-capture-d-ecran-2013-11-04-a-19-21-12.png&hash=8c925cc1f87698a5dbe43852d0295a42


Une fois cette petite fenêtre ouverte, il faut que le gris en haut soit présenté de cette manière:
proxy.php?image=http%3A%2F%2Fi.imgur.com%2FXSboYTd.png&hash=14a276c3ffe14536c3dffcd8d666ebf7

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 :):
proxy.php?image=http%3A%2F%2Fi.imgur.com%2Fnnv0K2N.png&hash=c7da56e5fbcdef416e4314e34ba6ebbe


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:
proxy.php?image=http%3A%2F%2Fimage.noelshack.com%2Ffichiers%2F2013%2F45%2F1383589421-capture-d-ecran-2013-11-04-a-19-23-11.png&hash=8d8a51f4e0a540d18c0ba8bb60d8fbb2


Cette première colonne, vous serviras a modifier la police et l'apparence du texte présent sur la zone sélectionnée:
proxy.php?image=http%3A%2F%2Fi.imgur.com%2Fmrwftcx.png&hash=5fbb8c7c6e36eb40dd367fc677143fb2


Cette deuxième colonne, vous serviras a modifier la couleur et le fond de la zone sélectionnée:
proxy.php?image=http%3A%2F%2Fi.imgur.com%2FLbE8JPx.png&hash=743015247ba3ee02c06e7c6cf2c5d2a5


Cette troisième colonne, vous serviras a modifier le contour de la zone sélectionnée:
proxy.php?image=http%3A%2F%2Fi.imgur.com%2F5PPttT6.png&hash=d1fe507d3ff296b3139a41dc9f2f2e2a


Cette quatrième et dernière colonne, vous servira a éditer toute la zone sélectionnée, mais en une seule fois:
proxy.php?image=http%3A%2F%2Fi.imgur.com%2FhOxG0Df.png&hash=cd21ef914eb22d033b74b3edcfb58b23


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".
proxy.php?image=http%3A%2F%2Fimage.noelshack.com%2Ffichiers%2F2013%2F45%2F1383590804-capture-d-ecran-2013-11-04-a-19-43-05.jpg&hash=8065f1d7225c200ce1060925d4f613fc


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
 
Dernière édition:

iMoDz | AlexS

Membre Premium
Premium
Inscrit
25 Février 2013
Messages
4 616
J'aime
1 878
Points
6 881
Reply from iMoDz | AlexS Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #2
Merci RocKz
 

TeraZyKs

ⓣⓔⓡⓐⓩⓨⓚⓢ
Premium
Inscrit
30 Mai 2012
Messages
2 573
J'aime
669
Points
4 970
Reply from TeraZyKs Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #3
Merci ! :)
 
D

deleted59625

Invité
Reply from deleted59625 Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #4
Gros tutoriel ! Merci :love:
 

xSundy

RealityGaming♥
Premium
Inscrit
30 Septembre 2012
Messages
6 053
J'aime
2 140
Points
5 441
Reply from xSundy Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #6
GG Le tuto et merci :) Faut que j'essaye :neo:
 
D

deleted315158

Invité
Reply from deleted315158 Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #8
GG, je vais essayé ca :) !
 

xSundy

RealityGaming♥
Premium
Inscrit
30 Septembre 2012
Messages
6 053
J'aime
2 140
Points
5 441
Reply from xSundy Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #10
J'ai fait n'importe quoi x)
Vous devez vous inscrire pour voir les liens !
 

Guakamelo

Bonjour
Premium
Inscrit
17 Juillet 2012
Messages
3 399
J'aime
849
Points
8 271
Reply from Guakamelo Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #12
Gros Tuto GG :ok:
 

BGK94FR

Membre Premium
Premium
Inscrit
26 Mai 2012
Messages
2 042
J'aime
739
Points
4 865
Reply from BGK94FR Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #13
@RocKz , pourrais-tu mettre les liens de téléchargement pour ceux qui utilise Firefox, Explorer ou encore Opera ? ;)
( à part si cela n'est disponible que sur Chrome :) )
 

RocKz

The unseen blade, is the deadliest.
Premium
Inscrit
28 Octobre 2012
Messages
1 153
J'aime
557
Points
4 798
Reply from RocKz Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #14
@RocKz , pourrais-tu mettre les liens de téléchargement pour ceux qui utilise Firefox, Explorer ou encore Opera ? ;)
( à part si cela n'est disponible que sur Chrome :) )
Il n'est disponible que sur Chrome malheureusement, désolé ;)
 
Dernière édition:

Eurotrap

Membre Premium
Premium
Inscrit
4 Juin 2013
Messages
1 302
J'aime
220
Points
4 386
Reply from Eurotrap Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #15
très bon tuto
 

EvaZeR

◤ComeBack◢
Premium
Inscrit
31 Mars 2012
Messages
2 581
J'aime
694
Points
4 691
Reply from EvaZeR Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #16
Excellente extension je recommande a tous et a toutes :) Merci pour le tutoriel :ok:
 

Arrow'

Banni
Premium
Inscrit
25 Décembre 2012
Messages
1 977
J'aime
313
Points
1 506
Reply from Arrow' Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #19
La flemme de lire mais merci :)
 

Fils De Destroy'

Membre Premium
Premium
Inscrit
8 Septembre 2013
Messages
1 624
J'aime
442
Points
908
Reply from Fils De Destroy' Forums généraux Informatique ⌨️ Windows : Tutoriel et Présentation de l'extension Stylebot #20
Fléme de tout lir x= j'ai juste le le titre Merci du partage
 


Haut