up paths

sources/cipherbliss_blog/lang_fr/20190214T123525__faire-son-propre-theme-mastodon.org

@@ -0,0 +1,152 @@
+
+: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! 
+