Merge pull request 'MAJ Tuto Thèmes dans Gitea : Ajour de la possibilité pour chaque utilisateur le chaner le thème' (#48 ) from miles-gitea-2 into master

Reviewed-on: #48
Ajout des liens corrects pour les images...
2021-04-05 14:45:49 +02:00 · 2021-04-05 13:27:52 +02:00 · 2021-04-05 13:23:44 +02:00
12 changed files with 323 additions and 14 deletions
--- a/docker-compose/gitea/Changer
+++ b/docker-compose/gitea/Changer
@ -1,19 +1,33 @@
 Changer le thème de Gitea <!-- omit in toc -->
 ============
+---
+> :pencil2: **Mise à jour :** Ajout de la possibilité de changer le style dans le menu `Configuration / Comptes / Sélectionner le thème par défaut` pour les thèmes Gitea de [theme.park](https://github.com/gilbN/theme.park/wiki/Gitea). <br>
+*Voir* [*§ 2. Ajouter les différents thèmes en laissant le choix à l'utilisateur*](#2-ajouter-les-différents-thèmes-en-laissant-le-choix-à-lutilsateur)
+---

- [1. Trouver un thème sympa](#1-trouver-un-thème-sympa)
- [2. Installer le thème](#2-installer-le-thème)
- [3. Exemple avec le dernier lien du dépôt donnée précédemment](#3-exemple-avec-le-dernier-lien-du-dépôt-donnée-précédemment)
-  - [3.1. Changer le thème](#31-changer-le-thème)
+:arrow_forward: Vous pouvez trouver quelques thèmes ici : https://gitea.com/gitea/awesome-gitea#themes

-# 1. Trouver un thème sympa
+:book: Dans la suite de ce tuto, on ne parlera que des thèmes Gitea de [theme.park](https://github.com/gilbN/theme.park/wiki/Gitea).

-Ce dépôt contient quelques thèmes : https://gitea.com/gitea/awesome-gitea#themes
+## Sommaire <!-- omit in toc -->
+- [1. Modifier le thème sans laisser le choix à l'utilisateur](#1-modifier-le-thème-sans-laisser-le-choix-à-lutilisateur)
+  - [1.1. Installer le thème](#11-installer-le-thème)
+  - [1.2. Exemple avec le dernier lien du dépôt donnée précédemment](#12-exemple-avec-le-dernier-lien-du-dépôt-donnée-précédemment)
+    - [1.2.1. Installer le thème (imposé pour tous)](#121-installer-le-thème-imposé-pour-tous)
+    - [1.2.2. Changer le thème](#122-changer-le-thème)
+- [2. Ajouter les différents thèmes en laissant le choix à l'utilisateur](#2-ajouter-les-différents-thèmes-en-laissant-le-choix-à-lutilisateur)
+  - [2.1. Création des dossiers dans `/volume1/docker/gitea/data/`](#21-création-des-dossiers-dans-volume1dockergiteadata)
+  - [2.2. Télécharger les différents css](#22-télécharger-les-différents-css)
+  - [2.3. Création du fichier `header.tmpl`](#23-création-du-fichier-headertmpl)
+  - [2.4. Modification du fichier `/data/gitea/conf/app.ini`](#24-modification-du-fichier-datagiteaconfappini)
+    - [2.4.1. Point info sur la modification de ce fichier](#241-point-info-sur-la-modification-de-ce-fichier)
+    - [2.4.2. Ce qu'il faut ajouter au fichier `/data/gitea/conf/app.ini`](#242-ce-quil-faut-ajouter-au-fichier-datagiteaconfappini)
+    - [2.4.3. Redémarrer le conteneur](#243-redémarrer-le-conteneur)
+  - [2.5. Choisir son thème dans l'interface graphique de Gitea](#25-choisir-son-thème-dans-linterface-graphique-de-gitea)

-Choisir le thème voulu.
+# 1. Modifier le thème sans laisser le choix à l'utilisateur

-
-# 2. Installer le thème
+## 1.1. Installer le thème

 Il faut vérifier si la variable GITEA_CUSTOM a été paramétrée. En temps normal, ce n'est pas le cas.

@ -33,7 +47,9 @@ Il faudra alors créer les dossiers suivants :

 Puis il faudra suivre les instructions du thème choisi. Pour ceux qui n'auraient pas d'instructions, le fichier `styles.css` devra se trouver dans le dossier `public`.

-# 3. Exemple avec le dernier lien du dépôt donnée précédemment
+## 1.2. Exemple avec le dernier lien du dépôt donnée précédemment
+
+### 1.2.1. Installer le thème (imposé pour tous)

 Je vais prendre le dernier lien donné dans le dépôt du [paragraphe #1](#1-trouver-un-thème-sympa) :

@ -66,7 +82,7 @@ Il faut créer deux fichiers :
 ```
 Une fois les fichiers créés et placés dans ces dossiers (faire attention aux permissions), il suffit de redémarrer Gitea (ou le conteneur si installation en Docker).

-## 3.1. Changer le thème
+### 1.2.2. Changer le thème

 Pour changer le thème, il suffit de :

@ -74,4 +90,81 @@ Pour changer le thème, il suffit de :
 - redémarrer Gitea ;
 - ne pas oublier de vider le cache du navigateur... sinon le nouveau thème ne sera pas visible... (ça m'a pris 15 minutes d'essais et au bout de ce temps l'utilisation d'un autre navigateur pour le comprendre...).

-Voilà :)
+---
+---
+
+# 2. Ajouter les différents thèmes en laissant le choix à l'utilisateur
+
+> :memo: Cette partie devrait être compatible avec d'autres thèmes qui n'apportent qu'un seul fichier `.css`. ***À confirmer...***
+
+## 2.1. Création des dossiers dans `/volume1/docker/gitea/data/`
+
+- Il faut vérifier si la variable GITEA_CUSTOM a été paramétrée. En temps normal, ce n'est pas le cas.
+
+- Si ce n'est pas le cas, on peut aller vérifier le chemin qui est paramétré pour le dossier dit CUSTOM de gitea. Pour celà, il faut aller ici : 
+`https://url-de-votre-gitea.tlds/admin/config`
+
+- Puis chercher la ligne `GITEA_CUSTOM` où apparaîtra le chemin d'accès : `/data/gitea`.
+
+- Dans le cas d'une installation Docker, ça donnerait ceci : `/docker/gitea/data/gitea`
+ <br>(voir le fichier **docker-compose.yml** pour le chemin d'accès avant le `/data/gitea`)
+
+- Il faudra alors créer les dossiers suivants :
+
+  - `public`
+  - `public/css`
+  - `templates`
+  - `templates/custom`
+
+## 2.2. Télécharger les différents css
+
+- Télécharger les différents thèmes .css ici : https://github.com/gilbN/theme.park/tree/master/CSS/themes/gitea.
+*(Ne pas les renommer.)*
+- Placer ces fichiers dans le dossier `...public/css` créé précédemment.
+
+## 2.3. Création du fichier `header.tmpl`
+
+- Créer le fichier `header.tmpl` et l'enregistrer dans le dossier `.../templates/custom/` créé précédemment.
+```html
+<link rel="stylesheet" href="{{AppSubUrl}}/css/{{DefaultTheme}}.css">
+<link rel="stylesheet" href="{{AppSubUrl}}/css/{{.SignedUser.Theme}}.css">
+```
+
+## 2.4. Modification du fichier `/data/gitea/conf/app.ini`
+
+### 2.4.1. Point info sur la modification de ce fichier
+
+Pour modifier ce fichier, il se peut que vous n'ayez pas les permissions d'enregistrer les modifications apportées... Il faudra alors le copier ailleurs, faire les modifications et sauvegarder, puis re-copier dans l'autre sens le fichier dans son dossier d'origine.
+
+C'est ce que je dois faire. Depuis une ligne de commande SSH, je fais :
+- Je copie le fichier dans un dossier où mon utilisateur Admin à les droits en écriture (je ne me logue pas avec l'utilisateur choisir pour Gitea) : <br>`cp /volume1/docker/gitea/data/gitea/conf/app.ini /volume1/docker/gitea/`
+- Je modifie et sauvegarde mon fichier...
+- puis je copie en retour le fichier modifier : `cp /volume1/docker/gitea/app.ini /volume1/docker/gitea/data/gitea/conf/`
+- Il faut ensuite relancer le conteneur Gitea avec Portainer/DSM ou en CLI :  `docker restart gitea`
+
+### 2.4.2. Ce qu'il faut ajouter au fichier `/data/gitea/conf/app.ini`
+
+Il faut ajouter ceci au fichier `app.ini` :
+
+```ini
+[ui]
+THEMES        = gitea,arc-green,plex,aquamarine,dark,hotline,organizr-dark,space-gray
+DEFAULT_THEME = arc-green
+```
+> :memo: Note : Il se peut que la section `[ui]` soit déjà présente dans votre `app.ini`, il faudra alors modifier la ligne `THEMES`.
+
+### 2.4.3. Redémarrer le conteneur
+
+Il faut bien penser à redémarrer le conteneur.
+
+## 2.5. Choisir son thème dans l'interface graphique de Gitea
+
+![](https://gitea.zoz-serv.org/Zoz/plex_fr_discord_repo/raw/branch/miles-gitea-2/docker-compose/gitea/tuto-1.png)
+
+![](https://gitea.zoz-serv.org/Zoz/plex_fr_discord_repo/raw/branch/miles-gitea-2/docker-compose/gitea/tuto-2.png)
+
+![](https://gitea.zoz-serv.org/Zoz/plex_fr_discord_repo/raw/branch/miles-gitea-2/docker-compose/gitea/tuto-3.png)
+
+---
+
+Voilà, c'est la fin :D
--- a/docker-compose/gitea/data--gitea/public/css/aquamarine.css
+++ b/docker-compose/gitea/data--gitea/public/css/aquamarine.css
@ -0,0 +1,35 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* GITEA AQUAMARINE THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css);
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/chroma.css);
+:root {
+  --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --button-color: #009688;
+  --button-color-hover: #12afa0;
+  --button-text: #eee;
+  --accent-color:  #12afa0;
+  --accent-color-hover: #fff;
+  --text: #eee;
+  --text-hover: #fff;
+  --text-muted: #bbb;
+  --link-color: #12afa0;
+
+  --heatmap-color-1: #002D24;
+  --heatmap-color-2: #004B40;
+  --heatmap-color-3: #006B5F;
+  --heatmap-color-4: #008C7E; 
+  --heatmap-color-5: #12AFA0;
+}
--- a/docker-compose/gitea/data--gitea/public/css/dark.css
+++ b/docker-compose/gitea/data--gitea/public/css/dark.css
@ -0,0 +1,35 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* GITEA DARK THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css);
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/chroma.css);
+:root {
+  --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
+  --button-color: hsla(0,0%,100%,.15);
+  --button-color-hover: hsla(0,0%,100%,.30);
+  --button-text: #eee;
+  --accent-color:  #646464;
+  --accent-color-hover: #ffffff73;
+  --text: #b7b7b7;
+  --text-hover: #fff;
+  --text-muted: #bbb;
+  --link-hover: rgba(255, 255, 255, 0.45);
+
+  --heatmap-color-1: #303030;
+  --heatmap-color-2: #5E5E5E;
+  --heatmap-color-3: #919191;
+  --heatmap-color-4: #C6C6C6; 
+  --heatmap-color-5: #FFFFFF;
+}
--- a/docker-compose/gitea/data--gitea/public/css/hotline.css
+++ b/docker-compose/gitea/data--gitea/public/css/hotline.css
@ -0,0 +1,35 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* GITEA HOTLINE THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css);
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/chroma.css);
+:root {
+  --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
+  --button-color: hsla(0,0%,100%,.15);
+  --button-color-hover: hsla(0,0%,100%,.30);
+  --button-text: #eee;
+  --accent-color:  #F44336;
+  --accent-color-hover: #0b3161;
+  --text: #eee;
+  --text-hover: #fff;
+  --text-muted: #bbb;
+  --link-hover: #F44336;
+
+  --heatmap-color-1: #690000;
+  --heatmap-color-2: #890000;
+  --heatmap-color-3: #AC0002;
+  --heatmap-color-4: #D0191D; 
+  --heatmap-color-5: #F44336;
+}
--- a/docker-compose/gitea/data--gitea/public/css/organizr-dark.css
+++ b/docker-compose/gitea/data--gitea/public/css/organizr-dark.css
@ -0,0 +1,35 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* GITEA ORGANIZR-DARK THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css);
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/chroma.css);
+:root {
+  --main-bg-color: #1f1f1f;
+  --modal-bg-color: #1b1b1b;
+  --button-color: #2cabe3;
+  --button-color-hover: rgb(44 171 227 / .8);
+  --button-text: #eee;
+  --accent-color:#2cabe3;
+  --accent-color-hover: #fff;
+  --text: #96a2b4;
+  --text-hover: #fff;
+  --text-muted: #bbb;
+  --link-color: #2cabe3;
+
+  --heatmap-color-1: #002A57;
+  --heatmap-color-2: #004878;
+  --heatmap-color-3: #00679A;
+  --heatmap-color-4: #0088BE; 
+  --heatmap-color-5: #2CABE3;
+}
--- a/docker-compose/gitea/data--gitea/public/css/plex.css
+++ b/docker-compose/gitea/data--gitea/public/css/plex.css
@ -0,0 +1,35 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/* 			      https://github.com/gilbN/theme.park			 */
+
+/* GITEA PLEX THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css);
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/chroma.css);
+:root {
+  --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;
+  --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed;
+  --button-color: #cc7b19;
+  --button-color-hover: #e59029;
+  --button-text: #eee;
+  --accent-color:  #e5a00d;
+  --accent-color-hover: #ffc107;
+  --text: #eee;
+  --text-hover: #fff;
+  --text-muted: #bbb;
+  --link-color:#fff;
+
+  --heatmap-color-1: #492000;
+  --heatmap-color-2: #6E4500;
+  --heatmap-color-3: #9B6C00;
+  --heatmap-color-4: #CC9500; 
+  --heatmap-color-5: #FFC107;
+}
--- a/docker-compose/gitea/data--gitea/public/css/space-gray.css
+++ b/docker-compose/gitea/data--gitea/public/css/space-gray.css
@ -0,0 +1,36 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* GITEA SPACE GRAY THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css);
+@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/chroma.css);
+:root {
+  --main-bg-color:  radial-gradient( ellipse at center,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed;
+  --modal-bg-color: radial-gradient( ellipse at top,  rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; 
+  --button-color: #607D8B;
+  --button-color-hover: #81a6b7;
+  --button-text: #eee;
+  --accent-color: #81a6b7;
+  --accent-color-hover: #81a6b7;
+  --text: #eee;
+  --text-hover: #fff;
+  --text-muted: #bbb;
+  --link-color: #81a6b7;
+
+  --heatmap-color-1: #002634;
+  --heatmap-color-2: #1D4352;
+  --heatmap-color-3: #3E6272;
+  --heatmap-color-4: #5F8394; 
+  --heatmap-color-5: #81A6B7;
+  
+}
--- a/docker-compose/gitea/data--gitea/public/styles.css
+++ b/docker-compose/gitea/data--gitea/public/styles.css
@ -7,4 +7,4 @@
                    space-gray.css      <--- TOP, mon préféré !
                    organizr-dark.css
 */
-@import url("https://gilbn.github.io/theme.park/CSS/themes/gitea/plex.css");
+@import url("https://gilbn.github.io/theme.park/CSS/themes/gitea/space-gray.css");
--- a/docker-compose/gitea/data--gitea/templates/custom/header.tmpl
+++ b/docker-compose/gitea/data--gitea/templates/custom/header.tmpl
@ -1 +1,6 @@
-<link rel="stylesheet" href="{{AppSubUrl}}/styles.css">
+<!--
+// Copie de la méthode d'installation qui ne laisse aucun choix à l'utilisateur
+<link rel="stylesheet" href="{{AppSubUrl}}/styles.css">
+-->
+<link rel="stylesheet" href="{{AppSubUrl}}/css/{{DefaultTheme}}.css">
+<link rel="stylesheet" href="{{AppSubUrl}}/css/{{.SignedUser.Theme}}.css">
--- a/docker-compose/gitea/tuto-1.png
+++ b/docker-compose/gitea/tuto-1.png
--- a/docker-compose/gitea/tuto-2.png
+++ b/docker-compose/gitea/tuto-2.png
--- a/docker-compose/gitea/tuto-3.png
+++ b/docker-compose/gitea/tuto-3.png
Author	SHA1	Message	Date
Zoz	e0b040de2d	Merge pull request 'MAJ Tuto Thèmes dans Gitea : Ajour de la possibilité pour chaque utilisateur le chaner le thème' (#48 ) from miles-gitea-2 into master Reviewed-on: #48	2021-04-05 14:45:49 +02:00
MilesTEG	19794c0423	Ajout des liens corrects pour les images... Je ne sais pas faire de lien avec des chemins relatifs au chemin du fichier .md ... Si quelqu'un sait faire je suis preneur.	2021-04-05 13:27:52 +02:00
MilesTEG	a97f054502	MAJ Tuto Thèmes dans Gitea : Ajour de la possibilité pour chaque utilisateur le chaner le thème PS : une autre modif arrivera quand les images seront uploadées...	2021-04-05 13:23:44 +02:00