application icongmusicbrowser

Gtk2 (gmusicbrowser v1.1.x and older)

A few notes to explain how to theme gmusicbrowser using customs gtk themes.
Feel free to improve this page.

First you need to have some knowledge about how gtk themes works, this page have all the technical details.

To launch gmusicbrowser with a custom gtkrc file, you can type this :

GTK2_RC_FILES=gtkrc gmusicbrowser

replace gtkrc by the full or relative path and filename.

To help finding the path of widgets you want to theme, I've added some functions to my Debug.pm plugin, you can find it there (put it in ~/.config/gmusicbrowser/plugins/). Note that some things will not work with version older than 1.0.2 (widget names and the WB container).

Example of what you can put in a gtkrc file :

style "test"
{      bg[NORMAL]   = "#000000"
       fg[NORMAL]   = "#ffffff"
       base[NORMAL] = "#000000"
       text[NORMAL] = "#ffffff"
}

widget_class "*" style "test"

This define the style “test”, the style simply defines the 4 colors bg, fg, base, and text in the “NORMAL” state. Widgets use some or all of these colors to draw themselves. A widget can be in 5 states : NORMAL, ACTIVE, PRELIGHT, SELECTED and INSENSITIVE.

The theme is applied to all widgets which class_path match “*”, that is all widgets. The class_path is a string made of the class name of all widget and all of its parents, joined by a period “.”, the character “*” match 0 or more characters.

For example, the “Total” gmb widget is made up of a gtkbutton containing a gtklabel. In the Browser layout the gtk_label of Total has this class_path : GtkWindow.SVBox.SHBox.GtkButton.GtkLabel So to apply the style “test” to only the gtklabel of the Total widget, you would have to use :

widget_class "GtkWindow.SVBox.SHBox.GtkButton.GtkLabel" style "test"

But, this has a few problems :

  1. the class path is very generic and is likely to match another widget. So I've made gmusicbrowser give names to some of the gtk widgets. The windows have the name of the layout id, and the toplevel gtk widgets of gmb widgets get the name of the gmb widget. So for example, with the “Total” widget in the Browser layout, its path becomes : Browser.VBmain.HBstatus.Total.GtkLabel
  2. the “Total”'s gtkbutton is set to use the relief 'none', which means that the button part is not drawn when in NORMAL state, so the background of the button is drawn by its parents. And as HBoxes and VBoxes do not draw anything either, the background of the button in NORMAL state is drawn by the gtkwindow. So I've added a new Container in gmb : WB, W because its purpose is to have its own gdkWindow, not a very good name, but the namespace is getting more crowded than anticipated. It's actually an gtk_eventbox.
  3. the composition of gmb widgets could change in the future, that, sadly, will always be a possibility, making good use of “*” helps a bit.

So by modifying the Browser layout like this :

  1. replace Total by WBTotal
  2. WBTotal = Total

the path of “Total”'s gtklabel becomes : Browser.VBmain.HBstatus.WBTotal.Total.GtkLabel
And with a gtkrc of :

style "test" = "theme-default"
{      bg[NORMAL]   = "#000000"
       fg[NORMAL]   = "#ffffff"
       base[NORMAL] = "#000000"
       text[NORMAL] = "#ffffff"
}

widget "Browser.*WBTotal*" style "test"

Note that this time it uses “widget” instead of “widget_class” to match against the path of the widget instead of its class_path. The style “test” is applied to all gtk widgets named WBTotal and their children, only in a the “Browser” Layout. And the background of the button is black in NORMAL state.

Gtk3 (current beta and future gmusicbrowser versions)

Gtk3 uses a completely different theme system.

To launch gmusicbrowser with a custom gtk3 theme, for example named gmbtheme, you can type this :

GTK_THEME=gmbtheme gmusicbrowser

To create the custom theme, create ~/.themes/gmbtheme/gtk-3.0/ and put a gtk.css file in that folder that could contain for example:

@import url("/usr/share/themes/TraditionalOk/gtk-3.0/gtk.css");
@define-color theme_bg_color #000000;
@define-color theme_fg_color #ffffff;
 * {
  color: #ff00ea;
  font: 30px "Comic Sans";
}

Obviously that is just a silly example to get started, you can use that to change many many things, more info there. That method even allows you to theme specific widgets of gmusicbrowser, to get access to the widget names and hierarchy, you can use GtkInspector

customization/themes.txt · Last modified: 2022/05/23 01:30 by 127.0.0.1
CC Attribution-Share Alike 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0