orgmode-to-gemini-blog/sources/cipherbliss_blog/lang_fr/20190214T123525__faire-son-propre-theme-mastodon.org

:PROPERTIES:
:ID: 4f70c658-5835-4740-aaa7-a03b6f351ac1
:END:

#+title: faire-son-propre-theme-mastodon
#+post_ID: 1178
#+post_slug: faire-son-propre-theme-mastodon
#+post_url: https://www.ciperbliss.com/2019/faire-son-propre-theme-mastodon
#+post_title: Faire son propre thème Mastodon
#+post_tags: mastodon, theming, custom, scss
#+post_type: post
#+post_mime_types: 
#+post_guid: undefined
#+post_status: publish
#+post_date_published: <2019-02-14T12:35:25>
#+post_date_modified: <2019-02-18T16:12:40>
#+post_index_page_roam_id: fa7f2a8c-2b94-4e42-bb4c-25c026ed7ff9
#+retrieved_from_db_at: <2024-11-18 16:25:08>


* Faire son propre thème Mastodon
:PROPERTIES:
:CUSTOM_ID: faire-son-propre-thème-mastodon
:END:
  Personnaliser son instance
Mastodon c'est fort simple,

** facile: CSS personnalisé
:PROPERTIES:
:CUSTOM_ID: facile-css-personnalisé
:END:
on peut rajouter du css personnalisé dans l'interface
d'administration.naviguez dans "espace perso">
"administration" > "paramètres du site" pour ajouter des éléments
graphiques, changer l'image d'accueil, un logo, une vignette, la
description du site, mettre des emoji personnalisés, tout ça tout
ça.sur votre instance ce sera à l'addresse
*votresite.com/admin/settings/edit*[[https://mastodon.cipherbliss.com/system/site_uploads/files/000/000/003/original/logo_clair.png?1545082425]]

** Faire son thème perso
:PROPERTIES:
:CUSTOM_ID: faire-son-thème-perso
:END:
Mais on peut aussi développer complètement son propre
thème en surchargeant les fichiers au bon endroit, en relançant la
compilation des fichiers pour le frontend, et en relançant les services
qui font tourner Mastodon.Pour s'amuser on peut
commencer par modifier juste les variables de couleur en scss, changer
la taille de base des colonnes, changer les
icones.Vous pouvez aussi proposer plusieurs thèmes
que vos utilisateurs vont voir dans leurs préférences, par exemple chez
witches.town, une instance lgbt-amicale propose les sources de
[[https://github.com/Sylvhem/witches-town-theme][son thème à installer
ici]].[[https://github.com/Sylvhem/witches-town-theme/raw/master/screenshoot.png]]Mais
il ya tout un tas de
possibilités.[[https://open-time.net/public/screenshots/2018/mastodon-themes.jpg]]

[[https://framablog.org/wp-content/uploads/2018/02/Screenshot-2018-2-18-Framapiaf-e1519000913745-768x440.png]]

[[https://raw.githubusercontent.com/trwnh/mastodon-flat-css/master/screenshots/mfc-flamingo.png]]J'ai
donc réalisé
[[https://portfolio.cipherbliss.com/page/mastodon-template][une page
dynamique qui vous permet de générer votre propre feuille de style
custom.scss]] qui modifie
[[https://github.com/tootsuite/mastodon/blob/master/app/javascript/styles/mastodon/variables.scss][les
variables par défaut]] à ajouter à votre installation
mastodon.[caption id="attachment_1188"
align="aligncenter"
width="620"][[https://portfolio.cipherbliss.com/page/mastodon-template][https://www.cipherbliss.com/wp-content/uploads/2019/02/screenshot-portfolio.cipherbliss.com-2019.02.18-15-56-16-1024x590.png]]
éditeur de couleurs de thème Mastodon par
cipherbliss[/caption]

*** Comment ça marche ?
:PROPERTIES:
:CUSTOM_ID: comment-ça-marche
:END:
cliquez sur les sélecteurs de couleurs et le style
scss sera mis à jour en temps réel en dessous ( dans le bloc grisé
).Vous n'aurez plus qu'à copier ces variables pour
les mettre dans votre fichier de styles durant l'installation de votre
thème personnalisé:

** Comment installer votre thème personnalisé
:PROPERTIES:
:CUSTOM_ID: comment-installer-votre-thème-personnalisé
:END:
dans votre installation, créez le fichier
*custom.scss* et collez votre style personnalisé
dedans.


#+begin_example
cd /home/mastodon/liveeditor app/javascript/styles/custom.scss
#+end_example

modifiez le fichier
=config/themes.yml=afin qu'il
contienne=default: styles/custom.scss=pour
prendre en compte votre style custom.il sera pris en
compte au redémarrage des services de mastodon.Si
vous vous y connaissez en ReactJS vous pourrez modifier les templates.

il sera donc pratique de faire tourner un serveur de dev local avec
webpack.


*** Installer plusieurs thèmes
:PROPERTIES:
:CUSTOM_ID: installer-plusieurs-thèmes
:END:
modifiez =config/themes.yml=et
rajoutez une ligne par thème, qui renverra vers une feuille de style
chacun. il faut obligatoirement avoir un thème par défaut indiqué avec
le mot clé "default".


#+begin_example
default: styles/awesome_theme.scssmastodon: styles/application.scssanother: style/another_theme.scss
#+end_example


Vous pouvez changer le nom du thème dans le fichier
de
traductions.=config/locales/fr.yml=et
mettez le nom que vous voulez pour chaque thème

#+begin_example
themes:  default: "Le Thème trop génial"  mastodon: "Mastodon par défaut"  another: "Un autre thème"
#+end_example



*** Lien vers le code source
:PROPERTIES:
:CUSTOM_ID: lien-vers-le-code-source
:END:
Mastodon étant distribué sous licence AGPL, il faut
fournir les sources aux utilisateurs, donc il convient d'héberger votre
feuille de style à un endroit publique et de mettre un lien vers ce
thème sur votre instance Mastodon.pour cela, créez un
fichier =config/initializers/source.rb=, et personnalisez les liens dans
les sections =/about= et =/about/more= :

#+begin_example
editor config/initializers/source.rb
#+end_example



#+begin_example
# frozen_string_literal: truemodule Mastodon  module Version    module_function    def source_base_url      'https://framagit.org/VOTRE_COMPTE/VOTRE_PROJET'    end  endend
#+end_example


 Et par ici
[[https://github.com/tootsuite/documentation/blob/master/Running-Mastodon/Customizing.md][pour
la doc officielle de personnalisation de thème
mastodon.]]have fun!