cafe.des-blogueurs.org_skin

Designs pour l’instance Mastodon Café des blogueurs https://cafe.des-blogueurs.org redistribué pour qui veut.

Previews

Dark (custom.css)

Light (springtime.css)

Avertissement

• Les sources de la variation "springtime" ne sont pas encore sur le dépôt.
• La variation "custom" n'est pas encore up-to-date avec la version stable de Mastodon (1.3.2).

Présentation

Pour le moment, il n’existe pas de système dans Mastodon qui permette à un utilisateur de personnaliser son interface. Le design dépend de l’administrateur (souvent c’est celui par défaut). Cette solution n’est pas idéale mais permet d’attendre patiemment que la personnalisation existe un jour.

Caractéristiques principales

• Layout fluide (prend toute la largeur de l’écran).
• Pas (dark) ou peu (light) d’espace entre les colonnes.
• Icône signalant un message privé ou direct très visible.
• Liens en couleur pour une meilleure visibilité.
• Distinction légère entre le texte courant et les @mentions.
• Dans la colonne des notifications, distinction plus marquée entre les notifications type bidule vous suit / bidule a boosté votre babil et les notifications de réponses / discussions.
• Côté admin : suppression de la hauteur fixe qui rendait inatteignables les liens en bas du sidebar ; un peu plus de place dans la partie droite ; palette dans les gris bleutés.

Mode d’emploi avec Stylish

Cette utilisation est pratique car elle vous permet de personnaliser l’affichage de l’instance de votre choix grâce à une extension pour votre navigateur favori.

1. Télécharger ce dépôt.
2. Installer Stylish (l’extension existe pour Firefox et Chrome). La version pour Chrome propose une vidéo pour expliquer l’installation.
3. Une fois l’extension installée, positionnez-vous sur votre page Mastodon.
4. Cliquer sur l’icône de Stylish (elle se trouve en principe dans la barre d’outils) et choisir «Créer un nouveau style» (avec l'extension pour Forefox il y a plusieurs choix, prendre celui qui indique l’url de votre instance).
5. Dans la fenêtre qui apparaît alors, copier-coller le contenu du fichier /public/custom.css (ou /public/sprintime.css). Si vous utilisez la version Firefox coller le tout juste avant la dernière accolade fermante.
6. Donnez un nom à ce style (pour Firefox le champ nom se situe sur la seconde des barres horizontales noires de la fenêtre).
7. Enregistrer grâce au bouton idoine de l'interface de Stylish (pas depuis le menu du navigateur !).
8. Votre instance est désormais dotée de son nouvel aspect.

Si vous connaissez un peu les CSS vous pouvez modifier directement des règles dans la fenêtre de Stylish. Si vous connaissez Sass vous pouvez le faire plus proprement en travaillant à partir du répertoire /dev/ du dépôt après l’avoir téléchargé.

On peut désactiver un style personnalisé depuis les préférences de l’extension.

Installation pour contribuer ou démarrer un nouveau design

Cloner ou forker ce dépôt, puis :

gem install sass 
gem install compass 

Compiler : se placer à la racine du dépôt, puis :

compass watch

Enjoy.

Tip 1

L’essentiel de la présentation de la page de l’utilisateur se trouve dans le fichier /dev/partials/_components.scss. J’ai commenté du mieux possible pour aider à repérer les zones concernées.

Tip 2

Je n’ai pas encore testé mais l’idée derrière la reprise et la réécriture du fichier des variables est qu’on devrait pouvoir customiser largement depuis ce fichier sans avoir à modifier les autres.

Licence

Auteur : Kozlika & contributors - Licence MIT