Gtk.CssProvider () how do ID-based selectors work in Gtk3?

Question

I have been doing this for several days, but I just can’t understand what could be.

Essentially, I'm trying to create some Gtk widgets in Gtk3 using CSS style declarations, nothing complicated, but just trying to customize the target element by its id / name. Gtk documentation for Gtk.CssProvider () says that

#widgetname { background-color: #333333; } 

should work as a valid selector for the widget with its name set to "widgetname", but I just can't get it to work. Initially, I thought CSS was not loading, but I can target top-level widgets:

 GtkWindow { background-color: #333; } 

and it will apply style to the window, and I see that the background color has changed. I tried using this name as an identifier for several different types of widgets (GtkEventBox, GtkTextView, GtkStatusBar, GtkBox), and the ID-based selector just doesn't work.

Here is a shortened snippet of how I load css:

 css = Gtk.CssProvider() # css.load_from_file(file) css.load_from_data(''' GtkWindow { background-color: #333; } GtkEventBox { background-color: #333; } #statusbarwrap, #textview_event_wrap, #box1 { background-color: #333; } ''') style_context = self.get_style_context() style_context.add_provider( css, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION) 

Here are the docs for GtkCssProvider https://developer.gnome.org/gtk3/3.7/GtkCssProvider.html

Example 24 on this page (just scroll down the page or page) shows that the #ID selector is valid, and I'm setting the name for the widgets in Glade.

Any help would be greatly appreciated.

Answer 1

We can use 'gtk_widget_set_name ()' to give this widget a name (ID).

 win = Gtk.Window() win.set_name('main_window') 

then '#main_window' can be used as an ID selector in CSS3:

 #main_window { background-color: ... } 

If you open a gladiation file using a text editor, you can find out that the widget name is actually written as id, for example:

 <object class="GtkWindow" id="window1"> 

Note that the widget name must not contain special characters, such as *, # or>, which are part of the CSS syntax.

Answer 2

The following is a complete example that I am posting here to clarify the confusion between names and identifiers in Gtk3 + CSS:

german.py

 # coding: utf-8 from gi.repository import Gtk, Gdk import time builder = Gtk.Builder() builder.add_from_file("german.glade") builder.connect_signals({"closeApplication": Gtk.main_quit}) screen = Gdk.Screen.get_default() css_provider = Gtk.CssProvider() css_provider.load_from_path('german.css') context = Gtk.StyleContext() context.add_provider_for_screen(screen, css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER) window = builder.get_object("applicationwindow1") window.show_all() Gtk.main() 

german.css

 #blackBox { background-color: black; } #redBox { background-color: red; } .goldBox { background-color: gold; } 

german.glade

 <?xml version="1.0" encoding="UTF-8"?> <!-- Generated with glade 3.16.1 --> <interface> <requires lib="gtk+" version="3.0"/> <object class="GtkApplicationWindow" id="applicationwindow1"> <property name="can_focus">False</property> <signal name="delete-event" handler="closeApplication" swapped="no"/> <child> <object class="GtkBox" id="box1"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="orientation">vertical</property> <child> <object class="GtkEventBox" id="blackBox"> <property name="visible">True</property> <property name="can_focus">False</property> <child> <placeholder/> </child> </object> <packing> <property name="expand">True</property> <property name="fill">True</property> <property name="position">0</property> </packing> </child> <child> <object class="GtkEventBox" id="eventbox2"> <property name="name">redBox</property> <property name="visible">True</property> <property name="can_focus">False</property> <child> <placeholder/> </child> </object> <packing> <property name="expand">True</property> <property name="fill">True</property> <property name="position">1</property> </packing> </child> <child> <object class="GtkEventBox" id="eventbox3"> <property name="visible">True</property> <property name="can_focus">False</property> <child> <placeholder/> </child> <style> <class name="goldBox"/> </style> </object> <packing> <property name="expand">True</property> <property name="fill">True</property> <property name="position">2</property> </packing> </child> </object> </child> </object> </interface> 

Result:

Three boxes are vertically aligned like the flag of Germany. Except that the first box is NOT black, because #name refers to an object with the corresponding "name" property, and not to an object with this identifier.

It took me a while to figure this out. I'm new to gtk3 ...