Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Wiki
Pages
Dernière activité
Quoi de neuf
Nouveaux messages
Nouveaux articles
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Magasin
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Plateformes
PC et Serveurs
Windows
Tutoriel et Présentation de l'extension Stylebot
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="RocKz" data-source="post: 2257188" data-attributes="member: 182149"><p>Salut tout le monde,</p><p></p><p style="text-align: center">Avez-vous déjà eu envi d'avoir une page comme celle-ci ? <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /> <img src="http://image.noelshack.com/fichiers/2013/45/1383588102-capture-d-ecran-2013-11-04-a-19-00-49.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>Aujourd'hui je vous fait ce topic, pour vous montrer une extension Google Chrome, qui se nomme <strong>Stylebot</strong>.</p><p></p><p>Au début vous allez me dire, "<em><strong>C'est quoi ça ? <img src="/data/assets/smilies/mmh.gif" class="smilie" loading="lazy" alt=":mmh:" title="Mmh :mmh:" data-shortname=":mmh:" /></strong></em>". <strong>Stylebot</strong>, c'est une extension vraiment utile, pour ceux qui veulent personnalisés leur sites a leur guises.</p><p></p><p>Là vous allez me dire "<em><strong>WOW ! Comment ça !? <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite129" alt=":d:" title="Regard de travers :d:" loading="lazy" data-shortname=":d:" /></strong></em>".</p><p></p><p>Donc comme je vous l'ai expliquer plus haut, vous allez pouvoir "<em>customiser</em>" votre site, et en plus, très simplement.</p><p>Pour les connaisseurs en <strong>HTML</strong>, Stylebot sert enfaite, a modifier le <strong>.CSS</strong> de votre page, et ça, même quand vous la refresherais, et dans n'importe quel onglet de la page <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite351" alt=";)" title="Clin d'oeil ;)" loading="lazy" data-shortname=";)" /></p><p></p><p>Si cela vous intéresse, voici le lien de téléchargement: <a href="https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha" target="_blank">https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha</a></p><p></p><p>Une fois l'installation faite, vous aurez ceci dans votre barre de navigation: <img src="http://i.imgur.com/VbelwHo.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> (tout à droite)</p><p></p><p>Une fois installé, vous pouvez vous rendre sur la page que vous voulez customiser, en l'occurence pour ce topic, j'ai choisi <img src="/images/smileys/smiley-rg.svg" class="smilie" loading="lazy" alt=":RG:" title="RG :RG:" data-shortname=":RG:" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p><p>Lorsque vous serrez sur votre page, cliquez sur l'icône où il y a marquer <strong>CSS</strong>, puis sur <strong>Open Stylebot</strong>.</p><p></p><p>Une fenêtre devrait s'ouvrir sur le droite de votre page: <img src="http://image.noelshack.com/fichiers/2013/45/1383589321-capture-d-ecran-2013-11-04-a-19-21-12.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>Une fois cette petite fenêtre ouverte, il faut que le gris en haut soit présenté de cette manière:<img src="http://i.imgur.com/XSboYTd.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p>Avec la case en bleu, et le menu déroulant sur "<strong>Select an element</strong>".</p><p></p><p>Après être sur cette configuration, sélectionnez la zone sur laquelle vous désirez modifier le fichier <strong>.CSS</strong> de la page, comme ceci, en l'occurence pour moi, je prend la <strong>Notice</strong> comme exemple <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" />:<img src="http://i.imgur.com/nnv0K2N.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>Vous y verrez un <strong>encadrement <span style="color: #b3b300">vert</span></strong>, 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 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" />.</p><p></p><p>Vous devriez avoir ça: <img src="http://image.noelshack.com/fichiers/2013/45/1383589421-capture-d-ecran-2013-11-04-a-19-23-11.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>Cette <strong>première</strong> colonne, vous serviras a modifier la police et l'apparence du texte présent sur la zone sélectionnée: <img src="http://i.imgur.com/mrwftcx.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>Cette <strong>deuxième</strong> colonne, vous serviras a modifier la couleur et le fond de la zone sélectionnée: <img src="http://i.imgur.com/LbE8JPx.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>Cette <strong>troisième</strong> colonne, vous serviras a modifier le contour de la zone sélectionnée: <img src="http://i.imgur.com/5PPttT6.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>Cette <strong>quatrième</strong> et dernière <strong>colonne</strong>, vous servira a éditer toute la zone sélectionnée, mais en une seule fois: <img src="http://i.imgur.com/hOxG0Df.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>Une fois votre personnalisation faite, vous pourrez admirer votre travail <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></p><p></p><p>Si vous avez mit quelque chose que vous ne vouliez pas mettre, vous pourrez cliquer sur "<strong><em>Undo</em></strong>", pour remettre votre page comme elle était, vous pourrez cliquer sur "<strong><em>Reset</em></strong>" ou "<strong><em>Reset Page</em></strong>", pour éditer manuellement vous même le <strong>.CSS</strong> de la page, cliquez sur "<strong><em>Edit CSS</em></strong>" ou sur "<strong><em>Advenced</em></strong>".</p><p><img src="http://image.noelshack.com/fichiers/2013/45/1383590804-capture-d-ecran-2013-11-04-a-19-43-05.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>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 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p><p></p><p>Si c'est le cas n'oubliez pas l'évaluation positive <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p><p></p><p>Bonne customisation, et bonne fin de journée à tous ! <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></p></blockquote><p></p>
[QUOTE="RocKz, post: 2257188, member: 182149"] Salut tout le monde, [CENTER]Avez-vous déjà eu envi d'avoir une page comme celle-ci ? :) [IMG]http://image.noelshack.com/fichiers/2013/45/1383588102-capture-d-ecran-2013-11-04-a-19-00-49.png[/IMG][/CENTER] Aujourd'hui je vous fait ce topic, pour vous montrer une extension Google Chrome, qui se nomme [B]Stylebot[/B]. Au début vous allez me dire, "[I][B]C'est quoi ça ? :mmh:[/B][/I]". [B]Stylebot[/B], c'est une extension vraiment utile, pour ceux qui veulent personnalisés leur sites a leur guises. Là vous allez me dire "[I][B]WOW ! Comment ça !? (d)[/B][/I]". Donc comme je vous l'ai expliquer plus haut, vous allez pouvoir "[I]customiser[/I]" votre site, et en plus, très simplement. Pour les connaisseurs en [B]HTML[/B], Stylebot sert enfaite, a modifier le [B].CSS[/B] 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: [URL]https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha[/URL] Une fois l'installation faite, vous aurez ceci dans votre barre de navigation: [IMG]http://i.imgur.com/VbelwHo.png[/IMG] (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 [B]CSS[/B], puis sur [B]Open Stylebot[/B]. Une fenêtre devrait s'ouvrir sur le droite de votre page: [IMG]http://image.noelshack.com/fichiers/2013/45/1383589321-capture-d-ecran-2013-11-04-a-19-21-12.png[/IMG] Une fois cette petite fenêtre ouverte, il faut que le gris en haut soit présenté de cette manière:[IMG]http://i.imgur.com/XSboYTd.png[/IMG] Avec la case en bleu, et le menu déroulant sur "[B]Select an element[/B]". Après être sur cette configuration, sélectionnez la zone sur laquelle vous désirez modifier le fichier [B].CSS[/B] de la page, comme ceci, en l'occurence pour moi, je prend la [B]Notice[/B] comme exemple :):[IMG]http://i.imgur.com/nnv0K2N.png[/IMG] Vous y verrez un [B]encadrement [COLOR=#b3b300]vert[/COLOR][/B], 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: [IMG]http://image.noelshack.com/fichiers/2013/45/1383589421-capture-d-ecran-2013-11-04-a-19-23-11.png[/IMG] Cette [B]première[/B] colonne, vous serviras a modifier la police et l'apparence du texte présent sur la zone sélectionnée: [IMG]http://i.imgur.com/mrwftcx.png[/IMG] Cette [B]deuxième[/B] colonne, vous serviras a modifier la couleur et le fond de la zone sélectionnée: [IMG]http://i.imgur.com/LbE8JPx.png[/IMG] Cette [B]troisième[/B] colonne, vous serviras a modifier le contour de la zone sélectionnée: [IMG]http://i.imgur.com/5PPttT6.png[/IMG] Cette [B]quatrième[/B] et dernière [B]colonne[/B], vous servira a éditer toute la zone sélectionnée, mais en une seule fois: [IMG]http://i.imgur.com/hOxG0Df.png[/IMG] 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 "[B][I]Undo[/I][/B]", pour remettre votre page comme elle était, vous pourrez cliquer sur "[B][I]Reset[/I][/B]" ou "[B][I]Reset Page[/I][/B]", pour éditer manuellement vous même le [B].CSS[/B] de la page, cliquez sur "[B][I]Edit CSS[/I][/B]" ou sur "[B][I]Advenced[/I][/B]". [IMG]http://image.noelshack.com/fichiers/2013/45/1383590804-capture-d-ecran-2013-11-04-a-19-43-05.jpg[/IMG] 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 [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Plateformes
PC et Serveurs
Windows
Tutoriel et Présentation de l'extension Stylebot
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut