Tutoriel Créez / importez des styles avec Stylish !

[Maxence²]

Créez ou importez des styles avec Stylish
Complete Tutorial​

[tabs]
[tab=Informations concernant ce tutoriel]▪ Temps de lecture : 20 minutes
▪ Difficulté : 3 / 5
▪ Tutoriel proposé par la RGPC, écrit par RGPC | Maxence
▪ Tutoriel réalisé sur Firefox: concernant l'outil de développement, cela sera différent.
[/tab]
[/tabs]

Salut à vous !
Aujourd'hui, nouveau tutoriel en zone premium pour la simple et bonne raison qui va être énorme ! Je vais vous expliquer comment créer, importer des styles avec Stylish !

Tout d'abord, c'est quoi ?
Stylish est un addon ( opéra, firefox, chrome ) qui permettra de modifier l'apparence d'un site et le faire partager aux autres

Vous pouvez soit télécharger les styles des autres ou créer le votre... Plaisant non ?

• Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
• Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
  (moi il ne marche pas, erreur serveur)
• Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

______________________________________​

Pour importer un style Stylish il faut simplement... en trouver un.
On va aller sur le site

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

(on est sur d'avoir des styles).

En haut à droite au menu Stylish vous cliquez sur "Trouver des styles pour ce style".

​

Vous tomberez

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

.
Puis, sélectionnez-en un, puis cliquez sur Install with Stylish.

​

Vous aurez cette page:

​

Vous cliquez sur Installer et le tour est jouer.

______________________________________​

​

Maintenant nous allons créer un thème. Je vous met en garde dès l'instant présent...

Pour créer des thèmes, vous devez avoir des notions de CSS (le style), savoir bien l'utiliser (les bases suffisent). Sinon, vous n'allez pas comprendre.
​

Pour commencer, nous allons choisir un site : je ne vais pas en sélectionner un autre que ! Imaginons que nous voulons modifier son style , alors nous allons créer un nouveau style. Où ?

Dans le logo en haut à droite, cliquez sur Créer un nouveau thème > Pour reality-gaming.fr :

Vous tomberez sur cette fenêtre :

​

Votre "centre de contrôle" sera ici. Vous devrez écrire le CSS ici. Comment savoir quoi écrire ? En utilisant l'outil de développement ! Par exemple, je veux modifier ça:

Et je veux le mettre en violet ( purple ).
Alors je vais faire click droit sur l'interface (bleue) > examiner l'élément.

​

Comme je l'ai dit vous devez vous y connaître en CSS pour comprendre ^^
Mais pour faire simple : vous sélectionnez le div qui correspond à ce que vous voulez modifier !

Puis sur la droite, vous avez une petite fenêtre et à partir de ce moment vous pouvez modifier ce que vous voulez. Par exemple:

​

Ce qui donnera

​

Nickel, c'est ce qu'on voulait !
Maintenant, comment importer le style ? Et bien tout simplement, copiez le code comme ceci:

​

(c'est censé être bleu )
Et vous l'incluez dans cette fenêtre :

​

Et vous "enregistrer"

______________________________________

Ce tutoriel est maintenant terminé. Chaque style peut si vous le souhaitez être partagé , seulement en partageant le code. C'est simple d'utilisation.

J'espère que le tutoriel vous aura plu
En espérant vous avoir aider

Maxence ​

 

[Lupo -]

Merci j'ai déjà cherché comment faire mais j'ai jamais trouvé, vraiment merci !

 

[Maxence²]

Merci j'ai déjà cherché comment faire mais j'ai jamais trouvé, vraiment merci !

Aucun problème

 

[MOoDziiK ✔]

Créez ou importez des styles avec Stylish
Complete Tutorial​

[tabs]
[tab=Informations concernant ce tutoriel]▪ Temps de lecture : 20 minutes
▪ Difficulté : 3 / 5
▪ Tutoriel proposé par la RGPC, écrit par RGPC | Maxence
▪ Tutoriel réalisé sur Firefox: concernant l'outil de développement, cela sera différent.
[/tab]
[/tabs]

Salut à vous !
Aujourd'hui, nouveau tutoriel en zone premium pour la simple et bonne raison qui va être énorme ! Je vais vous expliquer comment créer, importer des styles avec Stylish !

Tout d'abord, c'est quoi ?
Stylish est un addon ( opéra, firefox, chrome ) qui permettra de modifier l'apparence d'un site et le faire partager aux autres

Vous pouvez soit télécharger les styles des autres ou créer le votre... Plaisant non ?

• Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
• Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
  (moi il ne marche pas, erreur serveur)
• Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

______________________________________​

Pour importer un style Stylish il faut simplement... en trouver un.
On va aller sur le site

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

(on est sur d'avoir des styles).

En haut à droite au menu Stylish vous cliquez sur "Trouver des styles pour ce style".

​

Vous tomberez

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

.
Puis, sélectionnez-en un, puis cliquez sur Install with Stylish.

​

Vous aurez cette page:

​

Vous cliquez sur Installer et le tour est jouer.

______________________________________​

​

Maintenant nous allons créer un thème. Je vous met en garde dès l'instant présent...

Pour créer des thèmes, vous devez avoir des notions de CSS (le style), savoir bien l'utiliser (les bases suffisent). Sinon, vous n'allez pas comprendre.
​

Pour commencer, nous allons choisir un site : je ne vais pas en sélectionner un autre que ! Imaginons que nous voulons modifier son style , alors nous allons créer un nouveau style. Où ?

Dans le logo en haut à droite, cliquez sur Créer un nouveau thème > Pour reality-gaming.fr :

Vous tomberez sur cette fenêtre :

​

Votre "centre de contrôle" sera ici. Vous devrez écrire le CSS ici. Comment savoir quoi écrire ? En utilisant l'outil de développement ! Par exemple, je veux modifier ça:

Et je veux le mettre en violet ( purple ).
Alors je vais faire click droit sur l'interface (bleue) > examiner l'élément.

​

Comme je l'ai dit vous devez vous y connaître en CSS pour comprendre ^^
Mais pour faire simple : vous sélectionnez le div qui correspond à ce que vous voulez modifier !

Puis sur la droite, vous avez une petite fenêtre et à partir de ce moment vous pouvez modifier ce que vous voulez. Par exemple:

​

Ce qui donnera

​

Nickel, c'est ce qu'on voulait !
Maintenant, comment importer le style ? Et bien tout simplement, copiez le code comme ceci:

​

(c'est censé être bleu )
Et vous l'incluez dans cette fenêtre :

​

Et vous "enregistrer"

______________________________________

Ce tutoriel est maintenant terminé. Chaque style peut si vous le souhaitez être partagé , seulement en partageant le code. C'est simple d'utilisation.

J'espère que le tutoriel vous aura plu
En espérant vous avoir aider

Maxence ​

Encore un super TUTO !
Grave bien je vais pouvoir changer la couleur du fond du forum
Mais il faut le refaire à chaque fois qu'on se reconnecte ?

 

[Maxence²]

Encore un super TUTO !
Grave bien je vais pouvoir changer la couleur du fond du forum
Mais il faut le refaire à chaque fois qu'on se reconnecte ?

Non, en haut à droite tu peux activer/désactiver stylish ! Et tous les designs sont enregistrés !
Et non, ce n'est pas pour changer genre une couleur mais tu peux modifier tout le CSS si tu le souhaites !

 

[MOoDziiK ✔]

Non, en haut à droite tu peux activer/désactiver stylish ! Et tous les designs sont enregistrés !
Et non, ce n'est pas pour changer genre une couleur mais tu peux modifier tout le CSS si tu le souhaites !

C'est super ! merci beaucoup à toi

 

[Pierre']

beau tuto