Stylus & Mastodon (fr)

Voici un rapide pas à pas pour montrer comment se servir de l'extension Stylus avec un site comme une instance Mastodon. (sachant que vous pouvez l'utiliser sur tous les sites que vous souhaitez).

Installation
Firefox
Chrome
Présentation
Utilisation avec Mastodon
méthode simple
méthode moins intuitive

préambule

Je souhaitais au début faire un tuto sur l'extension Sylish dont les fonctions sont exactement les mêmes que celles de Stylus, sauf que cette extension s'est récemment mise à merdouiller sur firefox, et que les objectifs de développement de l'extension sont devenus un peu "flous" (rachat par une entreprise et récolte de données de navigation, tout en fermant le code source...) Bref. Du coup j'ai changé pour Stylus qui est quasi identique, tout en respectant l'ouverture du code source et le respect de la vie privée. Mais vous pouvez très bien continuer à utiliser Stylish si vous préférez après tout...

Installation

Pour installer Stylus, il va déjà falloir aller récupérer l'extension sur le site approprié.
Avec Firefox, c'est simple, vous pouvez passer directement via la recherche d'extension du navigateur, même pas besoin d'aller sur le site de mozilla (sauf si vous désirez faire une installation offline et récupérer le fichier, mais à ce moment-là j'imagine que vous n'auriez pas besoin d'un pas à pas). Bref. Pendant que vous êtes dans firefox, utilisez le raccourci Ctrl+Shift+A (valable aussi bien sur linux que windows), cela ouvre un onglet sur la gestion des extensions ou "add-ons". Dans le champ de saisie en haut à droite, tapez Stylus, puis repérez-le dans la liste qui vous est proposée en résultat. Il ne vous reste plus qu'à cliquer sur le bouton "installer" qui se trouve en face, et normalement c'est tout bon !
Pour Chrome (ainsi que les autres navigateurs basés dessus, tels que vivaldi par ex), c'est un peu différent puisqu'il faut obligatoirement passer par le "chrome web store". Pour aller plus vite, je vous donne le lien direct vers l'extension, ça fera des étapes en moins. Une fois que vous avez cliqué sur le lien, vous n'avez plus qu'à installer l'extension en cliquant sur le bouton bleu en haut à droite. Ça y est, vous êtes paré !

Une fois installée, vous remarquerez qu'une petite icône s'est ajoutée dans l'interface de votre navigateur.

Présentation

Stylus est une extension qui permet de modifier le langage qui décrit une page sur un site web et qui est interprété par votre navigateur, mais uniquement sur votre ordinateur. En gros, vous allez pouvoir changer la mise en forme. Lorsque vous regardez un site, les langages utilisés pour cela sont principalement du html (et ses variantes) et du css, et c'est ce dernier qui va être utilisé dans Stylus. Rassurez-vous, plein de thèmes existent déjà pour un très grand nombre de sites, donc vous n'aurez pas à l'apprendre si vous n'en avez pas envie ! (en tout cas pas ici ;)

Utilisation avec Mastodon

Pour chercher des thèmes pour mastodon, il suffit d'aller sur le site suivant et entrer mastodon dans le champ de recherche en haut de la page. Les résultats que vous obtiendrez ont été créés par des utilisateurs d'autres instances, mais la plupart sont utilisables directement sans modifications. Pour voir plus de détails et installer un thème, cliquez sur la vignette qui vous intéresse Lorsque vous repérez un thème qui vous plaît, et s'il vous convient, cliquez sur le bouton bleu "install style".

(il se peut que le bouton "install style" soit remplacé par "install with stylish" et dans ce cas de figure il faut utiliser une autre méthode. Du coup on va voir 2 méthodes, la simple et celle qui l'est moins mais qui fonctionne toujours)

Vous pouvez bien sûr installer plusieurs styles si vous voulez en changer de temps en temps.

On va donc faire un pas à pas ensemble, en prenant un thème en exemple ( je pars du postulat que vous utilisez firefox, mais ça fonctionne également avec un navigateur comme vivaldi, chrome, etc)

Donc on se rend sur le site userstyles.org Ensuite, comme c'est pour l'exemple, plutôt que d'entrer mastodon dans le champ de recherche du haut, on va directement taper le nom du thème que j'ai choisi pour l'exemple : Mastodon theme eunivers Blue/White, puis vous cliquez sur la vignette intitulée "Mastodon theme eunivers Blue/White" dans les résultats.

Methode simple

Cliquer sur le bouton "install style"

Ensuite, valider en cliquant sur ok, puis vous devriez avoir un changement du bouton qui deviendra vert.

Ensuite, il faut opérer une petite modification qui consiste à ajouter l'adresse de l'instance sur laquelle vous voulez utiliser ce thème. (en l'occurrence, https://goofs.space). Pour ça, on va donc cliquer sur l'icône stylus puis sur "gérer les styles installés".

C'est dans cette fenêtre que vous voyez la liste des styles installés.

Comme théoriquement vous n'en avez encore installé aucun (si ce n'est pas le cas, que faites-vous ici ? ;), vous cliquez sur le seul disponible dans la liste, à savoir celui que nous venons d'installer : "Mastodon theme eunivers Blue/White"
Ensuite, pour rajouter l'adresse de l'instance, vous allez tout en bas de la page (là où vous voyez plein de lignes commençant par "url sur le domaine", et lorsque vous y êtes, vous cliquez sur le bouton "ajouter", tout à droite, puis vous sélectionnez "url commençant par", et enfin vous tapez https://goofs.space dans le champ de saisie.

Ensuite vous n'avez plus qu'à vérifier que la case "Activé" en haut de la colonne de gauche est bien cochée, puis cliquez sur le bouton "enregistrer". Et c'est tout ! Si vous retournez sur l'instance goofs.space, vous aurez alors une présentation complètement différente :) (pour ce thème pris en exemple, les modifications se limitent aux couleurs et ne touchent pas à la mise en forme des colonnes, mais c'est tout à fait possible !)

Notez que lorsqu'un style est actif sur un site, l'icône de Stylus change et devient plus voyante

Avouez que c'est plutôt cool et pas du tout compliqué ?

Methode moins intuitive

On va maintenant voir comment ça se passe lorsque le bouton d'installation n'est pas opérant sur un thème qui nous intéresse...

Remarque : si le bouton est inopérant, c'est peut-être parce que le thème n'a pas été maintenu par son créateur, et que peut-être que certaines mises en forme ne sont plus à jour avec les dernières versions de mastodon (par exemple). Aussi, si vous installez des thèmes que vous n'avez pas faits vous-même, il se peut que le rendu ne soit pas exactement comme sur la vignette de prévisualisation (couleur qui manque à certains endroits, etc.) Ça ne présente absolument aucuns risques, donc ne vous affolez pas, mais c'est juste pour que vous évitiez d'être déçu et que vous compreniez au cas où vous rencontreriez le problème.

Donc, en bas de la page, on clique sur le bouton "show css code", puis on clique dans le champ qui vient de s'ouvrir, et ensuite avec le bouton droit de la souris, on fait "sélectionner tout", puis "copier".

Maintenant on va aller coller ce code dans un nouveau "style" pour Stylus. Donc on clique sur l'icône de Stylus , puis "gérer les styles installés"

Dans l'onglet qui vient de s'ouvrir, vous cliquez sur le bouton "Créer un nouveau style" dans la colonne de droite. Donc, maintenant, on va pouvoir coller le code CSS qu'on a copié tout à l'heure, en cliquant sur le bouton "import" dans la colonne gauche, (sous "mozilla format" écrit en gras). Ensuite vous cliquez dans la fenêtre qui s'est ouverte, collez le code, et enfin cliquez sur le bouton "overwrite style" en bas de la fenêtre.

A partir de là, on rejoint la méthode simple, c'est à dire qu'il ne reste plus qu'à rajouter l'adresse de l'instance sur laquelle on veut utiliser ce thème. Donc je copie colle les indications précédentes :

Pour rajouter l'adresse de l'instance, vous allez tout en bas de la page (là où vous voyez plein de lignes commençant par "url sur le domaine", et lorsque vous y êtes, vous cliquez sur le bouton "ajouter", tout à droite, puis vous sélectionnez "url commençant par", et enfin vous tapez https://goofs.space dans le champ de saisie.

Ensuite vous n'avez plus qu'à vérifier que la case "Activé" en haut de la colonne de gauche est bien cochée, puis cliquez sur le bouton "enregistrer". Et c'est tout ! Si vous retournez sur l'instance goofs.space, vous aurez alors une présentation complètement différente :) (pour ce thème pris en exemple, les modifications se limitent aux couleurs et ne touchent pas à la mise en forme des colonnes, mais c'est tout à fait possible !)

Notez que lorsqu'un style est actif sur un site, l'icône de Stylus change et devient plus voyante

Et voilà !!

Précision

Lorsque vous créez un thème à partir de rien, il n'y a pas de ligne pour spécifier où appliquer le thème, donc le bouton "ajouter" n'existe pas. Il faut donc cliquer sur le bouton "précision" pour avoir la première ligne. Mais j'imagine que si vous vous lancez dans la création d'un thème par vous-même, cette étape ne vous aurait pas posé de problème quoi qu'il arrive :)

Le mot de la fin

Amusez-vous bien !

ps : I'll translate this tutorial in english as soon as I have some time, but feel free to do so and put it on your hosting space if you want to. Just let me know, to spare me a bit of time : no need to redo what has already been done ;)