<chapter id="kdm-themes"> <title>Creating themes for the &kdm; greeter</title> <para> This section describes the creation of themes for the themed greeter. For examples including screenshots, see the installed standard themes and the themes from <ulink type="http" url="http://www.kde-look.org/index.php?xcontentmode=40"> the theme website</ulink>. </para> <sect1 id="theme-overview"> <title>Theme Overview</title> <para> &kdm; themes can be created by creating an XML file that follows the specification in <filename>$<envar>KDEDIR</envar>/share/apps/doc/kdm/greeter.dtd</filename>. Theme files are stored in the directory <filename class="directory">$<envar>KDEDIR</envar>/share/apps/kdm/themes/<replaceable>theme_name</replaceable></filename>. The theme directory should contain a file called <filename>KdmGreeterTheme.desktop</filename> which has similar format to other <filename class="extension">.desktop</filename> files and looks like: <programlisting> [KdmGreeterTheme] Greeter=circles.xml Name=Circles Description=Theme with blue circles Author=Bond, James Bond Copyright=(c) 2002 Bond, James Bond Screenshot=screenshot.png </programlisting> </para> <para> The <literal>Name</literal>, <literal>Description</literal>, <literal>Author</literal> and <literal>Copyright</literal> fields can be translated just like in other <filename class="extension">.desktop</filename> files. All the files that are mentioned should be in the theme directory itself. The <literal>Screenshot</literal> field points to a file which should be a 200x150 screenshot of the theme in action (it is OK not to have one, but it makes it nicer for the user). The <literal>Greeter</literal> entry points to an XML file that contains the description of the theme. </para> <!-- <para> Once a theme is installed, it can be tested with the <command>gdmthemetester</command> program. This program assumes that the X server supports a nested server command. This command takes two arguments, first the environment that should be used. The environment can be one of the following values: console, console-timed, flexi, remote-flexi, or xdmcp. The "console" option tests the theme as it would be shown on an attached display. The "console-timed" option tests the theme as it would be shown on an attached display with timed login enabled. The "flexi" option tests the theme as it would be shown on an attached flexible display (such as started via Xnest). Finally, the "xdmcp" option tests the theme as it would be shown for remote XDMCP displays. The second argument is the theme name. For example, to test how the circles theme would look in XDMP remote display mode, you would run the following command: </para> <cmdsynopsis> <command>gdmthemetester</command> <arg>xdmcp</arg> <arg><replaceable>circles</replaceable></arg> </cmdsynopsis> <para> When developing a theme, make sure to test all the environments, and make sure to test how the caps lock warning looks by pressing the caps lock key. Running <command>gdmthemetester</command> is also a good way to take screenshots of &kdm; themes. Simply take a screenshot of the theme running in the nested display window. This can be done in GNOME by focusing the nested login window and pressing Alt-PrintScreen. </para> --> <para> Once a theme has been fully tested, make a tarball that contains the directory as it would be installed to the <filename class="directory">$<envar>KDEDIR</envar>/share/apps/kdm/themes</filename> directory. This is the standard format for distributing &kdm; themes. </para> </sect1> <sect1 id="theme-format"> <title>Detailed Description of Theme XML format</title> <sect2 id="greeter-tag"> <title>Toplevel Node</title> <para> &kdm; themes are XML files with the <greeter> tag at their root. The toplevel node is an <link linkend="item-nodes">item node</link> of type <literal>rect</literal> with an implicit <link linkend="fixed-nodes">fixed layout</link>. </para> <!-- <para> You may specify a Qt GUI style to be used with this theme by using the gui-style attribute in the greeter tag as in the following example. gui-style="Plastique" </para> --> <programlisting> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE greeter SYSTEM "greeter.dtd"> <greeter> [...] </greeter> </programlisting> <para> Contained within the greeter tag can be the nodes described in the next sections of this document. Some of these nodes are containers (layout nodes, item nodes) which can contain other nodes again. </para> </sect2> <sect2 id="item-nodes"> <title>Item Nodes</title> <para> A &kdm; theme is created by specifying a hierarchy of item and layout nodes. Item nodes can have the following value for the <literal>type</literal> attribute: </para> <variablelist> <varlistentry> <term>button</term> <listitem> <para> A button field. This field uses a Qt button. </para> <para> It is also possible to make any other item act like a button by setting its <literal>button</literal> attribute to <literal>true</literal>. However, it is better to use Qt buttons in &kdm; themes since these are accessible to users with disabilities. </para> </listitem> </varlistentry> <varlistentry> <term>entry</term> <listitem> <para>An input widget like a line edit or combo box. Note that this is merely a placeholder for Qt widgets.</para> </listitem> </varlistentry> <varlistentry> <term>label</term> <listitem> <para> A text label. Must contain either a <link linkend="text-nodes"><literal>text</literal> node</link> or a <link linkend="stock-nodes"><literal>stock</literal> node</link> to specify the text. </para> </listitem> </varlistentry> <varlistentry> <term>list</term> <listitem> <para>A face browser widget.</para> </listitem> </varlistentry> <varlistentry> <term>pixmap</term> <listitem> <para>A raster image in a format that Qt supports, ⪚ PNG, JPEG, Tiff, etc.</para> </listitem> </varlistentry> <varlistentry> <term>rect</term> <listitem> <para>A plain rectangle.</para> </listitem> </varlistentry> <varlistentry> <term>svg</term> <listitem> <para>A vector image in SVG format.</para> </listitem> </varlistentry> </variablelist> <para> For example: <programlisting> <item type="label"> </programlisting> An item that acts as a button: <programlisting> <item type="rect" id="disconnect_button" button="true">. </programlisting> </para> <para> By default, the &kdm; login screen will disappear after authentication. This can result in flicker between the login screen and the session. The <literal>background</literal> attribute allows users to specify what elements of the theme are the background image. When used, this will cause &kdm; to remove all non-background items from the display and render the remaining <literal>background</literal> items to the root window. This can be used to create a smooth transition between the login screen and the session: <programlisting> <item type="rect" background="true"> <normal file="background.svg"/> <pos x="0" y="0" width="100%" height="-75"/> </item> </programlisting> To use a different background for login transition than the one used for login, the theme should specify two item nodes (which could contain pixmaps or svg images, for example). The item which corresponds to the greeter background should not have the <literal>background</literal> property while the item which corresponds to the transition background should have the <literal>background</literal> property. For instance : <programlisting> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE greeter SYSTEM "greeter.dtd"> <greeter> <item type="rect" background="true"> <normal file="background_for_login.svg" element="background"/> <pos x="0" y="0" width="100%" height="100%"/> </item> <item type="rect"> <normal file="background_for_greeter.svg"/> <pos x="0" y="0" width="100%" height="100%"/> </item> [...] </greeter> </programlisting> </para> <para> In multi-screen setups, themes may also specify the look of other screens than the one the greeter is on - but typically only background items will appear there. To specify which screen(s) an item should appear on, the <literal>screen</literal> attribute can be used with the value being one of <literal>greeter</literal>, <literal>other</literal> or <literal>all</literal>, meaning the screen the greeter is on, all screens the greeter is not on and all screens, resp. </para> <variablelist> <para> Each item can be given a name via the <literal>id</literal> attribute. Certain ids are recognized by &kdm; to give those items a special function: </para> <!-- <varlistentry> <term><literal>list</literal> items</term> <listitem> <para> List items by default display as lists, but the <literal>combo="true"</literal> attribute can be used to specify combo box style (combo style supported since &kde; ). Some predefined lists may be included in a theme by using the following id values. Customized lists may also be defined, which are explained below. </para> <segmentedlist> <?dbhtml list-presentation="table"?> <segtitle>Id</segtitle><segtitle>Function</segtitle> <seglistitem> <seg>session</seg> <seg>A list of available sessions, which allows the user to pick the session to use. Supported since &kde; .</seg> </seglistitem> <seglistitem> <seg>language</seg> <seg>A list of available languages, which allows the user to pick the language to use. Supported since &kde; .</seg> </seglistitem> </segmentedlist> </listitem> </varlistentry> --> <varlistentry> <term><literal>button</literal> items and items with the <literal>button="true"</literal> attribute.</term> <listitem> <para> Buttons typically trigger certain actions. Addionally, &kdm; will hide buttons whose actions are not available for some reason. </para> <segmentedlist> <?dbhtml list-presentation="table"?> <segtitle>Id</segtitle><segtitle>Action</segtitle> <seglistitem> <seg>chooser_button</seg> <seg>Runs the XDMCP chooser.</seg> </seglistitem> <!-- <seglistitem> <seg>custom_cmd_button[0-9]</seg> <seg>Runs the <filename>n-th</filename> custom command.</seg> </seglistitem> --> <seglistitem> <seg>disconnect_button</seg> <seg>Disconnect from remote session.</seg> </seglistitem> <!-- <seglistitem> <seg>language_button</seg> <seg>Open the language selection menu.</seg> </seglistitem> --> <!-- <seglistitem> <seg>halt_button</seg> <seg>Power off the system.</seg> </seglistitem> <seglistitem> <seg>reboot_button</seg> <seg>Restart the system.</seg> </seglistitem> <seglistitem> <seg>suspend_button</seg> <seg>Suspend the system.</seg> </seglistitem> --> <seglistitem> <seg>session_button</seg> <seg>Open the session type selection menu.</seg> </seglistitem> <seglistitem> <seg>system_button</seg> <seg>Open a catch-all menu with various options and actions, depending on the configuration.</seg> </seglistitem> </segmentedlist> </listitem> </varlistentry> <varlistentry> <term><literal>label</literal> items</term> <listitem> <para> &kdm; will show/hide these labels and set their text depending on the state of the login dialog. </para> <segmentedlist> <?dbhtml list-presentation="table"?> <segtitle>Id</segtitle><segtitle>Function</segtitle> <!-- <seglistitem> <seg>pam-prompt</seg> <seg>Label that displays the <acronym>PAM</acronym> prompt. This is the prompt that <acronym>PAM</acronym> uses to ask for username, password, etc.</seg> </seglistitem> <seglistitem> <seg>pam-message</seg> <seg>Label that displays the <acronym>PAM</acronym> message. These are messages that <acronym>PAM</acronym>/&kdm; gives about state of the account, help about the prompts and other information.</seg> </seglistitem> --> <seglistitem> <seg>pam-error</seg> <seg>This displays the <guilabel>Login failed.</guilabel> message.</seg> </seglistitem> </segmentedlist> </listitem> </varlistentry> <varlistentry> <term>Widget embedding items</term> <listitem> <para> &kdm; will embed particular Qt widgets into these items. </para> <segmentedlist> <?dbhtml list-presentation="table"?> <segtitle>Id</segtitle><segtitle>Function</segtitle> <seglistitem> <seg>user-entry</seg> <seg>Entry field for username entry.</seg> </seglistitem> <seglistitem> <seg>pw-entry</seg> <seg>Entry field for password entry.</seg> </seglistitem> <seglistitem> <seg>domain-entry</seg> <seg>Some <quote>conversation</quote> plugins use this field to query a domain name. If this field is present, the related enclosing items should have <link linkend="show-nodes">show nodes</link> with the type <literal>plugin-domain-entry</literal>.</seg> </seglistitem> <seglistitem> <seg>talker</seg> <seg>This item should be of type <literal>rect</literal>. It represents the <quote>hot</quote> area of the greeter: it contains the <literal>label</literal> and <literal>entry</literal> items which concern the authentication process. If a given <quote>conversation</quote> plugin cannot match the existing items with its needs, it tries to embed a complex widget with an own layout into this item, thus completely overriding the theme's <quote>talker</quote>. Strictily speaking, &kdm; themes do not need to provide own <quote>talker</quote> designs at all, as all &kdm; authentication plugins are able make use of the <literal>talker</literal> item. </seg> </seglistitem> <seglistitem> <seg>userlist</seg> <seg>This item must be of type <literal>list</literal>. If the user list feature is enabled, &kdm; will embed the user list widget here. Otherwise, this item is hidden.</seg> </seglistitem> <seglistitem> <seg>xconsole</seg> <seg>This item should be of type <literal>rect</literal>. If the built-in <command>xconsole</command> feature is compiled in and enabled, &kdm; will embed the console log widget here. Otherwise, this item is hidden.</seg> </seglistitem> </segmentedlist> </listitem> </varlistentry> <varlistentry> <term>Other items</term> <listitem> <para> &kdm; will show/hide these items depending on the configuration and the current state of the greeter. &kdm; does not impose type requirements on them, but they usually lend themselves to a particular type. </para> <segmentedlist> <?dbhtml list-presentation="table"?> <segtitle>Id</segtitle><segtitle>Shown only when ...</segtitle> <seglistitem> <seg>timed-label</seg> <seg>... timed login is in progress.</seg> </seglistitem> <seglistitem> <seg>caps-lock-warning</seg> <seg>... Caps Lock is active.</seg> </seglistitem> <seglistitem> <seg>xauth-warning</seg> <seg>... the &X-Server; requires no X authorization to connect.</seg> </seglistitem> <!-- <seglistitem> <seg>pam-error-logo</seg> <seg>... a pam-error message is being displayed. This is useful for displaying an <guiicon>Attention</guiicon> icon, for example.</seg> </seglistitem> --> <seglistitem> <seg>userlist-rect</seg> <seg>... the user list is enabled. By nesting the <literal>userlist</literal> item into this one, it is possible to create something like a frame around the list and have it shown only when the user list itself if shown.</seg> </seglistitem> <seglistitem> <seg>xconsole-rect</seg> <seg>... the built-in <command>xconsole</command> is enabled. Analogous to <literal>userlist-rect</literal>.</seg> </seglistitem> </segmentedlist> </listitem> </varlistentry> </variablelist> </sect2> <sect2 id="layout-nodes"> <title>Layout Container Nodes</title> <para> Layout nodes appear inside item nodes and contain item nodes again. The type of the layout node determines the arrangement of its child nodes. An item node can contain one layout node of each type. </para> <sect3 id="box-nodes"> <title>Box Nodes</title> <para> Box nodes automatically arrange their children in a row. They are specified as follows: <programlisting> <box orientation="<replaceable>alignment</replaceable>" min-width="<replaceable>num</replaceable>" min-height="<replaceable>num</replaceable>" xpadding="<replaceable>num</replaceable>" ypadding="<replaceable>num</replaceable>" spacing="<replaceable>num</replaceable>" homogeneous="<replaceable>bool</replaceable>"> </programlisting> Where <replaceable>num</replaceable> means number of pixels and <replaceable>bool</replaceable> means either <literal>true</literal> or <literal>false</literal>. The <replaceable>alignment</replaceable> value can be either <literal>horizontal</literal> or <literal>vertical</literal>. If you leave any attribute off, it will default to zero for numbers, <literal>false</literal> for bools and <literal>vertical</literal> for the orientation. </para> <para> The spacing is the distance between neighboring child items. The padding is the box' outer margin. If the box is homogeneous, the same amount of space is allocated to each child item. </para> </sect3> <sect3 id="fixed-nodes"> <title>Fixed Nodes</title> <para> Fixed is a container that has its children laid out at precise coordinates. The size of this container is the smallest rectangle that contains all the children. Fixed has no extra attributes and so you just use: <programlisting> <fixed> </programlisting> Then you put other items with proper position nodes inside it. </para> </sect3> </sect2> <sect2 id="position-nodes"> <title>Position Nodes</title> <para> Each item can specify its position and size via the <literal>pos</literal> node. For example: <programlisting> <pos x="0" y="4" width="100%" height="100%"/> </programlisting> </para> <para> If the size is not specified, it will be the item's <quote>natural</quote> size, called the size hint. Note that not all items have a useful size hint. </para> <para> Both position and size can be given in percent and will be calculated relative to the size of the enclosing container in this case. For toplevel items it is the percentage of the whole screen. By appending circumflexes (<literal>^</literal>) to the size specification it is possible to modify it to be relative to the size of the enclosing item's enclosing item and so on. </para> <para> If the item contains a box, <literal>width</literal> and <literal>height</literal> can be specified to be <literal>box</literal> to mean that they are supposed to be the width and height of the box, that is the items in the box plus the padding. </para> <para> One of <literal>width</literal> and <literal>height</literal> can be specified to be <literal>scale</literal> to mean that it should be scaled according to the other dimension's scale relative to its size hint. Use this to preserve the aspect ratio of scaled images automatically. </para> <para> If the <literal>expand</literal> attribute is specified and <literal>true</literal>, this item will be expanded in the enclosing box as much as possible (that is it will be given more space if available). </para> <para> If <literal>width</literal> or <literal>height</literal> is a plain number, a negative value represents an offset from the enclosing container's size. Note that it is possible to specify a positive offset by writing two minus signs. </para> <para> In either case it is possible to constrain the final size with the <literal>min-width</literal>, <literal>min-height</literal>, <literal>max-width</literal> and <literal>max-height</literal> attributes which can be specified in the same ways as <literal>width</literal> and <literal>height</literal>. </para> <para> If <literal>x</literal> or <literal>y</literal> is a plain number, a negative value represents an offset from the right resp. bottom edge, unlike the default which is the left resp. top edge. </para> <para> It is also possible to specify which point within the item the position refers to. This is called the anchor and can be either <literal>c</literal> for center or one of <literal>n</literal>, <literal>ne</literal>, <literal>e</literal>, <literal>se</literal>, <literal>s</literal>, <literal>sw</literal>, <literal>w</literal> and <literal>nw</literal> which stand for the different edges/corners corresponding the directions on a topographical map. The default is <literal>nw</literal>, which is the upper left corner. For example: <programlisting> <pos x="10%" y="50%" anchor="w" width="80%" height="95"/> </programlisting> </para> </sect2> <sect2 id="show-nodes"> <title>Show Nodes</title> <!-- not really implemented <para> Some items may only display in certain modes, like when doing a remote display. Multiple values can be specified and must be separated with commas. The following values are possible: </para> <para> <filename>console</filename> - In console mode. </para> <para> <filename>console-fixed</filename> - In console non-flexi mode. </para> <para> <filename>console-flexi</filename> - In console & flexi mode. </para> <para> <filename>flexi</filename> - In flexi mode. </para> <para> <filename>remote</filename> - In remote mode. </para> <para> <filename>remote-flexi</filename> - In remote & flexi mode. </para> <para> For example: <programlisting> <show modes="flexi,remote"/> </programlisting> </para> --> <para> You can specify the <literal>type</literal> attribute to indicate that certain items should only be displayed if the type is set. Prefixing the type with an exclamation mark (<literal>!</literal>) reverses the condition. Valid values include the following: </para> <segmentedlist> <?dbhtml list-presentation="table"?> <segtitle>Type</segtitle><segtitle>Display if ...</segtitle> <seglistitem> <seg><literal>chooser</literal></seg> <seg>switching to remote login is permitted.</seg> </seglistitem> <!-- <seglistitem> <seg><literal>custom_cmd[0-9]</literal></seg> <seg><literal>n-th</literal> CustomCommand is specified in the &kdm; configuration.</seg> </seglistitem> --> <seglistitem> <seg><literal>halt</literal> and <literal>reboot</literal></seg> <seg>system shutdown is permitted.</seg> </seglistitem> <!-- <seglistitem> <seg><literal>suspend</literal></seg> <seg>suspending the system is permitted.</seg> </seglistitem> --> <seglistitem> <seg><literal>system</literal></seg> <seg>no condition (always set in &kdm;).</seg> </seglistitem> <!-- <seglistitem> <seg><literal>timed</literal></seg> <seg>a timed login is being counted down.</seg> </seglistitem> --> <seglistitem> <seg><literal>plugin-</literal><replaceable>entry-name</replaceable></seg> <seg>the <quote>conversation</quote> plugin provides a corresponding input field.</seg> </seglistitem> </segmentedlist> <para> For example: <programlisting> <show type="chooser"/> </programlisting> </para> <para> Alternatively, you can specify a <literal>min-screen-width</literal> or <literal>min-screen-height</literal> value to indicate that certain items should be displayed only if the screen resolution is the at least the specified size. For example: <programlisting> <show min-screen-height="768"/> </programlisting> </para> </sect2> <sect2 id="nor-act-pre-nodes"> <title>Normal/Active/Prelight Nodes</title> <para> The look of most item types can be parametrized via the following tags: </para> <variablelist> <varlistentry> <term><literal>normal</literal></term> <listitem> <para>Normal state.</para> </listitem> </varlistentry> <varlistentry> <term><literal>prelight</literal></term> <listitem> <para>When the mouse is hovering over the item.</para> </listitem> </varlistentry> <varlistentry> <term><literal>active</literal></term> <listitem> <para>When a mouse button is clicked on the item.</para> </listitem> </varlistentry> </variablelist> <variablelist> <para> The exact set of available attributes depends on the item type: </para> <varlistentry> <term><literal>rect</literal></term> <listitem> <para> <programlisting> <normal color="#000000" alpha="0.0"/> </programlisting> Either of the attributes may be omitted, in which case the default is used (the example represents the defaults). <literal>alpha</literal> is a floating point number between zero (transparent) and one (opaque). <literal>color</literal> is a hashmark followed by a six-digit hex number; the format is <quote><literal>#</literal><replaceable>rrggbb</replaceable></quote>. Alternatively, <literal>color</literal> may be specified as an eight-digit hex number, in which case the first two digits are the alpha value. </para> </listitem> </varlistentry> <varlistentry> <term><literal>label</literal></term> <listitem> <para> <programlisting> <normal color="#ffffff" alpha="1.0" font="Sans 14"/> </programlisting> <literal>alpha</literal> and <literal>color</literal> are specified like in <quote>rect</quote> items. </para> <para> <literal>font</literal> follows the format <quote><replaceable>family-list</replaceable> <replaceable>style-options</replaceable> <replaceable>size</replaceable></quote>. Each part is optional. </para> <para> <replaceable>family-list</replaceable> is a comma-separated list of font families like <quote>helvetica</quote>, <quote>monospace</quote>, etc. </para> <para> <replaceable>style-options</replaceable> is a space-delimited list of keywords from the categories style, weight and stretch; from each category at most one. The style can be <literal>normal</literal>, <literal>italic</literal> or <literal>oblique</literal>. Weight can be <literal>ultra-light</literal>, <literal>light</literal>, <literal>medium</literal>, <literal>semi-bold</literal>, <literal>bold</literal>, <literal>ultra-bold</literal> or <literal>heavy</literal>. Allowable stretches comprise <literal>ultra-condensed</literal>, <literal>extra-condensed</literal>, <literal>condensed</literal>, <literal>semi-condensed</literal>, <literal>normal</literal>, <literal>semi-expanded</literal>, <literal>expanded</literal>, <literal>extra-expanded</literal> and <literal>ultra-expanded</literal>. </para> <para> <replaceable>size</replaceable> is either a floating point number representing the size in points (1/72 inch) or an integer followed by <literal>px</literal> representing the size in pixels. Point sizes are preferable, as they are independent from the display resolution. </para> <para> If either attribute is left out, the values from the <link linkend="style-nodes">style node</link> are used. If this yields no window-text color specification, white is used. The default font is the one configured in &kdmrc;. </para> </listitem> </varlistentry> <varlistentry> <term><literal>pixmap</literal></term> <term><literal>svg</literal></term> <listitem> <para> <programlisting> <normal file="picture.png" tint="#dddddd" alpha="1.0"/> </programlisting> </para> <para> <literal>file</literal> specifies the file containing the image. Relative pathnames are relative to the theme's directory. </para> <para> <literal>wallpaper</literal> can be used instead of <literal>file</literal> to have &kdm; look for images in the usual locations for &kde; wallpapers. Plasma wallpaper packages are supported. </para> <para> <literal>element</literal> specifies the element id of a SVG file. If empty, the whole SVG image will be rendered. </para> <para> For <literal>pixmap</literal> nodes, it is possible to provide multiple images, so the best-quality image for a given resolution can be used. Size-tagged file names have the format <replaceable>basename</replaceable><literal>-</literal><replaceable>width</replaceable><literal>x</literal><replaceable>height</replaceable><literal>.</literal><replaceable>extension</replaceable>. If the not size-tagged file exists and it is no Plasma wallpaper package, &kdm; will accept only a perfect match for a given size and otherwise fall back to the original file. Otherwise it will try to find an image whose dimensions come closest to the required size if no perfect match is found. </para> <!-- <para> Note that an alternative image file can be specified using the <literal>altfile</literal><optional><replaceable>n</replaceable></optional> attribute. &kdm; will use the last valid image filename specified. For example: <programlisting> <normal file="picture.png" altfile1="distribution-blah-image.png" altfile2="distribution-foo-image.png"/> </programlisting> If <filename>distribution-foo-image.png</filename> is a valid image filename it will be used. Otherwise distribution-blah-image.png will be used if valid. This feature is supported since &kde; . </para> --> <para> <literal>scalemode</literal> specifies how to adjust the size of images which do not match the element's size. <literal>free</literal> (the default) means to simply scale the image to the right size, possibly distorting its aspect ratio. The other two modes maintain the image's aspect ratio: <literal>fit</literal> means to zoom the image to the maximal size which fits into the element's geometry. The image will be centered. The remaining area will not be painted by this element, so it should be placed on top of a solid-filled <literal>rect</literal>. <literal>crop</literal> means to zoom the image to the minimal size which completely fills the element's geometry. The image will be clipped symmetrically. </para> <para> <literal>tint</literal> and <literal>alpha</literal> form a color specification like in <literal>rect</literal> items. Each pixel of the image is multiplied with this color component-wise. </para> </listitem> </varlistentry> </variablelist> </sect2> <sect2 id="style-nodes"> <title>Widget Style Nodes</title> <para> This tag makes it possible to change the appearance of labels and Qt widgets embedded into the theme, e.g., line edits, buttons or the user list. The style settings are inherited by child items, but can be overridden individually. The defaults are taken from &kdmrc;. </para> <para> The <literal>font</literal> attribute defines the font for all widgets. For widgets with an input function it can be overridden with the <literal>edit-font</literal> attribute. Fonts are specified the same way as in <link linkend="nor-act-pre-nodes">normal/active/prelight nodes</link>. </para> <para> Usually, the theming engine tries hard to remove any frames from Qt widgets, so they melt into the theme seamlessly. In cases where this is not desired, the <literal>frame</literal> attribute can be set to <literal>true</literal>. </para> <para> The <literal>guistyle</literal> attribute can be used to override the Qt GUI style for embedded widgets. The default is given by <option>GUIStyle</option> in &kdmrc; </para> <para> It is possible to specify almost the entire palette for the widgets as documented at <ulink type="http" url="http://doc.trolltech.com/4.3/qpalette.html">Trolltech's site</ulink>. Attribute names are composed from a scope, a color role and a suffix. Possible scopes are - in order of increasing precedence - <literal>all-</literal> for all color groups, no scope for the active and inactive color groups and <literal>active-</literal>, <literal>inactive-</literal> and <literal>disabled-</literal> for the respective color group. Supported color roles are <literal>window</literal>, <literal>window-text</literal>, <literal>base</literal>, <literal>alternate-base</literal>, <literal>text</literal>, <literal>bright-text</literal>, <literal>highlight</literal>, <literal>highlighted-text</literal>, <literal>button</literal> and <literal>button-text</literal>. The suffix can be <literal>-color</literal> or <literal>-alpha</literal> with the respective meaning as in <link linkend="nor-act-pre-nodes">normal/active/prelight nodes</link>. </para> <para> As an alternative to specifying the palette inline, the <literal>colorscheme</literal> attribute can be used to load a complete &kde; color scheme. The default is given by <option>ColorScheme</option> in &kdmrc;. Individual <literal>color</literal> specifications will override the colors from the scheme. </para> <para> Example: <programlisting> <style edit-font="Comic 16" text-color="#dddddd" frame="true"/> </programlisting> </para> </sect2> <sect2 id="color-nodes"> <title>Face Browser Color Nodes</title> <para> Color nodes permit overriding the background color of the items in the face browser. <literal>labelcolor</literal> and <literal>altlabelcolor</literal> are essentially equivalent to <literal>all-base-color</literal> resp. <literal>all-alternate-base-color</literal> in <link linkend="style-nodes">style nodes</link>. If only <literal>labelcolor</literal> is specified, alternating item backgrounds are disabled. </para> <para> <programlisting> <color labelcolor="#80ffffff" altlabelcolor="#80f0f0f0"/> </programlisting> </para> </sect2> <sect2 id="text-nodes"> <title>Text Nodes</title> <para> Text tags are used by labels. They can be used to display localized text as follows (if the <literal>xml:lang</literal> attribute is omitted, the POSIX locale is assumed): <programlisting> <text xml:lang="fr">Option</text> </programlisting> </para> <!-- <para> You can include pango markup in the text nodes for labels, however you must encode it. So for example to have the label of "foo<sup>bar</sup>", you must type: <programlisting> <text>"foo<sup>bar</sup>"</text> </programlisting> </para> --> <para> Text nodes can contain the following special character sequences which will be translated as follows: </para> <segmentedlist> <?dbhtml list-presentation="table"?> <segtitle>Sequence</segtitle><segtitle>Expansion</segtitle> <seglistitem> <seg>%%</seg> <seg>A literal % character</seg> </seglistitem> <seglistitem> <seg>%c</seg> <seg>Wall clock time and date</seg> </seglistitem> <seglistitem> <seg>%d</seg> <seg>Display name (<envar>DISPLAY</envar> environment variable)</seg> </seglistitem> <seglistitem> <seg>%h</seg> <seg>Hostname (<function>gethostname</function> output)</seg> </seglistitem> <seglistitem> <seg>%m</seg> <seg>Machine name (<structfield>machine</structfield> part of <function>uname</function> output)</seg> </seglistitem> <seglistitem> <seg>%n</seg> <seg>Node name (<structfield>nodename</structfield> part of <function>uname</function> output)</seg> </seglistitem> <seglistitem> <seg>%o</seg> <seg>Domain name (<function>getdomainname</function> output)</seg> </seglistitem> <seglistitem> <seg>%r</seg> <seg>Release name (<structfield>release</structfield> part of <function>uname</function> output)</seg> </seglistitem> <seglistitem> <seg>%s</seg> <seg>System name (<structfield>sysname</structfield> part of <function>uname</function> output)</seg> </seglistitem> <seglistitem> <seg>%t</seg> <seg>Remaining number of seconds until timed login is performed, plus the appropriate i18n plural form of <quote>second</quote></seg> </seglistitem> <seglistitem> <seg>%u</seg> <seg>Username for timed login</seg> </seglistitem> <!-- Need to switch to richtext painting for this purpose. <seglistitem> <seg>\n</seg> <seg>Newline</seg> </seglistitem> --> <seglistitem> <seg>_</seg> <seg>Causes the following character to be an accelerator</seg> </seglistitem> </segmentedlist> <para> <literal>%t</literal> and <literal>%u</literal> are intended to be used only internally to display the <literal>timed-label</literal> message, which is automatically updated every second. </para> </sect2> <sect2 id="stock-nodes"> <title>Stock Nodes</title> <para> Certain common localized labels can be specified via the stock tags. The <literal>text</literal> tag is ignored if the <literal>stock</literal> tag is used. You really should use the stock labels rather than just putting all the translations into the themes. This yields faster load times and likely better translations. The following values are valid: </para> <segmentedlist> <?dbhtml list-presentation="table"?> <segtitle>Type</segtitle><segtitle>Expansion</segtitle> <!-- <seglistitem> <seg>ok</seg> <seg><quote>_OK</quote></seg> </seglistitem> <seglistitem> <seg>cancel</seg> <seg>_Cancel</seg> </seglistitem> <seglistitem> <seg>options</seg> <seg>_Options</seg> </seglistitem> <seglistitem> <seg>custom_cmd[0-9]</seg> <seg>Obtained from the config file.</seg> </seglistitem> --> <seglistitem> <seg>caps-lock-warning</seg> <seg><quote>Caps Lock is enabled</quote></seg> </seglistitem> <seglistitem> <seg>chooser</seg> <seg><quote>XDMCP Choose_r</quote></seg> </seglistitem> <seglistitem> <seg>quit</seg> <seg><quote>_Quit</quote></seg> </seglistitem> <seglistitem> <seg>disconnect</seg> <seg><quote>Disconn_ect</quote></seg> </seglistitem> <seglistitem> <seg>halt</seg> <seg><quote>Power o_ff</quote></seg> </seglistitem> <seglistitem> <seg>language</seg> <seg><quote>Lan_guage</quote></seg> </seglistitem> <seglistitem> <seg>login</seg> <seg><quote>_Login</quote></seg> </seglistitem> <seglistitem> <seg>session</seg> <seg><quote>Session _Type</quote></seg> </seglistitem> <seglistitem> <seg>reboot</seg> <seg><quote>Re_boot</quote></seg> </seglistitem> <!-- <seglistitem> <seg>suspend</seg> <seg><quote>Sus_pend</quote></seg> </seglistitem> --> <seglistitem> <seg>system</seg> <seg><quote>_Menu</quote></seg> </seglistitem> <seglistitem> <seg>timed-label</seg> <seg><quote>User %u will login in %t</quote></seg> </seglistitem> <seglistitem> <seg>domain-label</seg> <seg><quote>_Domain:</quote></seg> </seglistitem> <seglistitem> <seg>username-label</seg> <seg><quote>_Username:</quote></seg> </seglistitem> <seglistitem> <seg>password-label</seg> <seg><quote>_Password:</quote></seg> </seglistitem> <seglistitem> <seg>welcome-label</seg> <seg><quote>Welcome to %h</quote></seg> </seglistitem> </segmentedlist> <para> For example: <programlisting> <stock type="welcome-label"/> </programlisting> </para> </sect2> <sect2 id="buddy-nodes"> <title>Buddy Nodes</title> <para> Items which do not directly cause an action can be assigned a buddy. The buddy is given input focus when the item is activated (clicked or a <literal>label</literal>'s accelerator pressed). </para> <para> The buddy is referenced by id with the <literal>idref</literal> attribute. Obviously, it must be given an id. Example: <programlisting> <item type="label"> <stock type="username-label"/> <buddy idref="user-entry"/> [...] </item> [...] <item type="entry" id="user-entry"> [...] </item> </programlisting> </para> </sect2> </sect1> </chapter>