Cette page n'a pas encore d'étiquettes.
Apportez votre aide…

Ceci est une ancienne révision du document !


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 quelques sites :

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 ;-)

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.

Note: Les images peuvent être au format svg, nous verrons plus loin l'influence de l'extension de l'image sur la balise associée dans le fichier xml.

GdmGreeterTheme.desktop

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
Description=Ubuntu-fr's Gdm theme
Author=Ubuntu-fr's community
Copyright=GPL Ubuntu-fr.org
Screenshot=screenshot.png
  • Encoding correspond à l'encodage de votre fichier xml.
  • Greeter correspond au fichier xml qu'utilisera Gdm (le greeter c'est Gdm).
  • Name, Description, Author et Copyright sont les informations sur votre thème

Les informations sont affichées dans "gdmsetup".

Remarque importante: Il est possible de localiser les paramètres, c'est utile si vous prévoyez de rendre public votre thème et que vous vous souciez de l'internationalisation de celui-ci. Il est de bon ton de rendre disponible un maximum de traductions. Pour voir la liste complète des traductions courantes, regardez un des fichiers .desktop dans votre répertoire de thème gdm.

Par exemple, en modifiant le fichier GdmGreeterTheme.desktop précédent:

[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

Le fichier .xml

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.

  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.

La taille et le positionnement

  
<!-- 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".

La réaction au survol et au clic

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 état, 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 : http://fr.wikipedia.org/wiki/Aide:Couleurs/table_détaillée

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

  • applications/personnalisation/gdm.1162555369.txt.gz
  • Dernière modification: Le 18/04/2011, 14:47
  • (modification externe)