Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
applications:personnalisation:gdm [Le 03/11/2006, 16:00] 86.219.18.156 |
— (Version actuelle) | ||
|---|---|---|---|
| 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 quelques sites : | ||
| - | * [[http://art.gnome.org/|Gnome Art]], dans la section //Login Manager// | ||
| - | * [[http://gnome-look.org/|Gnome-Look]], dans la rubrique //GDM Themes// | ||
| - | * [[http://art.ubuntu.com|Ubuntu Art]], dans la section //Login Manager// | ||
| - | |||
| - | 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 ;-) | ||
| - | |||
| - | |||
| - | |||
| - | ===== 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 "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. | ||
| - | |||
| - | ===== Composants du thème ===== | ||
| - | |||
| - | |||
| - | ==== 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 (le greeter c'est Gdm). | ||
| - | |||
| - | * Name, Description, Author et Copyright sont les informations sur votre thème | ||
| - | |||
| - | Les informations sont affichées dans "gdmsetup". | ||
| - | |||
| - | 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). | ||
| - | |||
| - | 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 (/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 ;-) | ||
| - | |||
| - | <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. | ||
| - | |||
| - | - 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]] | ||
| - | |||
| - | **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"\\ | ||