XFCE > les thèmes GTK+

UTILISER UN THÈME

Les thèmes sont stockés dans /usr/local/share/themes

 

Pour utiliser un thème, copier le fichier /usr/local/share/themes/NOM-THEME/gtk/gtkrc dans ~/.gtkrc.

 

exemple :

cp /usr/local/share/themes/Redmond95/gtk/gtkrc ~/.gtkrc

 

Supprimer un thème : effecer le fichier .gtkrc ou

 

cp /usr/local/share/themes/Default/gtk/gtkrc ~/.gtkrc

INSTALLER UN THÈME

1 - télécharger le thème

 

2 - décompresser le gz dans un dossier : tar xzvf fichier.tar.gz

 

3 - créer un fichier .gtkrc et insérer : pixmap_path "/chemin/vers/dossier/du/theme/gtk/"

 

5 - Copier ce fichier dans ~/.gtkrc : cp gtkrc ~/.gtkrc

 

6. Si ça ne marche pas : module_path ".:/usr/share/themes/Xenophilia/engine"

 

———

 

gtk-can-change-accels = 1

gtk-menu-drop-shadow = 1

gtk-menu-shadow-delay = 100

 

style "default"
{
...
}

 

GtkButton::default_border = {0, 0, 0, 0}

GtkButton::default_outside_border = {0, 0, 0, 0} # bordure autour du bouton FERMER GtkButton::default_spacing = 10 GtkButton::focus-line-width = 1 GtkButton::focus-padding = 0

GtkCheckButton::indicator_size = 15 # taille de l’indicateur pour le roll over GtkMenuBar::shadow_type = out GtkMenuItem::selected_shadow_type = out

GtkPaned::handle_full_size = 1

GtkPaned::handle_size = 8 # for the movable divider in Thunar between the folders of the leftside and rightside

GtkRange::slider_width = 15

GtkRange::stepper_size = 15

GtkRange::stepper_spacing = 0

GtkRange::trough_border = 0

GtkScrollbar::min_slider_length = 37 # smallest size of scroll bar slider to match size of buttons (4 X 4), it looks good in User inter Pref.

GtkToolbar::shadow_type = out # I changed this from none to out to fix the way it looks in certain apps. There are other ways to draw the shadows with "etched-in" and other ways. Just read other xfce gtkrc files to learn. GtkWidget::focus-line-width = 1

GtkWidget::focus_padding = 2

GtkWidget::interior_focus = 5

GtkWidget::internal_padding = 0

 

xthickness = 0 # changed from 2 to 0 to make the dividing lines between icons disappear

ythickness = 0 # changed from 2 to 0 to make the dividing lines between tool bars disappear.

fg[NORMAL] = font color in the menu bars in FF and xubuntu, and also the color of the app in the pager that is open on a different Desktop.

 

fg[ACTIVE] = font color of a unopened tab and of the text for a roll-over check box before it is rolled over. Example: like the font for the check boxes for- "Use hinting :" in User Interface Pref

fg[PRELIGHT] = Selected (roll over) font color of check boxes like- "Use hinting :"

fg[SELECTED] = The opened app color in the pager for the Desktop you are on.

fg[INSENSITIVE] = couleurlor of the font that can’t be clicked (usually lighter) that is in drop down menus, also the Firefox right click menu for the "Back" and "Forward" options for when you can’t go back or forward. This is also the color of the the word "Google" in the search bar before you type anything. Also the arrows of the scroll bars.

 

bg[NORMAL] = overall color of the Browser for Firefox, xubuntu/ubuntu, Thunderbird, and all apps. It creates the color that is used for my gradient browser themes. It is also all of the buttons, scroll bar handles, panel handle, Drop down menus (before you roll over them with the mouse tool tip).

bg[ACTIVE] = Scroll bar gradient background color, unopened Tab background color.

bg[PRELIGHT] = couleur de la barre de progression (Firefox tabs), or the downloading process bar as seen in Firefox Downloading Manager. Also is the selected color of background for check boxes like- "Use hinting" in the User Inter Prefs. And the color of the scroll bar slider when you press it- (basically where the you move a scroll bar at).

bg[SELECTED] = End Session border color for the End Session dialog box. Also the filler color of an open app on top of another app in the Desktop you have open in the pager.

bg[INSENSITIVE] = Toggle buttons that can’t be clicked, regular Menu arrow backgrounds, nonactive check box outlines and nonactive radio button outlines

 

text[NORMAL] = Font color used for Mousepad, Url font, Thunar font, xubuntu menus (not selected). Checks for check boxes, radio dots too. Combobox, ComboBoxEntry, GtkCombo, GtkEntry, and numbers in numberbox.

text[ACTIVE] = font color in the left side of the Thunar File System- Home, Trash, Desktop, File System, when you are in a different folder like /usr.

text[PRELIGHT] = Radio/Checksfont colors.

text[SELECTED] = Highlighted font color in web pages and mousepad. Selected font color in the Thunar file system, and xubuntu menus like User interface.

text[INSENSITIVE] = nonactive font in un-clickable Combos and GtkCombos. un-clickable radio/checks.

base, Les zones de saisie, les checkbox et les boutons radio

base[NORMAL] = couleur de fond par défaut des boutons. Firefox : couleur de fond de la barre des URL/Recherche.

base[ACTIVE] = couleur de fond for the last folder opened folder of Thunar. If you have Thunar open to File system-->--usr or "/usr", the File system folder (on the left, and any other folder in a different app like User Interface Pref.), will have this bg color while you are in the currently opened /usr folder.

base[PRELIGHT] = couleur de fond quand survolé.

base[SELECTED] = couleur de fond quand sélectionné. Also the background color of Highlighted text.

base[INSENSITIVE] = couleur de fond quand non sélectionnable ou inactif.

 

engine "xfce"

{

grip_style = slide

smooth_edge = true

boxfill # I added a boxfill here to create a gradient in my toolbar.

# I use shade_start = 0.90 to start the gradient darker at the top of the tool bar

# I use shade_start = 1.10 to start the gradient lighter at the top of the tool bar

# I use shade_end = 1.00 to end the gradient at a 100% fill of the bg[NORMAL] color, this way the color blends perfectly into the app.

# NOW……..if you don’t want to use a Firefox userChrome.css to fix the tab-bar…you can do it my old way of fading into the Firefox

# default gradient used….it’s usually near shade_end = 0.87 and just match the shade_start in the same way, so that it matches the shade_end of the menu bar.

 

{

fill_style = gradient

orientation = auto

shade_start = 0.90

shade_end = 1.00

}

}

}

widget_class "*" style "default"

 

———

style "colored" = "default"
{
   xthickness = 4 # Play around with this for your own preference.
   ythickness = 4 # I changed from 3 to 4 to make the Thunar Path Box taller.

   bg[ACTIVE] = Active button on panel handle, selected background color when clicking any app button, (not Firefox), ComboBox Drop down menu arrow button bg.
   bg[PRELIGHT] = Rollover background color (hover) on all buttons and drop down menus.

   fg[ACTIVE] = Font for active button, ComboBoxEntry drop down foreground arrow.
   fg[PRELIGHT] = Font color for all selected buttons (roll over) except ComboBox and ComboBoxEntry (only arrows), Also font color for all rollover drop down menus.

   text[ACTIVE] = Old highlighted font (like if you highlight text, and then click on a different window, the text color and bg color will change.
                  #This is for the text foreground font color for the base[active] background color.
                  #(basically, "active" is like a folder that is opened before opening the next folder which is base[selected] and text[selected] )
   text[PRELIGHT] = ComboBox and ComboBoxEntry font color.

   engine "xfce"
   {
      {
         fill_style = gradient # can be (gradient, plain)
         orientation = vertical # can be (auto, vertical, )
         shade_start = 1.24 # le dégradé commence par le haut. 
         shade_end = 0.83 # Also mess with the percentage numbers for your own style.
      }
   }
}
widget_class "*List*" style "colored"
class "*List*" style "colored"
widget_class "*Text*" style "colored"
class "*Text*" style "colored"
widget_class "*Entry*" style "colored"
class "*Entry*" style "colored"

 

# And now a new style starts for menubar

 

style "menubar" = "colored"
{
   xthickness = 0 # I changed this from 2 to 0 to change size of the dividing lines between the icons on the menu bar.
   ythickness = 0 # I changed this from 2 to 0 to erase the dividing line between the menu bar and the tool bar.
   engine "xfce"
   {
      {
         fill_style = gradient
         orientation = auto
         shade_start = 0.80 # 0.80 is a darker gradient, 1.20 is a lighter gradient
         shade_end = 0.90 # 0.90 is the exact color of the top of the toolbar...also 1.10 would be the same if you made it lighter...
      }
   }
}
widget_class "*BonoboDockItem" style "menubar"
class "*BonoboDockItem" style "menubar"
widget_class "*HandleBox" style "menubar"
class "*HandleBox" style "menubar"
widget_class "*ToolBar" style "menubar"
class "*ToolBar" style "menubar"
widget_class "*MenuBar" style "menubar"
class "*MenuBar" style "menubar"

 

style "menuitem" = "colored"

{

xthickness = 2

ythickness = 2

 

engine "xfce"

{

smooth_edge = true

grip_style = slide

boxfill

{

fill_style = gradient

orientation = auto

shade_start = 1.73 # I have changed the percentage and flipped it to create a different look in the drop down menus. Play around with this for your own preference.

shade_end = 0.83 # I have changed the percentage and flipped it to create a different look in the drop down menus. Play around with this for your own preference.

}

}

}

widget_class "*MenuItem*" style "menuitem"

class "*MenuItem*" style "menuitem"

 

style "scrollbar" = "default"

{

xthickness = 0 # I changed this from 2 to 0 to change the space divider between the scroll bar slider, and the scroll arrows. 0 is no space. Play around with this for your own preference.

ythickness = 1 # I changed this from 2 to 1 to change the way the progress looks in the Firefox tabs. It’s wider. Play around with this for your own preference.

engine "xfce"

{

smooth_edge = true

grip_style = slide

boxfill

{

fill_style = gradient

orientation = auto

shade_start = 1.73 # I have changed the percentage and flipped it to create a different "bubbled out" look in the scroll bar. Play around with this for your own preference.

shade_end = 0.60 # I have changed the percentage and flipped it to create a different "bubbled out" look in the scroll bar. Play around with this for your own preference.

}

}

}

widget_class "*Scrollbar*" style "scrollbar"

class "*Scrollbar*" style "scrollbar"

widget_class "*GtkProgress*" style "scrollbar"

class "*GtkProgress*" style "scrollbar"

 

style "button" = "colored"

{

xthickness = 4 # I changed this from 3 to 4 to make my buttons wider

ythickness = 4 # I changed this from 3 to 4 to make my buttons longer.

 

engine "xfce"

{

smooth_edge = true

grip_style = slide

boxfill

{

fill_style = gradient

orientation = vertical

shade_start = 1.92 # I have changed the percentage and flipped it to create a different "bubbled out" look

shade_end = 0.82 # I have changed the percentage and flipped it to create a different "bubbled out" look

}

}

}

widget_class "*Button*" style "button"

class "*Button*" style "button"

widget_class "*button*" style "button"

class "*button*" style "button"

widget_class "*Togglebutton*" style "button"

class "*Togglebutton*" style "button"

widget_class "*togglebutton*" style "button"

class "*togglebutton*" style "button"

widget_class "*OptionMenu*" style "button"

class "*OptionMenu*" style "button"

widget_class "*Tree*" style "button"

class "*Tree*" style "button"

widget_class "*GtkScale*" style "button"

class "*GtkScale*" style "button"

 

widget_class "*CheckButton*" style "default"

class "*CheckButton*" style "default"

widget_class "*RadioButton*" style "default"

class "*RadioButton*" style "default"

 

# OK I removed the rox filer part since I don’t have it installed.

 

# This is for the window borders (xfwm4 & metacity)

#

style "titlebar" = "default"

{

bg[SELECTED] = color for opened window frame (window in front of windows)

fg[SELECTED] = color of titlebar text on open frame (window in front of windows)

bg[INSENSITIVE] = color for non-opened window frame (windows behind the open window)

fg[INSENSITIVE] = color of titlebar text on non-open frame (windows behind the open window)

}

 

widget "xfwm" style "titlebar"

class "MetaFrames" style "titlebar"

widget_class "MetaFrames" style "titlebar"

 

# I removed this part so it doesn’t use the rodent yellow "X" close button and menu icons: (include "/usr/share/icons/Rodent/iconrc-png")

That way it uses all of the icons from my different icon packs for the close buttons…and other buttons.

 

———

LE FICHIER gtkrc

Créer un style intitulé "default-style" qui sera appliqué à tous les widgets.

 

style "default-style"
{
   # 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"

LES STYLES

xthickness ythickness

espace entre le texte et la bordure (padding)

 

xthickness = 3
ythickness = 3

Style Properties

WidgetName::style-property-name = VALUE

 

exemple : Donner une valeur de 15 à la propriété "slider-width" pour le style /GtkRange :

 

GtkRange::slider-width = 15

 

Liste de toutes propriétés : /StyleProperties.

 

GTK_SHADOW_IN, integers and color values.

 

NOTE : on utilisera 1 ou 0 pour TRUE ou FALSE.

 

Some examples of style properties:

 

GtkWidget::focus-line-width -> Width of the focus line -> GtkWidget::focus-line-width = 2

GtkWidget::link-color ->  Color of unvisited links -> GtkWidget::link-color = "#0000ff"

 

An interesting feature is that you can easily set style properties on subclasses only. So instead of setting GtkRange::trough-side-details on a style only applied to GtkScale, you can just set it only on the scale.

 

style "default" {
   GtkScale::trough-side-details = 1
}

class "GtkWidget" style "default"

 

This will only affect /GtkScale, and not scrollbars.

Colors

bg[NORMAL] = "#f6f6f6"

 

bg stands for background. There are four valid categories:

 

Category	Usage
fg	Foreground color. Used for text on buttons. Also used for the button borders in some engines.
bg	Background color. This is the background color of windows and buttons.
text	Text color for text input widgets and lists (/GtkTreeView).
base	Background color of text widgets and lists.

 

NORMAL is the state the color should be used for. There are five states inside GTK.

 

State	Usage
NORMAL	The normal color, nothing special happening.
PRELIGHT	Prelight means mouse over effects. Usually the background will be slightly lighter.
ACTIVE	This state is used for buttons while the mouse is pressed.
INSENSITIVE	Used for widgets that are insensitive and cannot be used at that point.
SELECTED	This state is used for example for selected text.

 

There are five different ways to describe colors, the most popular is probably the hexadecimal notation used in the example above. The possibilities are

 

hexadecimal	"#RGB", "#RRGGBB", "#RRRGGGBBB" and "#RRRRGGGGBBBB"
floating point	{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)
integer values	{R, B, G} where R, B and G are values between and including 0 and 65535
color strings from X	eg. "Red", "Magenta", etc. These are shipped with the X server, and can often be found in /etc/X11/rgb.txt
Symbolic colors and color expressions	For example lighter(@color_name). Please see /SymbolicColors for details.

Applying the Style

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

 

class "GtkWidget" style "default-style"

 

This line applies the style "default-style" to every widget that is based on GtkWidget. As every widget is based on GtkWidget, it will be used everywhere.

In GTK there are three ways to apply styles. These are the class, widget_class and widget statements. Understanding how styles are applied is a key to understanding the whole of the GTK theming system. A very detailed explanation follows.

class

The class matches based on the widget class hierarchy (http://developer.gnome.org/doc/API/2.0/gtk/ch01.html).

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 GtkToggleButton.

It will test the following class names (in this order of importance):

• GtkWidget <- match found here
• GtkContainer, no match
• GtkBin, no match
• GtkButton, no match
• GtkToggleButton, no match

Note that you can not only use class names like GtkWidget 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.

widget_class matches

Here the nesting of widgets comes into play. Lets assume a simple "Hello World!" application. In this application you have a GtkWindow that contains a GtkButton which contains a GtkLabel with the text "Hello World".

Lets look at the following example:

 

widget_class "*.GtkButton.*" style "button-content"

 

Classpath

the window GtkWindow

the button inside the window GtkWidget.GtkButton

the label inside the button GtkWidget.GtkButton.GtkLabel

 

"*.GtkButton.*" only matches to "GtkWidget.GtkButton.GtkLabel", 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

 

widget_class "*.*Button.*" style "button-content"

 

which will also work for GtkToggleButton. Since GTK+ 2.10 however there is another way.

 

widget_class "*.<GtkButton>.*" style "button-content"

 

The angle brackets work similar to the class match we had earlier (however without pattern matching). So if there is a GtkToggleButton GTK will notice that it is based on GtkButton 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 EXPERIENCE_PRINT_WIDGET_PATH=TRUE in the command line. (XXX)

widget matches

widget 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 widget_class 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.

 

widget path

the window my-app

the button my-app.my-button

the label my-app.my-button.GtkLabel

 

So if you want to the just the button, you can do something like:

 

widget "my-app.my-button" style "my-app button fix"

Order of the Merge

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 class matches are very broad while the widget match is very specific and often picks out single widgets. The order for widget_class and widget matches is simply whatever order is in the file, later ones overriding the previous.

For class matches this is different. GTK gives a higher priority if the matched class is higher up in the hierarchy. Lets take this broken example:

 

class "*" style "default"
class "GtkButton" style "button"

 

This will work great for normal buttons, but it does not work for toggle buttons. This is because GtkToggleButton matches against the "*" with a higher priority than it does against the "GtkButton" match. The styles are merged as following:

 

Test against	styles merged in
GtkWidget	"default"
GtkContainer	"default"
GtkBin	"default"
GtkButton	first "default", then "button" (order in the gtkrc)
GtkToggleButton	"default" again, which overrides the settings from "button"

 

As you can see the "default" style is merged in a lot of times. So using "*" 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.

 

In reality gtk will also match class up to GObject, but this does not make any difference in practice.

Priority

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

 

class "SomeWidget" style : PRIORITY "some-style"

 

Where PRIORITY is one of the following, sorted by increasing priority:

 

Priority
lowest
gtk	Priority of the built-in theme
application	dunno what this is for, if application use this they will be overridden by the theme.
theme	Default priority of themes
rc	gtkrc files set in the GTK2_RC_FILES environment variable and the standard files ~/.gtkrc-2.0 and /etc/gtk-2.0/gtkrc
highest

Engines

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.

 

style "some-style" {
   engine "clearlooks" {
      # engine specific settings go here
   }
}

 

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 ../GtkEngines.

Tips

There are some preview applications like "The Widget Factory" available. Have a look at ../UsefulLinks.

You can split the gtkrc file into multiple files by using the include option. So you could do an extra file just for button styles called button-styles and simply include that.

 

# include the button-styles file
include "button-styles"

Check List

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

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

- Check that flipped widgets in RTL locales are correctly drawn.

- Check that foreign tool kits using gtk engines for rendering work with your engine. The big applications to try this are OpenOffice and Firefox.

- Does the theme have enough contrast on low grade laptop displays? Industrial has problems with this, for example.

- Does the theme look correct if one increases and decreases the font size? (In addition to text readability, take note of Menu and SpinButton arrows, which change according to font size.)

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