orgmode-to-gemini-blog/gemini-capsules/non_trié/20190214123525_cipherbliss_180_faire-son-propre-theme-mastodon.gmi

# Faire son propre thème Mastodon

Personnaliser son instance Mastodon c'est fort simple,

## facile: CSS personnalisé

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 le logo de CipherBliss sur mon instance mastodon [IMG]
{.aligncenter width="155" height="167"}

## Faire son thème perso

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 [IMG]
{.alignnone width="430" height="242"}Mais il ya tout un tas de possibilités.
=> https://open-time.net/public/screenshots/2018/mastodon-themes.jpg [IMG]
{.alignnone width="419" height="249"}
=> https://framablog.org/wp-content/uploads/2018/02/Screenshot-2018-2-18-Framapiaf-e1519000913745-768x440.png [IMG]
{.alignnone width="432" height="247"}
=> https://raw.githubusercontent.com/trwnh/mastodon-flat-css/master/screenshots/mfc-flamingo.png [IMG]
{.alignnone width="850" height="468"}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 [IMG]
{.size-large .wp-image-1188 width="620" height="357"}
 éditeur de couleurs de thème Mastodon par cipherbliss[/caption]

### Comment ça marche ?

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é

dans votre installation, créez le fichier **custom.scss** et collez votre style personnalisé dedans.

```
cd /home/mastodon/liveeditor app/javascript/styles/custom.scss
```

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

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".

::: {.highlight .highlight-source-yaml} 

```
default: styles/awesome_theme.scssmastodon: styles/application.scssanother: style/another_theme.scss
```

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

::: {.highlight .highlight-source-yaml} 

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



### Lien vers le code source

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` :

```
editor config/initializers/source.rb
```



::: {.highlight .highlight-source-ruby} 

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

 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!

# Métadonnées

  :PROPERTIES: :ID: 6af1b2f3-faaa-4461-8004-0ee28d0c0631 :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_type: post #+post_mime_types:  #+post_guid: 
=> https://www.cipherbliss.com/?p=1178
 #+post_status: publish #+post_date_published: <2019-02-14 12:35:25> #+post_date_modified: <2019-02-18 16:12:40> #+post_index_page_roam_id: [[id:1b454ab3-53f0-411f-94e6-d488718dee27][undefined]] #+retrieved_from_db_at: <2024-11-07 22:57:06>   ::: ::: :::