Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
tutoriel:changer_arriere_plan_gdm [Le 19/10/2017, 21:28]
Roschan
tutoriel:changer_arriere_plan_gdm [Le 15/08/2021, 10:59] (Version actuelle)
Amiralgaby mise en avant du GDM 3.36
Ligne 1: Ligne 1:
-{{tag>Trusty Xenial ​fenêtre_de_connexion GNOME tutoriel ​BROUILLON}}+{{tag>Focal Bionic ​fenêtre_de_connexion GNOME tutoriel}}
  
 ---- ----
- 
-<note warning>​todo : 
-  * tester en vm neuve 
-  * sauter la recompilation en tentant de mettre dans le dossier directement 
-</​note>​ 
  
 ====== Personnaliser l'​arrière-plan de GDM ====== ====== Personnaliser l'​arrière-plan de GDM ======
Ligne 18: Ligne 13:
   * Avoir la version concernée par la partie que vous appliquez ;   * Avoir la version concernée par la partie que vous appliquez ;
   * Ne pas faire la moindre faute de frappe.   * Ne pas faire la moindre faute de frappe.
 +</​note>​
  
-Les mises à niveau, voire les mises à jour, risquent par ailleurs ​de réinitialiser ​vos configurations.</​note>​+<note important>​Les mises à jour de GNOME Shell vont systématiquement __réinitialiser__ ​vos configurations ​: il faudra alors les refaire.
  
-Depuis la version GNOME 3.16, les thèmes de GNOME Shell (et donc de GDM) sont stockés dans des fichiers binaires (au format gresource). Il va donc falloir extraire le thème de ce fichier, le modifier, puis le recompiler.+Cette manipulation n'aura pas un rendu adapté sur les configurations avec plusieurs écrans.</​note>​
  
 ===== Pré-requis ===== ===== Pré-requis =====
- +Ubuntu ​avec [[:GNOME]] en tant que gestionnaire de fenêtre.
-Ce tutoriel a été écrit et testé à partir d'​installations d'Ubuntu ​17.04 et 17.10 (GNOME Shell 3.24 et 3.26), les versions plus anciennes pourraient rencontrer des problèmes.+
  
 Les **droits d'​administrations** seront nécessaires afin d'​utiliser la commande [[:sudo]]. Les **droits d'​administrations** seront nécessaires afin d'​utiliser la commande [[:sudo]].
  
-L'​image à mettre en arrière-plan doit être au format ''​.png''​ (et si possible ne pas contenir de transparence).+L'​image à mettre en arrière-plan doit être au format ''​.png''​ (et si possible ne pas contenir de transparence). ​L'​image doit être assez sombre (au moins en son centre) pour que les informations affichées par dessus soient lisibles. 
 + 
 +<​note>​Pour connaître votre version de GDM tapez dans un [[:​terminal]]:​ <​code>​gdm3 --version</​code></​note>​
  
 ===== Remarques à propos du thème utilisé ===== ===== Remarques à propos du thème utilisé =====
  
-À partir d'​Ubuntu 17.10, le thème ​par défaut ​de GDM est modifié par les développeurs d'​Ubuntu afin d'​assurer une cohérence visuelle avec la session "​Ubuntu"​ par défaut((https://​didrocks.fr/​2017/​09/​11/​ubuntu-gnome-shell-in-artful-day-11/​)).+À partir d'​Ubuntu 17.10, le thème de GDM est modifié par les développeurs d'​Ubuntu afin d'​assurer une cohérence visuelle avec la session "​Ubuntu"​ par défaut((https://​didrocks.fr/​2017/​09/​11/​ubuntu-gnome-shell-in-artful-day-11/​)).
  
-<​note>​Si vous installez le paquet [[apt>​gnome-session]],​ il est possible de récupérer le thème par défaut "​gris-bleu"​ de GDM en lançant la commande suivante **en tant qu'​administrateur** :+<​note ​tip>Si vous installez le paquet [[apt>​gnome-session]],​ il est possible de récupérer le thème par défaut "​gris-bleu"​ de GDM en lançant la commande suivante **en tant qu'​administrateur** :
 <​code>​update-alternatives --config gdm3.css</​code>​ <​code>​update-alternatives --config gdm3.css</​code>​
-Choisissez alors ''​gnome-shell.css''​ en tapant le numéro adéquat. +Choisissez alors ''​gnome-shell.css''​ en tapant le numéro adéquat.</​note>​
-</​note>​+
  
-Dans les manipulations ​qui suivent, il est possible qu'il faille appliquer en tant qu'​administrateur les modifications à ''/​usr/​share/​gnome-shell/​theme/​ubuntu.css''​ (plutôt qu'à la copie de ''​gnome-shell.css''​). FIXME+En fonction de si vous utilisez (ou non) un thème GDM "​violet-orange", ​les manipulations ​vont différer :
  
-===== Extraire le thème utilisé ​=====+===== GDM 3.36 ==== 
 +==== Un script pour automatiser la modification de l'​écran de connexion ==== 
 +[[https://​github.com/​Amiralgaby/​ubuntu-change-gdm-background/​archive/​master.zip|Téléchargez le zip]] puis dézippez-le ou clonez le dépôt [[https://​github.com/​Amiralgaby/​ubuntu-change-gdm-background|ubuntu-change-gdm-background (GitHub)]].
  
-Pour extraire le thème par défaut, vous pouvez utiliser le script ​''​extractgst.sh''​ suivant :+L'aide d'utilisation des scripts se trouve dans le fichier README.md ou sur la page du dépôt ci-dessus.
  
-<file bash>#!/bin/sh+=== Ubuntu 20.04+ === 
 +Vous pouvez lancer le script sans paramètre, alors, si vous possédez [[:yad]] ou [[:zenity]] ils pourront être utilisés pour sélectionner l'​image via une boîte de dialogue graphique. 
 +Ainsi, il suffit de lancer la commande avec sudo : 
 +  sudo ./gdm-change-ubuntu20.04+
  
-workdir=${HOME} +=== Ubuntu 18.04+ === 
-if ! -d ${workdir}/​shell-theme ​]; then +Cette version utilise l'​outil de boîtes de dialogue ​[[:yad]] installez-le pour utiliser le script.
-  mkdir -p ${workdir}/​shell-theme +
-fi +
-gst=/​usr/​share/​gnome-shell/​gnome-shell-theme.gresource+
  
-for r in `gresource list $gst`; do +=== Cacher le filigrane === 
-        ​gresource extract $gst $r >​$workdir/${r#\/org\/​gnome\/​shell/​} +Sur l'​écran de connexion il y a un filigrane/logo "​Ubuntu"​.\\  
-done</file>+Il peut être caché avec l'​option ''​cache-filigrane''​. 
 +  sudo ./gdm-change-ubuntu20.04+ --cache-filigrane
  
-Exécutez ce script.+L'​image sera redemandée,​ vous pouvez refuser et aucun changement d'​arrière-plan ne sera effectué. 
 +<​note>​Ce filigrane appartient au thème [[:​plymouth]] il n'​apparaîtra plus durant la phase de démarrage si elle est en mode graphique.</​note>​ 
 +[[https://​askubuntu.com/​questions/​1150894/​how-to-remove-change-ubuntu-logo-in-the-loging-page-ubuntu-19-04|Comment enlever le logo ubuntu de l'​écran de connexion]] **(en)**.
  
-===== Modifier le thème =====+=== Restauration de l'​ancien ​thème === 
 +Une sauvegarde de l'​ancienne configuration est réalisée, pour la restaurer utilisez le même script que vous avez utilisé et ajoutez l'​option ''​restore''​. 
 +  sudo ./​gdm-change-ubuntu20.04+ --restore
  
-Après avoir exécuté le script, ouvrez le répertoire ''​shell-theme''​ créé dans votre dossier personnelVous devriez y trouver les fichiers du thème qui y ont été extraits.+===== Si votre GDM est violet-orange ===== 
 + 
 +| {{ :​tutoriel:​gdm:​personnalisation-3-26.png?​direct&​600 |Exemple de résultat obtenu}} | 
 +^ Exemple de résultat obtenu (GDM 3.26) ^
  
 ==== L'​image ==== ==== L'​image ====
 +Par défaut, l'​image utilisée par gdm est l'​image noise-texture.png du thème principal (par exemple /​usr/​share/​gnome-shell/​theme/​Yaru/​).
 +Il est possible de la remplacer par une autre, renommée (en mode administrateur. Avec [[:​Wayland]],​ vous pouvez accéder aux privilèges d'​administration dans [[:​Nautilus]] en faisant précéder le chemin de "​admin:"​) noise-texture.png et placée dans le répertoire du thème d'​origine mais il est tout à fait possible de pointer vers une autre image présente sur le disque.
  
-Renommer votre image de fond d'​écran en ''​noise-texture.png''​puis copiez-la dans le dossier ​''​shell-theme''​ (écrasez l'​ancienne version).+Dans l'​hypothèse où vous décidez ​de ne pas modifier ​noise-texture.png, ​passez à l'étape suivante une fois repérée l'image choisie (au format png comme rappelé ci-dessuset son chemin.
  
-==== Le fichier ​XML ====+==== Le fichier ​CSS ==== 
 +Pour personnaliser l'​affichage,​ vous devez intervenir en en tant qu'​administrateur dans le fichier ''​css''​ de gdm. Suivant les versions d'​Ubuntu,​ il peut s'agir de : 
 + 
 +^ Version ^ Nom du fichier ^ Remarque ^  
 +|  [[:​17.10]] ​ | /​usr/​share/​gnome-shell/​theme/​ubuntu.css ​ |   | 
 +|  [[:​18.04]] ​ | /​etc/​alternatives/​gdm3.css ​ |   | 
 +|  [[:​18.10]] ​ | /​etc/​alternatives/​gdm3.css ​ |   | 
 +|  [[:​19.04]] ​ | /​etc/​alternatives/​gdm3.css ​ | Ce fichier est également accessible par un lien symbolique dans le répertoire /​usr/​share/​gnome-shell/​theme/​ voire /​usr/​share/​gnome-shell/​theme/​Yaru/ ​ | 
 +|  [[:​19.04]] ​ | /​usr/​share/​gnome-shell/​theme/​gnome-shell.css | Selon les versions et les configurations,​ il faudra soit modifier ce fichier, soit le fichier gdm3.css. Testez les deux options. ​  | 
 + 
 +Avant toute intervention,​ réalisez une copie de secours du fichier ''​css''​ d'​origine. En cas de problème, vous pourrez ainsi rétablir le système dans son état d'​origine : 
 +  sudo cp /​etc/​alternatives/​gdm3.css /​etc/​alternatives/​gdm3.css.anc 
 + 
 +Vous devez éditer (avec un éditeur de texte, vim pour les amateurs de la ligne de commande mais gedit fait aussi bien les choses en mode graphique avec ''​sudo -H gedit /​etc/​alternatives/​gdm3.css''​) le fichier css pour faire correspondre (en remplaçant ''/​usr/​share/​backgrounds/​Aardvark_Wallpaper_Grey_4096x2304.png''​ par le chemin absolu de l'​image que vous avez choisie, ou par ''/​usr/​share/​gnome-shell/​theme/​noise-texture.png''​ si vous avez choisi de remplacer ce fichier par le votre) la section ''#​lockDialogGroup''​ à  : 
 + 
 +<file css>#​lockDialogGroup { 
 +  background: #2c001e url(file:///​usr/​share/​backgrounds/​Aardvark_Wallpaper_Grey_4096x2304.png);​ 
 +  background-repeat:​ no-repeat;​ 
 +  background-size:​ cover; 
 +  background-position:​ center; }</​file>​ 
 +   
 +<note important>​Il est important de bien veiller au respect de la syntaxe css et à remplacer ''​url(resource:''​ par ''​url(file:''​.</​note>​ 
 + 
 +<note help>Le "#​2c001e"​ correspond à la couleur, en hexadécimal,​ qui s'​affiche si l'​image est mal cadrée ou transparente,​ sa valeur (violet) n'est pas très importante ici. 
 +</​note>​ 
 + 
 +Si l'​option ''"​cover"''​ ne vous convient pas (image trop déformée),​vous devrez sans doute spécifier la résolution de GDM - ce n'est pas forcément celle de l'​image - avec le paramètre ci-dessous à intégrer dans la section ''#​lockDialogGroup''​ (bien sûr, [WIDTH] et [HEIGHT] sont à remplacer par vos valeurs) : 
 +<file css>​background-size:​ [WIDTH]px [HEIGHT]px;</​file>​ 
 + 
 + 
 +===== Si votre GDM est gris-bleu ===== 
 + 
 +| {{ :​tutoriel:​gdm:​personnalisation-3-24.png?​direct&​600 |Exemple de résultat obtenu}} | 
 +^ Exemple de résultat obtenu (GDM 3.24) ^ 
 + 
 +Depuis la version GNOME 3.16, les thèmes de GNOME Shell (et donc de GDM) sont par défaut stockés dans des fichiers binaires (au format gresource)((Ce comportement n'est pas présent avec la session "​Ubuntu",​ mais il impacte les sessions "​GNOME",​ notamment dans feu [[:Ubuntu GNOME]].)). On va extraire le thème de ce fichier, le modifier, puis le recompiler. 
 + 
 +==== Extraire le thème utilisé ==== 
 + 
 +Pour extraire le thème par défaut, vous pouvez utiliser le script ''​extractgst.sh''​ suivant : 
 + 
 +<code bash>#​!/​bin/​bash 
 +  
 +rsrc='​gnome-shell-theme.gresource'​ 
 +gst="/​usr/​share/​gnome-shell/​$rsrc"​ 
 +  
 +workdir="​$HOME/​shell-theme/​theme"​ 
 +xmlFile="​$workdir/​$rsrc.xml"​ 
 +  
 +test -d "​$workdir"​ || mkdir -p "​$workdir"​ 
 +  
 +cat <<eof >"​$xmlFile"​  
 +<?xml version="​1.0"​ encoding="​UTF-8"?>​ 
 +<​gresources>​ 
 +  <​gresource prefix="/​org/​gnome/​shell/​theme">​ 
 +eof 
 +  
 +while read -r file 
 +do 
 +    filename="​$(echo $file | sed '​s%/​org/​gnome/​shell/​theme/​%%g'​)"​ 
 +    echo " ​ <​file>​$filename</​file>"​ >>"​$xmlFile"​ 
 +    mkdir -p "​$workdir/​$(dirname $filename)"​ 
 +    gresource extract "​$gst"​ "​$file"​ >"​$workdir/​$filename"​ 
 +done < <​(gresource list "​$gst"​) 
 +  
 +cat <<eof >>"​$xmlFile"​ 
 +  </​gresource>​ 
 +</​gresources>​ 
 +eof 
 + 
 +</​code>​ 
 + 
 +Exécutez ce script. 
 + 
 +==== Modifier le thème ==== 
 +Après avoir exécuté le script, ouvrez le répertoire ''​shell-theme''​ créé dans votre dossier personnel. Vous devriez y trouver, dans un dossier ''​theme'',​ les fichiers du thème qui ont été extraits. 
 + 
 +=== L'​image === 
 +Renommer votre image de fond d'​écran en ''​noise-texture.png'',​ puis copiez-la dans le dossier ''​shell-theme''​ (écrasez l'​ancienne version).
  
-Ensuite ​vous devez créer, toujours dans ce répertoire,​ le fichier ''​gnome-shell-theme.gresource.xml'' ​avec le contenu suivant:+=== Le fichier XML === 
 +Ensuite, toujours dans ce répertoire, ​vous pouvez vérifier que le fichier ''​gnome-shell-theme.gresource.xml'' ​correspond au contenu suivant :
  
 <​code><?​xml version="​1.0"​ encoding="​UTF-8"?>​ <​code><?​xml version="​1.0"​ encoding="​UTF-8"?>​
Ligne 92: Ligne 179:
     <​file>​gnome-shell-high-contrast.css</​file>​     <​file>​gnome-shell-high-contrast.css</​file>​
     <​file>​logged-in-indicator.svg</​file>​     <​file>​logged-in-indicator.svg</​file>​
 +    <​file>​more-results.svg</​file>​
     <​file>​no-events.svg</​file>​     <​file>​no-events.svg</​file>​
     <​file>​no-notifications.svg</​file>​     <​file>​no-notifications.svg</​file>​
Ligne 113: Ligne 201:
 </​gresources></​code>​ </​gresources></​code>​
  
-Ensuite, ouvrez le fichier ​''​gnome-shell.css''​ pour vérifier que la section ''#​lockDialogGroup''​ correspond bien à :+=== Le fichier ​CSS ===
  
-==== Le fichier ​CSS ====+Ouvrez le fichier ​''​gnome-shell.css''​ pour vérifier que la section ''#​lockDialogGroup''​ correspond bien à :
  
 <file css>#​lockDialogGroup { <file css>#​lockDialogGroup {
-  background: #2e3436 url(noise-texture.png);​+  background: #2e3436 url(resource:///​org/​gnome/​shell/​theme/​noise-texture.png);​
   background-repeat:​ no-repeat;   background-repeat:​ no-repeat;
 }</​file>​ }</​file>​
  
-<note help>Le "#​2e3436"​ correspond à la couleur, en hexadécimal,​ qui s'​affiche si l'​image est mal cadrée ou transparente,​ sa valeur n'est pas très importante ici.+<note help>Le "#​2e3436"​ correspond à la couleur, en hexadécimal,​ qui s'​affiche si l'​image est mal cadrée ou transparente,​ sa valeur ​(gris) ​n'est pas très importante ici.
 </​note>​ </​note>​
  
Ligne 128: Ligne 216:
 <file css>​background-size:​ [WIDTH]px [HEIGHT]px;</​file>​ <file css>​background-size:​ [WIDTH]px [HEIGHT]px;</​file>​
  
-==== Compiler ​====+=== Compiler ===
  
-Enfin, ouvrez un terminal pour recompiler votre thème avec les commandes suivantes : +Enfin, ouvrez un terminal pour recompiler votre thème avec les commandes suivantes ​(libglib2.0-dev doit être installé) ​
-<​code>​cd ~/​shell-theme+<​code>​cd ~/​shell-theme/theme/
 glib-compile-resources gnome-shell-theme.gresource.xml</​code>​ glib-compile-resources gnome-shell-theme.gresource.xml</​code>​
  
 <note help> <note help>
-Si la compilation renvoie une erreur à propos de ''​more-results.svg'', ​ajoutez ​la ligne suivante ​au milieu ​du fichier XML précédemment créé : +Si la compilation renvoie une erreur à propos de ''​more-results.svg'', ​retirez ​la ligne suivante du fichier XML précédemment créé : 
-<​code> ​   <​file>​more-results.svg</​file></​code>​+<​code><​file>​more-results.svg</​file></​code>​
 Puis recompilez. Puis recompilez.
 </​note>​ </​note>​
  
-===== Mettre le thème en place =====+==== Mettre le thème en place ====
  
-Il ne vous reste plus qu'​à ​copier dans ''/​usr/​share/​gnome-shell''​ le ficher ​''​gnome-shell-theme.gresource''​ qui vient de se créer. +Il ne vous reste plus qu'​à ​déplacer vers ''/​usr/​share/​gnome-shell''​ le fichier ​''​gnome-shell-theme.gresource''​ qui vient de se créer. 
-<note important>​Il est pertinent ​de faire une copie de sauvegarde de son thème par défaut avant d'​écraser le fichier d'​origine :+<note important>​Il est prudent ​de faire une copie de sauvegarde de son thème par défaut avant d'​écraser le fichier d'​origine :
 <​code>​cp /​usr/​share/​gnome-shell/​gnome-shell-theme.gresource ~/​shell-theme/​gnome-shell-theme.gresource.old</​code>​ <​code>​cp /​usr/​share/​gnome-shell/​gnome-shell-theme.gresource ~/​shell-theme/​gnome-shell-theme.gresource.old</​code>​
 </​note>​ </​note>​
-<​code>​sudo mv ~/​shell-theme/​gnome-shell-theme.gresource /​usr/​share/​gnome-shell</​code>​ +<​code>​sudo mv ~/shell-theme/theme/​gnome-shell-theme.gresource /​usr/​share/​gnome-shell</​code>​
- +
-===== Redémarrer ===== +
- +
-Les modifications prendront effet au redémarrage de l'​ordinateur.+
  
 ===== Voir aussi ===== ===== Voir aussi =====
Ligne 158: Ligne 242:
   * [[:GDM]]   * [[:GDM]]
   * **(en)** [[https://​didrocks.fr/​2017/​09/​11/​ubuntu-gnome-shell-in-artful-day-11/​|À propos du thème par défaut à partir de 17.10]]   * **(en)** [[https://​didrocks.fr/​2017/​09/​11/​ubuntu-gnome-shell-in-artful-day-11/​|À propos du thème par défaut à partir de 17.10]]
 +  * **(en)** [[https://​www.ostechnix.com/​how-to-change-gdm-login-screen-background-in-ubuntu/​|How To Change GDM Login Screen Background In Ubuntu]]
 +  * **(en)** [[http://​ubuntuhandbook.org/​index.php/​2017/​10/​change-login-screen-background-ubuntu-17-10/​|How to Change Login Screen Background in Ubuntu 17.10]]
 +  * **(en)** [[http://​c-nergy.be/​blog/?​p=11550|Ubuntu 17.10 – Change login Background]]
  
 ---- ----
  
-//​Contributeurs principaux : [[:​utilisateurs:​J5012]],​ [[:​utilisateurs:​claudiux]],​ [[:​utilisateurs:​deobs]],​ [[:​utilisateurs/​roschan]]+//​Contributeurs principaux : [[:​utilisateurs:​J5012]],​ [[:​utilisateurs:​claudiux]],​ [[:​utilisateurs:​deobs]],​ [[:​utilisateurs/​roschan]], [[:​utilisateurs:​Amiralgaby]]
 , ...// , ...//
  
  • tutoriel/changer_arriere_plan_gdm.1508441305.txt.gz
  • Dernière modification: Le 19/10/2017, 21:28
  • par Roschan