CINXE.COM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><base href="/"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Attic/GnomeArt/Tutorials/GtkThemes – GNOME Wiki Archive</title> <link rel="stylesheet" type="text/css" media="all" charset="utf-8" href="gnome/css/common.css"> <link rel="stylesheet" type="text/css" media="screen" charset="utf-8" href="gnome/css/screen.css"> <link rel="stylesheet" type="text/css" media="print" charset="utf-8" href="gnome/css/print.css"> <style type="text/css"> ul.pagetitle{ display: inline; margin: 0; padding: 0; font-size: 1.5em; } li.pagetitle{ display: inline; margin: 0; } td.noborder { border: 0; } </style> </head> <body><div class="retirement_banner">This site has been retired. For up to date information, see <a href="https://handbook.gnome.org/">handbook.gnome.org</a> or <a href="https://gitlab.gnome.org/">gitlab.gnome.org</a>.</div> <table> <tr> <td class="noborder"> <img src="logo.png"> </td> <td class="noborder"> <ul class="pagetitle"> <li class="pagetitle"><a class="backlink">Attic/GnomeArt/Tutorials/GtkThemes</a> </ul> [<a href="Home.html">Home</a>] [<a href="TitleIndex.html">TitleIndex</a>] [<a href="WordIndex.html">WordIndex</a>]  </td> </tr> </table> <hr> <div id="page"> <div dir="ltr" id="content" lang="en"> <img alt="{i}" height="16" src="/gnome/gnome-responsive/img/icon-info.png" title="{i}" width="16" /> Please feel free to add documentation or correct things. If you have any comments, please write me an e-mail (<a class="mailto" href="mailto:benjamin@sipsolutions.net">benjamin@sipsolutions.net</a>), or come to #gnome-art on irc.gnome.org. A list of widgets: <table class="navigation"><tr><td><a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GnomePanel.html">/GnomePanel</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkButton.html">/GtkButton</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkCheckButton.html">/GtkCheckButton</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkColorButton.html">/GtkColorButton</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkCombo.html">/GtkCombo</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkComboBox.html">/GtkComboBox</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkComboBoxEntry.html">/GtkComboBoxEntry</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkEntry.html">/GtkEntry</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkFrame.html">/GtkFrame</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkList.html">/GtkList</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkMenu.html">/GtkMenu</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkMenuBar.html">/GtkMenuBar</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkMenuItem.html">/GtkMenuItem</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkNotebook.html">/GtkNotebook</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkProgressBar.html">/GtkProgressBar</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkRadioButton.html">/GtkRadioButton</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkScale.html">/GtkScale</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkScrollbar.html">/GtkScrollbar</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkScrolledWindow.html">/GtkScrolledWindow</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkSpinButton.html">/GtkSpinButton</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkStatusbar.html">/GtkStatusbar</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkTreeView.html">/GtkTreeView</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)Pidgin.html">/Pidgin</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)StyleProperties.html">/StyleProperties</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)SymbolicColors.html">/SymbolicColors</a>   <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)Workarounds.html">/Workarounds</a>   </td></tr></table> Things missing: <ul><li>Inheritance, i.e., <tt class="backtick">style "button" = "default"</tt>, but this is usually not necessary because of merging, and needs a warning, as it doesn't work correctly for engine options as far as is known. </li><li>The <a class="nonexistent" href="./GtkSettings.html">GtkSettings</a> properties are not mentioned here. See <a class="http" href="http://library.gnome.org/devel/gtk/stable/GtkSettings.html#id3227906">http://library.gnome.org/devel/gtk/stable/GtkSettings.html#id3227906</a> for a list of properties that can be set (not all of them make sense from the gtkrc). </li><li>Need information about icon size handling and a list of icon sizes in GNOME (see also Redmond gtkrc that sets numerous icon sizes) </li><li>How theme engines are used; see comment in the section. </li><li>Locale-specific <tt class="backtick">gtkrcs</tt> (<tt class="backtick">gtkrc.de</tt> will, for example, be parsed in German locales). This will only be useful in very rare cases (maybe for keybinding stuff, which is not the topic of this page). </li></ul><hr /> <h1 id="GTK_Theming_Tutorial">1. GTK Theming Tutorial</h1> <div class="table-of-contents">Contents<ol><li> <a href="#GTK_Theming_Tutorial">GTK Theming Tutorial</a><ol><li> <a href="#Introduction">Introduction</a></li><li> <a href="#Architecture">Architecture</a><ol><li> <a href="#Widgets">Widgets</a></li><li> <a href="#Styles">Styles</a></li><li> <a href="#Engines">Engines</a></li></ol></li><li> <a href="#The_gtkrc_File">The gtkrc File</a><ol><li> <a href="#The_Style">The Style</a><ol><li> <a href="#x.2Fythickness">x/ythickness</a></li><li> <a href="#Style_Properties">Style Properties</a></li><li> <a href="#Colors">Colors</a></li></ol></li><li> <a href="#Applying_the_Style">Applying the Style</a><ol><li> <a href="#The_different_matching_lines">The different matching lines</a><ol><li> <a href="#class">class</a></li><li> <a href="#widget_class_matches">widget_class matches</a></li><li> <a href="#widget_matches">widget matches</a></li></ol></li><li> <a href="#Order_of_the_Merge">Order of the Merge</a></li><li> <a href="#Priority">Priority</a></li></ol></li><li> <a href="#Engines-1">Engines</a></li></ol></li><li> <a href="#Tips">Tips</a></li><li> <a href="#Check_List">Check List</a><ol><li> <a href="#Engine">Engine</a></li><li> <a href="#Theme">Theme</a></li></ol></li></ol></li></ol></div> <h2 id="Introduction">1.1. Introduction</h2> This tutorial will explain the basics of creating a GTK+2 theme for use with GNOME 2.2 and above. Some knowledge of the GTK+2 API can be helpful with more complicated themes; documentation can be found at <a class="http" href="http://developer.gnome.org/doc/API/2.0/gtk/index.html">http://developer.gnome.org/doc/API/2.0/gtk/index.html</a>. Other people's themes can be very helpful. You can find more GTK themes in the resources linked from <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)UsefulLinks.html">../UsefulLinks</a>. Themes generally live in either a public directory (available to all users, typically in /usr/share/themes/) or in ~/.themes/ (just for you). A convenient place to put the themes you create are in ~/.themes/YOUR_THEME_NAME/gtk-2.0/. Within this gtk-2.0 directory you will place all files that go with your theme. Note that if themes of the same name are installed in both the public and the ~/.themes directories that GNOME will use the one in ~/.themes. A good way to learn theming is to examine other people's themes. Your GNOME installation undoubtedly came with quite a few themes. More can be found at: <ul><li><a class="http" href="http://art.gnome.org/">http://art.gnome.org/</a> </li><li><a class="http" href="http://gnome-look.org/">http://gnome-look.org/</a> </li><li><a class="http" href="http://themes.freshmeat.net/">http://themes.freshmeat.net/</a> </li></ul> <h2 id="Architecture">1.2. Architecture</h2> <h3 id="Widgets">1.2.1. Widgets</h3> GTK has a large set of widgets like buttons, scroll bars and edit boxes. Each of these widgets can be themed separately. Every widget is derived from <tt class="backtick">GtkWidget</tt>. This means, changes to the properties of <tt class="backtick">GtkWidget</tt> will effect all widgets. Furthermore many other widgets have "parent widgets". For example, properties of <tt class="backtick">GtkButton</tt> will also be applied to <tt class="backtick">GtkCheckButton</tt> unless it is explicitly stated otherwise. Hence this hierarchy — found at <a class="https" href="https://developer.gnome.org/gtk-tutorial/2.90/x477.html">https://developer.gnome.org/gtk-tutorial/2.90/x477.html</a> — is important when applying styles and we will come back to it later on. <h3 id="Styles">1.2.2. Styles</h3> Everything you want to change is being changed in so called "styles". Within these styles you have two kinds of properties. On the one hand there is a limited set of predefined style-properties of the GTK+ theming system, which define things like the width of the scrollbar. On the other hand, there are the theming possibilities the <tt class="backtick">engines</tt> define. These engine styles are, where most of the theming options are possible. The interesting part about the GTK theming system is that different styles are merged to create the final one. So, you will usually define a base style with all common options in it, and then change colors for a specific widget. <h3 id="Engines">1.2.3. Engines</h3> As said above engines provide you with many interesting styling options. These options however are engine specific, and if you learned them for one Engine, you will still have to learn the options, other engines provide. Without any engine, GTK uses a very basic theme, that offers only a very boring look (the Raleigh theme does not use an engine). There are many different engines out there, some providing a lot of possibilities, some a very fixed look. An important part of theming GTK+ is to find one or multiple engines on which to base the theme. <h2 id="The_gtkrc_File">1.3. The gtkrc File</h2> The GTK theme lives inside the gtkrc file. The file format is case- sensitive; comments are marked with a <tt class="backtick">#</tt> (hash). Multiline comments are also possible with the C like <tt class="backtick">/* */</tt>. A small example follows, that shows how to create very a basic theme. <pre>style "default-style" { # modify the x/ythickness, used for spacing all over the place xthickness = 3 ythickness = 3 # one can set so called "style properties" GtkRange::slider-width = 15 # set the background to a light grey bg[NORMAL] = "#f6f6f6" # and the forground to black fg[NORMAL] = "#000000" } class "GtkWidget" style "default-style"</pre>All, this snippet does, is create a style called "default-style", which then gets applied to all widgets. Lets take a closer look at the different options inside the style. <h3 id="The_Style">1.3.1. The Style</h3> While the above example style is very small, it gives you an idea of everything that is possible with plain GTK+. <h4 id="x.2Fythickness">1.3.1.1. x/ythickness</h4> <pre> xthickness = 3 ythickness = 3</pre>This option is used in many places to determine padding between text and border of widgets. For details see the geometry documentation of the specific widgets. <h4 id="Style_Properties">1.3.1.2. Style Properties</h4> <pre> GtkRange::slider-width = 15</pre>This example sets the "slider-width" style property of <a class="nonexistent" href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkRange.html">/GtkRange</a> to 15 pixel. There are a lot of style properties like this one available within GTK and also some specific to an appalication. They make it possible for you to change the basic behavior of widgets. Please refer to the widget documentation and the autogenerated list of style properties available at <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)StyleProperties.html">/StyleProperties</a>. Style properties are always of the form <pre> WidgetName::style-property-name = VALUE</pre>The format of the value depends on the type of the style properties. Usually possible values are enumerations from GTK+ like <tt class="backtick">GTK_SHADOW_IN</tt>, integers and color values (same format as below). Note that <tt class="backtick">TRUE</tt> and <tt class="backtick">FALSE</tt> cannot be used in the theme, you can use 1 and 0 instead. (XXX is this OK?) Some examples of style properties: <div><table><tbody><tr> <td> Property </td> <td> Description </td> <td> Example </td> </tr> <tr> <td> <tt class="backtick">GtkWidget::focus-line-width</tt> </td> <td> Width of the focus line </td> <td> <tt class="backtick">GtkWidget::focus-line-width = 2</tt> </td> </tr> <tr> <td> <tt class="backtick">GtkWidget::link-color</tt> </td> <td> Color of unvisited links, that is supposed to be used by applications </td> <td> <tt class="backtick">GtkWidget::link-color = "#0000ff"</tt> </td> </tr> <tr> <td> ... </td> <td> </td> <td> </td> </tr> </tbody></table></div>An interesting feature is that you can easily set style properties on subclasses only. So instead of setting <tt class="backtick">GtkRange::trough-side-details</tt> on a style only applied to <tt class="backtick">GtkScale</tt>, you can just set it only on the scale. <pre>style "default" { GtkScale::trough-side-details = 1 } class "GtkWidget" style "default"</pre>This will only affect <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkScale.html">/GtkScale</a>, and not scrollbars. <h4 id="Colors">1.3.1.3. Colors</h4> <pre>bg[NORMAL] = "#f6f6f6"</pre><tt class="backtick">bg</tt> stands for background. There are four valid categories: <div><table><tbody><tr> <td> Category </td> <td> Usage </td> </tr> <tr> <td> <tt class="backtick">fg</tt> </td> <td> Foreground color. Used for text on buttons. Also used for the button borders in some engines. </td> </tr> <tr> <td> <tt class="backtick">bg</tt> </td> <td> Background color. This is the background color of windows and buttons. </td> </tr> <tr> <td> <tt class="backtick">text</tt> </td> <td> Text color for text input widgets and lists (<a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)GtkTreeView.html">/GtkTreeView</a>). </td> </tr> <tr> <td> <tt class="backtick">base</tt> </td> <td> Background color of text widgets and lists. </td> </tr> </tbody></table></div><tt class="backtick">NORMAL</tt> is the state the color should be used for. There are five states inside GTK. <div><table><tbody><tr> <td> State </td> <td> Usage </td> </tr> <tr> <td> <tt class="backtick">NORMAL</tt> </td> <td> The normal color, nothing special happening. </td> </tr> <tr> <td> <tt class="backtick">PRELIGHT</tt> </td> <td> Prelight means mouse over effects. Usually the background will be slightly lighter. </td> </tr> <tr> <td> <tt class="backtick">ACTIVE</tt> </td> <td> This state is used for buttons while the mouse is pressed. </td> </tr> <tr> <td> <tt class="backtick">INSENSITIVE</tt> </td> <td> Used for widgets that are insensitive and cannot be used at that point. </td> </tr> <tr> <td> <tt class="backtick">SELECTED</tt> </td> <td> This state is used for example for selected text. </td> </tr> </tbody></table></div>There are five different ways to describe colors, the most popular is probably the hexadecimal notation used in the example above. The possibilities are <div><table><tbody><tr> <td> hexadecimal </td> <td> "#RGB", "#RRGGBB", "#RRRGGGBBB" and "#RRRRGGGGBBBB" </td> </tr> <tr> <td> floating point </td> <td> {R, B, G} where R, B and G are floating point numbers between and including 0.0 and 1.0 (That is 1.0 not simply 1 as that will be interpreted as an integer) </td> </tr> <tr> <td> integer values </td> <td> {R, B, G} where R, B and G are values between and including 0 and 65535 </td> </tr> <tr> <td> color strings from X </td> <td> eg. "Red", "Magenta", etc. These are shipped with the X server, and can often be found in /etc/X11/rgb.txt </td> </tr> <tr> <td> Symbolic colors and color expressions </td> <td> For example <tt class="backtick">lighter(@color_name)</tt>. Please see <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkThemes(2f)SymbolicColors.html">/SymbolicColors</a> for details.</td> </tr> </tbody></table></div> <h3 id="Applying_the_Style">1.3.2. Applying the Style</h3> At the top of the snippet we defined a style with some colors. Still GTK needs to know where this style should be used. This is done with the line <pre>class "GtkWidget" style "default-style"</pre>This line applies the style "default-style" to every widget that is based on <tt class="backtick">GtkWidget</tt>. As every widget is based on <tt class="backtick">GtkWidget</tt>, it will be used everywhere. In GTK there are three ways to apply styles. These are the <tt class="backtick">class</tt>, <tt class="backtick">widget_class</tt> and <tt class="backtick">widget</tt> statements. Understanding how styles are applied is a key to understanding the whole of the GTK theming system. A very detailed explanation follows. <h4 id="The_different_matching_lines">1.3.2.1. The different matching lines</h4> <h5 id="class">1.3.2.1.1. class</h5> The <tt class="backtick">class</tt> matches based on the widget class hierarchy (again see <a class="http" href="http://developer.gnome.org/doc/API/2.0/gtk/ch01.html">http://developer.gnome.org/doc/API/2.0/gtk/ch01.html</a>). When finding styles relevant to the current widget, it walks down the widget hierarchy, trying if the widgets class name matches the one in the statement. Lets use the example from above, together with a <tt class="backtick">GtkToggleButton</tt>. It will test the following class names (in this order of importance): <ul><li><tt class="backtick">GtkWidget</tt> <- match found here </li><li><tt class="backtick">GtkContainer</tt>, no match </li><li><tt class="backtick">GtkBin</tt>, no match </li><li><tt class="backtick">GtkButton</tt>, no match </li><li><tt class="backtick">GtkToggleButton</tt>, no match </li></ul>Note that you can not only use class names like <tt class="backtick">GtkWidget</tt> but also expressions like "Gt?T*". A '*' stands for arbitary number of characters and a '?' for exactly one. Both of these will also match the dots in the path. <h5 id="widget_class_matches">1.3.2.1.2. widget_class matches</h5> Here the nesting of widgets comes into play. Lets assume a simple "Hello World!" application. In this application you have a <tt class="backtick">GtkWindow</tt> that contains a <tt class="backtick">GtkButton</tt> which contains a <tt class="backtick">GtkLabel</tt> with the text "Hello World". Lets look at the following example: <pre>widget_class "*.GtkButton.*" style "button-content"</pre><div><table><tbody><tr> <td> </td> <td> Classpath </td> </tr> <tr> <td> the window </td> <td> <tt class="backtick">GtkWindow</tt> </td> </tr> <tr> <td> the button inside the window </td> <td> <tt class="backtick">GtkWidget.GtkButton</tt> </td> </tr> <tr> <td> the label inside the button </td> <td> <tt class="backtick">GtkWidget.GtkButton.GtkLabel</tt> </td> </tr> </tbody></table></div><tt class="backtick">"*.GtkButton.*"</tt> only matches to <tt class="backtick">"GtkWidget.GtkButton.GtkLabel"</tt>, so only the label uses the "button-content" style. But there is a catch, if we want "button-content" to also be used for toggle buttons. They usually have look the same way as ordinary buttons. Historically one usually would do things like <pre>widget_class "*.*Button.*" style "button-content"</pre>which will also work for <tt class="backtick">GtkToggleButton</tt>. Since GTK+ 2.10 however there is another way. <pre>widget_class "*.<GtkButton>.*" style "button-content"</pre>The angle brackets work similar to the class match we had earlier (however without pattern matching). So if there is a <tt class="backtick">GtkToggleButton</tt> GTK will notice that it is based on <tt class="backtick">GtkButton</tt> and also apply the style to the label. If you want to theme specific widgets in applications it can be harder to figure out the different paths. One possible way to do this is to use the eXperience engine and setting <tt class="backtick">EXPERIENCE_PRINT_WIDGET_PATH=TRUE</tt> in the command line. (XXX) <h5 id="widget_matches">1.3.2.1.3. widget matches</h5> <tt class="backtick">widget</tt> matches work on the names of the widgets. This is very useful if there is a specific widget in an application that needs to be modified. Similar to the <tt class="backtick">widget_class</tt> match, the matching is done against a string of names separated with dots. If one of the widget does not have a name the class name will be used instead. So, lets consider the above example. The button is named "my-button" and the window is named "my-app". The label does not have any name set. <div><table><tbody><tr> <td> </td> <td> widget path </td> </tr> <tr> <td> the window </td> <td> <tt class="backtick">my-app</tt> </td> </tr> <tr> <td> the button </td> <td> <tt class="backtick">my-app.my-button</tt> </td> </tr> <tr> <td> the label </td> <td> <tt class="backtick">my-app.my-button.GtkLabel</tt> </td> </tr> </tbody></table></div>So if you want to the just the button, you can do something like: <pre>widget "my-app.my-button" style "my-app button fix"</pre> <h4 id="Order_of_the_Merge">1.3.2.2. Order of the Merge</h4> GTK merges the different "matches" in the order we covered them above. Styles merged in later on override the settings of the earlier ones. This makes sense, as the <tt class="backtick">class</tt> matches are very broad while the <tt class="backtick">widget</tt> match is very specific and often picks out single widgets. The order for <tt class="backtick">widget_class</tt> and <tt class="backtick">widget</tt> matches is simply whatever order is in the file, later ones overriding the previous. For <tt class="backtick">class</tt> matches this is different. GTK gives a higher priority if the matched class is higher up in the hierarchy. Lets take this broken example: <pre>class "*" style "default" class "GtkButton" style "button"</pre>This will work great for normal buttons, but it does not work for toggle buttons. This is because <tt class="backtick">GtkToggleButton</tt> matches against the <tt class="backtick">"*"</tt> with a higher priority than it does against the <tt class="backtick">"GtkButton"</tt> match. The styles are merged as following: <div><table><tbody><tr> <td> Test against </td> <td> styles merged in </td> </tr> <tr> <td> <tt class="backtick">GtkWidget</tt> </td> <td> "default" </td> </tr> <tr> <td> <tt class="backtick">GtkContainer</tt> </td> <td> "default" </td> </tr> <tr> <td> <tt class="backtick">GtkBin</tt> </td> <td> "default" </td> </tr> <tr> <td> <tt class="backtick">GtkButton</tt> </td> <td> first "default", then "button" (order in the gtkrc) </td> </tr> <tr> <td> <tt class="backtick">GtkToggleButton</tt> </td> <td> "default" again, which overrides the settings from "button" </td> </tr> </tbody></table></div>As you can see the <tt class="backtick">"default"</tt> style is merged in a lot of times. So using <tt class="backtick">"*"</tt> to assign a default to every widget is not a good idea as GTK+ will be doing excessive work and you may not get the wanted results. <img alt="{i}" height="16" src="/gnome/gnome-responsive/img/icon-info.png" title="{i}" width="16" /> In reality gtk will also match <tt class="backtick">class</tt> up to <tt class="backtick">GObject</tt>, but this does not make any difference in practice. <h4 id="Priority">1.3.2.3. Priority</h4> <img alt="/!\" height="16" src="/gnome/gnome-responsive/img/dialog-warning-symbolic.png" title="/!\" width="16" /> The following is here for completeness sake. It is only needed in very seldom cases to override applications settings. Examples for this are the nautilus "more" widget (ie. the thing at the top that is shown in the trash and when burning CDs/DVDs) or to override GIMP settings. It is possible to add a priority to any of the above "matches". <pre>class "SomeWidget" style : PRIORITY "some-style"</pre>Where PRIORITY is one of the following, sorted by increasing priority: <div><table><tbody><tr> <td> Priority </td> <td> </td> </tr> <tr> <td> <tt class="backtick">lowest</tt> </td> <td> </td> </tr> <tr> <td> <tt class="backtick">gtk</tt> </td> <td> Priority of the built-in theme </td> </tr> <tr> <td> <tt class="backtick">application</tt> </td> <td> dunno what this is for, if application use this they will be overridden by the theme. </td> </tr> <tr> <td> <tt class="backtick">theme</tt> </td> <td> Default priority of themes </td> </tr> <tr> <td> <tt class="backtick">rc</tt> </td> <td> gtkrc files set in the GTK2_RC_FILES environment variable and the standard files <tt class="backtick">~/.gtkrc-2.0</tt> and <tt class="backtick">/etc/gtk-2.0/gtkrc</tt> </td> </tr> <tr> <td> <tt class="backtick">highest</tt> </td> <td> </td> </tr> </tbody></table></div> <h3 id="Engines-1">1.3.3. Engines</h3> <img alt="/!\" height="16" src="/gnome/gnome-responsive/img/dialog-warning-symbolic.png" title="/!\" width="16" /> Hmm, I am not entirely happy with this section. While I think that there is not much it should cover, this feels like it is too little. As said earlier, engines are used to define the look and extend the styles. For example to use the Clearlooks engine, you can just do the following. <pre>style "some-style" { engine "clearlooks" { # engine specific settings go here } }</pre>This means the Clearlooks engine will be used with its default settings. You can modify engine settings in the block. For a description of the possible options for different engines please refere to their documentation at <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)GtkEngines.html">../GtkEngines</a>. <h2 id="Tips">1.4. Tips</h2> There are some preview applications like "The Widget Factory" available. Have a look at <a href="./Attic(2f)GnomeArt(2f)Tutorials(2f)UsefulLinks.html">../UsefulLinks</a>. You can split the <tt class="backtick">gtkrc</tt> file into multiple files by using the <tt class="backtick">include</tt> option. So you could do an extra file just for button styles called <tt class="backtick">button-styles</tt> and simply include that. <pre># include the button-styles file include "button-styles"</pre><div><table><tbody><tr> <td style="width: 30%; text-align: center; background-color: #eaeaea"> <a class="nonexistent" href="./GnomeArt(2f)Tutorials(2f)IconThemes.html">Previous chapter: Icon Themes</a> </td> <td style="width: 40%; text-align: center; background-color: #eaeaea"> <a class="nonexistent" href="./GnomeArt(3a2f)InterWiki.html">Back to Tutorial start page</a> </td> <td style="width: 30%; text-align: center; background-color: #eaeaea"> <a class="nonexistent" href="./GnomeArt(2f)Tutorials(2f)GdmThemes.html">Next chapter: GDM Themes</a> </td> </tr> </tbody></table></div> <h2 id="Check_List">1.5. Check List</h2> <h3 id="Engine">1.5.1. Engine</h3> <ul><li>Have a good GTK+ hacker give a once-over look at the theme engine's code. Is it sane? Does it do anything obviously stupid? Does it leak cairo contexts, GCs, pixmaps, regions, etc.? </li><li class="gap">Check the implementation of the <a class="nonexistent" href="./GtkStyleClass.html">GtkStyleClass</a> virtual methods. Do they handle the "detail" argument correctly (null detail, unexpected string in detail)? Do they handle the "widget" argument correctly (may be null as well)? What happens if you draw very small elements (2x2 pixel boxes, 0x0 pixel boxes, etc.)? <ul><li>gtk-engines has a "torture test" application. This program basically brute forces almost all code paths in an engine. </li></ul></li></ul> <h3 id="Theme">1.5.2. Theme</h3> <ul><li>Check that all the core desktop applications look correct with the theme. "Look correct" means, for example, that there are no sharp/ugly transitions in gradient backgrounds; this may be a bug in the app's widget structure. At least checking for this will help in finding bugs somewhere. </li><li class="gap">Check applications that do funny stuff with widgets. Check the tool bars in Evolution and its message composer; those go through libbonoboui, not GTK+, and this has been known to cause problems with gradient-y themes. </li><li class="gap">Check that flipped widgets in RTL locales are correctly drawn. </li><li class="gap">Check that foreign tool kits using gtk engines for rendering work with your engine. The big applications to try this are <a class="nonexistent" href="./OpenOffice.html">OpenOffice</a> and Firefox. </li><li class="gap">Does the theme have enough contrast on low grade laptop displays? Industrial has problems with this, for example. </li><li class="gap">Does the theme look correct if one increases and decreases the font size? (In addition to text readability, take note of Menu and <a class="nonexistent" href="./SpinButton.html">SpinButton</a> arrows, which change according to font size.) </li><li class="gap">Does the theme have acceptable performance on low-end machines? This is difficult to test, but have someone try it on a low-memory machine equipped with an Intel Pentium II processor. </li></ul></div> </div> <hr> 2024-10-23 10:58 </body> </html>