GTK applications having serious appearance and functionality issues in KDE

English Applications
#1

Hello everyone. I am using openSUSE 12.2 x86_64 KDE.[FONT=arial, helvetica, sans-serif]
[/FONT]
[FONT=arial, helvetica, sans-serif]Here is what my GTK settings look like: http://i.imgur.com/gs435.png.[/FONT]
[FONT=arial, helvetica, sans-serif]
[/FONT]
[FONT=arial, helvetica, sans-serif]And here is what one of the GTK apps, pavucontrol, looks like: http://i.imgur.com/c3t1I.png. As can be seen, the icons are missing, and fonts are larger. [/FONT]
[FONT=arial, helvetica, sans-serif]
[/FONT]
[FONT=arial, helvetica, sans-serif]The case of Eclipse is even worse. The toolbar is so messed up that it’s impossible to work with. http://i.imgur.com/JXld9.png[/FONT]
[FONT=arial, helvetica, sans-serif]
[/FONT]
[FONT=arial, helvetica, sans-serif]How do I solve this problem? Thanks.[/FONT]

#2

I have no idea about eclipse, but pavucontrol is a gtk3 application. You will need to install gtk3 oxygen theme as well.

#3

I installed a gtk3 oxygen theme but it had no effect on it.

Also the settings in first screenshot of mine do not seem to affect pavucontrol, but they affect eclipse and other gtk apps. (I tried a bunch of other window themes that comes pre-installed with SUSE.) Is there a way to install new icon themes and window themes? Perhaps that could solve the problem.

#4

Fwiw, this is what Totem media player looks like. -.-

http://i.imgur.com/rtMHn.png

#5

I edited my ~/.config/gtk-3.0/settings.ini as follows:


[Settings]
gtk-theme-name= oxygen-gtk
gtk-icon-theme-name= oxygen
gtk-fallback-icon-theme = gnome
gtk-font-name = Sans 10
gtk-toolbar-style=
gtk-menu-images=0
gtk-button-images=0
gtk-application-prefer-dark-theme = true

The apps look and work fine now. Here is totem: http://i.imgur.com/p986Y.png, and here is pavucontrol: http://i.imgur.com/mVMbi.png.

As for Eclipse, this new config has no effect on it. So I switched its theme to classic.This is what it looks like now: http://i.imgur.com/kgywm.png

So I mark this issue as solved. Thanks again to whoever replied! Much appreciated.

#6

last time I saw Eclipse, it was using gtk2. So do still many programs, such as Gimp for example. You need ~/.gtkrc-2.0 and ~/.gtkrc-2.0-kde4.

$ cat .gtkrc-2.0-kde4
# This file was written by KDE
# You can edit it in the KDE control center, under "GTK Styles and Fonts"

include "/usr/local/share/themes/niglo-openSUSE/gtk-2.0/gtkrc"

style "user-font"
{
        font_name="Sans Serif"
}
widget_class "*" style "user-font"

gtk-theme-name="niglo-openSUSE"
gtk-font-name="Sans Serif 9"


$ cat .gtkrc-2.0
# Autowritten by gnome-settings-daemon. Do not edit

gtk-font-name="Bitstream Vera Sans 9"
include "/usr/local/share/themes/niglo-openSUSE/gtk-2.0/gtkrc"

Just replace the text in red with the path and name of your GTK2 theme. Eclipse doesn’t work with “any” GTK theme. If it doesn’t like a single setting in gtkrc, it might just crash.

#7

Thank you for all the information! The ~/.gtkrc-2.0 file was not present on my system. I just added it as per your instructions. I don’t know any application that requires this file, so I cannot test how it’ll work out.

#8

I’m afraid I can - finally - explain what’s the problem with GTK3 apps (not GTK2!) under KDE or any other DE besides Gnome. I haven’t noticed earlier because I use “uncompressed” GTK3 themes … until I compiled one of my themes (under ArchLinux and Gnome 3.6, but it’s irrelevant) and opened a GTK3 app under icewm, then KDE, then did the same on openSUSE… and to take the same example as the OP in post #1, here’s how pavucontrol looks like under KDE (again, or any other DE except Gnome):

http://img542.imageshack.us/img542/7402/pavucontrolkde.png

Functional … but not particularly exiting. However, here’s how it is supposed to look like:

http://img217.imageshack.us/img217/3430/pavucontrolgtk3.png

I know, you don’t like it and you’d prefer the first one. But to anyone wondering what makes the difference, here’s the explanation:

Gnome 3 - since version 3.2, I guess but not 100% sure - uses GTK themes in binary form as a single resource file usually called gtk.gresource - the default one being in /usr/share/themes/Adwaita/gtk-3.0. It is loaded from gtk.css in this directory, a tiny file consisting of a single line:

@import url("resource:///org/gnome/adwaita/gtk-main.css");

You can list the content of gtk.gresource with the command gresource (under openSUSE in package glib2-tools). For the default Adwaita theme, it would produce something like that (I deleted most lines in the output below because they just show icons and are uninteresting):


$  gresource list /usr/share/themes/Adwaita/gtk-3.0/gtk.gresource 

/org/gnome/adwaita/assets/checkbox-checked-alt-dark.png
/org/gnome/adwaita/assets/checkbox-checked-alt.png
...
/org/gnome/adwaita/borders/button-border-dark.svg
/org/gnome/adwaita/borders/button-border-focused-dark.svg
...
/org/gnome/adwaita/gnome-applications.css
/org/gnome/adwaita/gtk-main-dark.css
/org/gnome/adwaita/gtk-main.css
/org/gnome/adwaita/gtk-widgets-assets-dark.css
/org/gnome/adwaita/gtk-widgets-assets.css
/org/gnome/adwaita/gtk-widgets-backgrounds.css
/org/gnome/adwaita/gtk-widgets-borders-dark.css
/org/gnome/adwaita/gtk-widgets-borders.css
/org/gnome/adwaita/gtk-widgets-dark-overrides.css
/org/gnome/adwaita/gtk-widgets.css

You can also extract this content (see man gresource) … unfortunately only the plain text files (.css), not the .png and .svg files if they were compiled with the to-pixdata preprocessing option (more info here: glib-compile-resources). If all icon files show the same size in** gresource details**, you can assume that they were.


$ gresource details /usr/share/themes/Adwaita/gtk-3.0/gtk.gresource  
  1048 u /org/gnome/adwaita/assets/checkbox-checked-alt-dark.png
  1048 u /org/gnome/adwaita/assets/checkbox-checked-alt.png
  1048 u /org/gnome/adwaita/assets/checkbox-checked-backdrop-dark.png
...
  1304 u /org/gnome/adwaita/assets/scale-slider-down-backdrop-dark.png
  1304 u /org/gnome/adwaita/assets/scale-slider-down-backdrop-insensitive-dark.png
  1304 u /org/gnome/adwaita/assets/scale-slider-down-backdrop-insensitive.png
...
  1048 u /org/gnome/adwaita/assets/sidebar-radio-checked-dark.svg
  1048 u /org/gnome/adwaita/assets/sidebar-radio-checked.svg
  1048 u /org/gnome/adwaita/assets/sidebar-radio-prelight.svg
...
 19254 u /org/gnome/adwaita/gnome-applications.css
  9266 u /org/gnome/adwaita/gtk-main-dark.css
 10041 u /org/gnome/adwaita/gtk-main.css
  8670 u /org/gnome/adwaita/gtk-widgets-assets-dark.css
  8602 u /org/gnome/adwaita/gtk-widgets-assets.css
  7770 u /org/gnome/adwaita/gtk-widgets-backgrounds.css
  8027 u /org/gnome/adwaita/gtk-widgets-borders-dark.css
  8016 u /org/gnome/adwaita/gtk-widgets-borders.css
  6265 u /org/gnome/adwaita/gtk-widgets-dark-overrides.css
 65055 u /org/gnome/adwaita/gtk-widgets.css

I found that you could also compile them as regular files- and that’s what I do, in order to be able to extract them later if needed (for example to modify the theme). It also makes gtk.gresource smaller. I should say that I fail to see the advantages of preprocessing these files* … Anyway, I’m not going to discuss the Gnome development here.

To use your GTK3 theme outside of Gnome, it suffices to create a symlink ~/.config/gtk-3.0 pointing to the gtk-3.0 subdirectory of your GTK3 theme. Here’s what I use:


$ readlink ~/.config/gtk-3.0
/usr/local/share/themes/niglo-openSUSE/gtk-3.0

The list of files composing the theme, once compiled, looks pretty much like the default Adwaita theme:


$ find  /usr/local/share/themes/niglo-openSUSE/gtk-3.0                    
/usr/local/share/themes/niglo-openSUSE/gtk-3.0
/usr/local/share/themes/niglo-openSUSE/gtk-3.0/gtk-light.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0/settings.ini
/usr/local/share/themes/niglo-openSUSE/gtk-3.0/gtk-dark.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0/gtk.gresource
/usr/local/share/themes/niglo-openSUSE/gtk-3.0/gtk.css

This precisely only works in Gnome, because - as far as I understand - noone else is able to read gtk.gresource (yet?) . >:(
It is not better under Gnome 3.6. It is worse. In the meantime ~/.config/gtk-3.0 has become deprecated and produce a bunch of warnings in your logs.

To have GTK3 apps using their dedicated theme under KDE, icewm … and pure twm as well, you need to use a ‘normal’, uncompressed theme, not a gtk.gresource file. The only way I know to achieve this is to install the theme source and copy the files instead of compiling them, but there might be “plain” GTK3 themes available. I don’t know.

Making my ~/.config/gtk-3.0 symlink point to another directory, containing a plain theme will do the trick:

$ readlink ~/.config/gtk-3.0
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome

The content of this directory (.css, .png and .svg files) is similar to the content of gtk.gresource.


$ find  /usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome                      
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk-widgets-assets-dark.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk-main.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/assets
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/assets/menuitem-radio-checked-insensitive.png
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/assets/scale-slider-up-backdrop-insensitive-dark.png
...
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/assets/sidebar-radio-checked.svg
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/assets/scale-slider-right-backdrop-insensitive.png
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk-widgets.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk-widgets-borders.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk-widgets-dark-overrides.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/settings.ini
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk-main-dark.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk-widgets-assets.css
...
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/borders/primary-toolbar-button-border-focused-dark.svg
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/borders/tooltip-generic-border.svg
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk-dark.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk-widgets-borders-dark.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk.gresource.xml
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gnome-applications.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk-widgets-backgrounds.css
/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/gtk.css

With this plain themes, gtk.css looks like this:

@import url("/usr/share/themes/niglo/gtk-3.0.nognome/gtk-main.css");

while, with gtk.gresource, it uses the following syntax:

@import url("resource:///org/gnome/adwaita/gtk-main.css");
  • Actually, I see the advantages, but as long as GTK apps only look acceptable under Gnome, I mainly see the inconveniences.
#9

Totem is actually not a good example, because it uses GTK3 dark theme by default (no idea why). See this post in Ubuntu’s forum: 12.04 - Why Totem, EOG, …? have dark toolbars with default gnome-shell theme - Adwaita? - Ask Ubuntu. To make Totem (and Eog) look like the other GTK3 apps, you have to either rewrite the dark theme or make gtk-dark.css load gtk-main.css instead of gtk-main-dark.css.

$ cat gtk-dark.css 
@import url("/usr/local/share/themes/niglo-openSUSE/gtk-3.0.nognome/**gtk-main.css**");

That does the trick. Of course it is only possible if you use uncompressed theme, as I explained earlier.

http://img840.imageshack.us/img840/2988/totemq.png

Notice that my theme is dark anyway (but consistant).