Ajout d'un tuto pour changer le thème de Gitea.

Plusieurs thèmes sont disponibles, lire les consignes du fichier Changer le Thème de Gitea.md et les commentaires du fichier styles.css.
This commit is contained in:
MilesTEG 2021-04-04 18:23:55 +02:00
parent 626316c0de
commit 61193239f8
3 changed files with 88 additions and 0 deletions

View File

@ -0,0 +1,77 @@
Changer le thème de Gitea <!-- omit in toc -->
============
- [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)
# 1. Trouver un thème sympa
Ce dépôt contient quelques thèmes : https://gitea.com/gitea/awesome-gitea#themes
Choisir le thème voulu.
# 2. 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.
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 : <br>
`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`
- `templates`
- `templates/custom`
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
Je vais prendre le dernier lien donné dans le dépôt du [paragraphe #1](#1-trouver-un-thème-sympa) :
> - [theme.park](https://github.com/gilbN/theme.park/wiki/Gitea) - A theme suite for Gitea.
Sur ce nouveau dépôt ( https://github.com/gilbN/theme.park/wiki/Gitea ) vous trouverez plusieurs thèmes.
Je trouve les thèmes plex, dark et space-gray relativement sympas.
Des captures sont présentes plus bas dans la page : https://github.com/gilbN/theme.park/wiki/Gitea#screenshots
Il faut créer deux fichiers :
- `public/styles.css` qui contient (avec des commentaires perso) :
```css
/* Source : https://github.com/gilbN/theme.park/wiki/Gitea
Possibilités : https://gilbn.github.io/theme.park/CSS/themes/gitea/XXX.css
aquamarine.css <--- pas terrible
hotline.css
plex.css <--- TOP
dark.css <--- TOP
space-gray.css <--- TOP
organizr-dark.css
*/
@import url("https://gilbn.github.io/theme.park/CSS/themes/gitea/plex.css");
```
- `templates/custom/header.tmpl` qui contient :
```html
<link rel="stylesheet" href="{{AppSubUrl}}/styles.css">
```
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
Pour changer le thème, il suffit de :
- modifier le `public/styles.css` avec le nom du css désiré ;
- 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à :)

View File

@ -0,0 +1,10 @@
/* Source : https://github.com/gilbN/theme.park/wiki/Gitea
Possibilités : https://gilbn.github.io/theme.park/CSS/themes/gitea/XXX.css
aquamarine.css <--- Pas mal celui .
hotline.css
plex.css <--- TOP
dark.css <--- TOP
space-gray.css <--- TOP, mon préféré !
organizr-dark.css
*/
@import url("https://gilbn.github.io/theme.park/CSS/themes/gitea/plex.css");

View File

@ -0,0 +1 @@
<link rel="stylesheet" href="{{AppSubUrl}}/styles.css">