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édentesRévision précédente
Prochaine révision
Révision précédente
applications:personnalisation:gdm [Le 03/11/2006, 18:30] 86.219.18.156applications:personnalisation:gdm [Le 25/02/2007, 10:48] (Version actuelle) – Déplacée vers http://doc.ubuntu-fr.org/gdm thedamocles
Ligne 1: Ligne 1:
-====== 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 : 
-  * [[http://art.gnome.org/themes/gdm_greeter/|Gnome Art]] 
-  * [[http://www.gnome-look.org/index.php?xcontentmode=150|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'[[installation:ecran_de_connexion|article de présentation dédié à GDM]] 
- 
- 
- 
- 
-===== Localisation du thème ===== 
-Les thèmes de gdm sont stockés dans le dossier "/usr/share/gdm/themes/". 
-Chaque thème contient un fichier [[gdm#Le fichier GdmGreeterTheme.desktop|"GdmGreeterTheme.desktop"]] et un fichier [[gdm#Le fichier ".xml"|".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 ===== 
-Le fichier GdmGreeterTheme.desktop contient les informations sur le thème. 
- 
-Exemple de fichier GdmGreeterTheme.desktop: 
-<code>[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</code> 
- 
-  * Encoding correspond à l'encodage de votre fichier xml. 
- 
-  * Greeter correspond au fichier xml qu'utilisera Gdm (voir [[gdm#le fichier ".xml"|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 [[gdm#Tester son theme|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" ===== 
- 
-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 ;-) 
- 
-==== Le minimum vital ==== 
- 
-<code><?xml version="1.0" encoding="UTF-8"?> 
-<!DOCTYPE greeter SYSTEM "greeter.dtd"> 
-<greeter> 
- 
-<!-- éléments à afficher --> 
- 
-</greeter></code> 
- 
-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. 
- 
-==== La base ==== 
-Quelques conseils pour commencer : 
- 
-  -  Indenter le code! 
-  -  Faire des sections précises en utilisant les commentaires 
-  -  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 ==== 
-<code> 
-<!-- background --> 
-  <item type="pixmap"> 
-    <normal file="background.png"/> 
-    <pos y="0" x="0" width="100%" height="100%"/> 
-  </item> 
-</code> 
- 
-Le type "pixmap" est utilisé pour les images au format png,jpg,jpeg. 
- 
-<code> 
-<!-- background --> 
-  <item type="svg"> 
-    <normal file="background.svg"/> 
-    <pos x="50%" y="0" width="100%" height="-75"/> 
-  </item> 
-</code> 
- 
-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. 
- 
-<code> 
-<!-- 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> 
-</code> 
- 
-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 : 
-  - <normal /> : "au repos" 
-  - <prelight /> : survol de la souris 
-  - <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 : [[http://fr.wikipedia.org/wiki/Aide:Couleurs/table_détaillée|Tableau des couleurs]] 
- 
- 
- 
- 
- 
-===== Tester un thème  ===== 
- 
-GDM inclut un testeur de thème appelé //gdmthemetester//. Ce programme a deux paramètres: l'environnement dans lequel tester le thème et le nom du thème à tester. 
- 
-Dans cet exemple on utilisera l'environnement Xnest. Ainsi, //gdmthemetester// va afficher une fenêtre contenant GDM. 
- 
-**Note**: Xnest permet de lancer un serveur X dans une fenêtre, il a bien d'autres utilisations.  
- 
-La commande est : 
-<code>gdmthemetester xdmcp ubuntu-fr</code> 
- 
-**Note**: xdmcp correspond à l'environnement Xnest mais d'autres environnements sont disponibles. Lancez gdmthemetester sans paramètre pour en savoir plus ou consultez [[http://http://www.gnome.org/projects/gdm/docs/2.16/thememanual.html|la doc en anglais]] 
- 
-**Note**: La résolution de la fenêtre Xnest est 800x600 par défaut. Pour choisir une résolution différente il faut, au préalable, modifier la variable d'environnement XNESTSIZE. 
-<code>export XNESTSIZE=1024x768</code> 
- 
- 
- 
-===== Publier un thème  ===== 
- 
-Pour publier un thème, il suffit de créer une archive contenant le dossier du thème. 
- 
-Par exemple, on va créer l'archive pour notre thème ubuntu-fr dans le répertoire courant : 
- 
-<code>tar czvf ubuntu-fr.tar.gz /usr/share/gdm/themes/ubuntu-fr/</code> 
- 
- 
-**A completer**\\ 
-Screenshots détaillés\\ 
-Description exacte de chacune des balises du fichier xml\\  
-Corrections/améliorations\\