Personnaliser son thème GDM

De nombreux thèmes sont déjà disponibles sur internet, mais il se peut que vous ayiez envie de vous lancer dans la création (ou la modification) d'un thème pour GDM.

Avant toute chose, prenez le temps de visiter ces sites :

• Gnome Art
• Gnome-Look

Vous y trouverez peut-être un thème correspondant parfaitement à vos besoins, un thème à modifier ou des idées pour votre futur thème

Si vous avez des questions sur GDM en général, lisez l'article de présentation dédié à GDM

Les thèmes de gdm sont stockés dans le dossier "/usr/share/gdm/themes/". Chaque thème contient un fichier "GdmGreeterTheme.desktop" et un fichier ".xml" au minimum.

Le dossier du thème contient également les images utilisées, celles-ci sont appelées dans le fichier xml.

En général il y a un fond (background), un écran de login (login) et une capture d'écran (screenshot). Il n'y a pas vraiment de règles pour le nommage de ces fichiers, mais les noms mis entre parathèses sont les plus courants.

Le fichier GdmGreeterTheme.desktop contient les informations sur le thème.

Exemple de fichier GdmGreeterTheme.desktop:

[GdmGreeterTheme]
Encoding=UTF-8
Greeter=ubuntu-fr.xml
Name=Ubuntu-fr
Name[fr]=Ubuntu-fr
Description=Ubuntu-fr's Gdm theme
Description[fr]=Le thème Gdm d'Ubuntu-fr
Author=Ubuntu-fr's community
Author[fr]=La communauté Ubuntu-fr
Copyright=GPL Ubuntu-fr.org
Copyright[fr]=GPL Ubuntu-fr.org
Screenshot=screenshot.png

• Encoding correspond à l'encodage de votre fichier xml.

• Greeter correspond au fichier xml qu'utilisera Gdm (voir Le fichier ".xml").

• Name, Description, Author et Copyright sont les informations sur votre thème

• Screenshot correspond à une capture d'écran de votre thème en action (voir Tester son theme).

Note: Si la résolution du screenshot est différente de 200x150, il sera redimensionné automatiquement lors de l'affichage dans "gdmsetup". Faites donc en sorte de faire un screenshot en 4:3 pour que l'affichage soit joli.

Note: Comme dans tous les .desktop, il est possible de localiser les informations en ajoutant le suffixe [langue] (où langue est à remplacer par le descripteur de la langue de destination). Pour voir la liste complète des traductions courantes, regardez un des fichiers .desktop dans votre répertoire de thème gdm (/usr/share/gdm/themes).

Le fichier xml contient des balises standards (assez peu pratiques) correspondant aux différents éléments de l'écran de login. Cet article sera complété afin de détailler chacune des balises disponibles.

Le minimum vital tient dans un mouchoir de poche, sachez ne pas vous limiter à ce minimum

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE greeter SYSTEM "greeter.dtd">
<greeter>

<!-- éléments à afficher -->

</greeter>

Dans l'absolu, cette présentation (à compléter avec les éléments à afficher bien entendu) est suffisante. Cependant, il existe des normes qui permettent de faire un fichier xml propre, clair et réutilisable.

Quelques conseils pour commencer :

1. Indenter le code!
2. Faire des sections précises en utilisant les commentaires
3. Minimiser le nombre de balises utilisées

Pour indenter : il suffit d'ajouter un espacement (1/2/3/4 espaces ou une tabulation) après chaque ouverture de balise et d'enlever un espacement équivalent après chaque fermeture de balise.

Pour commenter : on utilise "<!–" pour ouvrir le commentaire et "–>" pour le fermer. Les sections courantes (données dans un ordre quelconque) sont :

• Background (l'image en fond d'écran)
• Login (l'image de l'écran de login)
• Clock (l'horloge)
• Login (le contenu de l'écran de login : Bienvenue,Labels et champs de saisie)
• Options (les options permettant de choisir la langue, la session, etc)
• Erreurs (verr.maj activé, erreur de login ou mot de passe, etc)

Ces sections sont données à titre indicatif. L'essentiel est que vous délimitiez vos sections précisément.

Voyons enfin quelques exemples de contenu pour vous aider à comprendre et à façonner votre fichier xml.

<!-- background -->
  <item type="pixmap">
    <normal file="background.png"/>
    <pos y="0" x="0" width="100%" height="100%"/>
  </item>

Le type "pixmap" est utilisé pour les images au format png,jpg,jpeg.

<!-- background -->
  <item type="svg">
    <normal file="background.svg"/>
    <pos x="50%" y="0" width="100%" height="-75"/>
  </item>

Le type "svg" est utilisé pour les images au format svg (image vectorielle).

Notez les différentes façon de spécifier la position et la hauteur : en valeur absolue ou en pourcentage (il en existe bien d'autres, surement trop d'ailleurs). Le pourcentage permet une adaptabilité à différentes résolutions. En effet, le pourcentage est fonction de la taille ou de la position de l'élément englobant. Dans le cas du fond d'écran, 100% correspond à "occupe toute la place disponible sur l'écran".

Cette exemple est compliqué (mais complet), n'hésitez pas à faire des aller/retour entre le code la description (située en-dessous du code). L'essentiel est de saisir la notion de réactivité d'un élément.

<!-- options -->
  <item type="rect" id="options_button" button="true">
    <pos y="50%" width="box" height="box" anchor="w"/>
    <box xpadding="0" spacing="2" orientation="horizontal">
      <item type="pixmap">
        <normal file="icon-session.png"/>
        <prelight file="icon-session-prelight.png"/>
        <active file="icon-session-active.png"/>
      </item>
      <item type="label">
        <normal font="Bitstream Vera Sans 11" color="#ffffff"/>
        <prelight font="Bitstream Vera Sans 11" color="#ff9c36"/>
        <active font="Bitstream Vera Sans 11" color="#dc292b"/>
        <pos y="50%" anchor="w"/>
        <stock type="options"/>
      </item>
    </box>
  </item>

Premièrement, l'id d'un élément correspond à un code prédéfini et reconnu par Gdm. Dans une prochaine révision de cet article, les différents id seront présentés.

Ensuite, le placement est réalisé de façon un peu "fouilli". Malheureusement c'est souvent le cas. On voit un florilège d'attributs (anchor, spacing, xpadding, orientation, x) aux valeurs tout aussi diverses.

Passons ces remarques, l'intérêt de cet exemple est le triplet de balises correspondant à l'état de l'élément :

1. <normal /> : "au repos"
2. <prelight /> : survol de la souris
3. <active /> : clic de souris

Dans ces trois états, on peut spécifier la taille et le type de la police (font="") et sa couleur (color="#") ou alors l'image à afficher. La couleur est donnée en hexadécimal, voir ce lien : Tableau des couleurs

Pour tester un thème, on va se servir de Xnest. Ce outil permet de lancer un serveur X à l'intérieur d'un serveur X et va donc pouvoir afficher l'écran de connexion de GDM. On fera une capture de cette fenètre.

GDM inclut un testeur de thème appelé gdmthemetester, ce programme prend en argument deux choses: l'environnement dans lequel on va tester le thème et le nom du thème à tester.

Pour essayer le thème nommé ubuntu-fr dans une fenêtre Xnest la commande sera :

gdmthemetester xdmcp ubuntu-fr

Note: La résolution de la fenêtre Xnest est 800x600 par défaut. Pour choisir une résolution différente il faut modifier la variable d'environnement XNESTSIZE.

export XNESTSIZE=1024x768

Article à compléter : Publication d'un thème sous la forme d'une archive installable
Screenshots détaillés
Description exacte de chacune des balises du fichier xml
Corrections/améliorations
Section "pour tester son theme"