How to theme the header bar close button in GTK+3?

Question

I'd like to change the style of the close button on GTK+3 windows with so called "header bars", where the window is rendered without decoration and GTK composes title bar and widgets.

What kind of element is the "X" close button, and what CSS classes does it belong to (if any)?

Note that this is not part of the window manager theme but actually drawn by GTK+.

Answer 1

It's a GtkButton with icon window-close-symbolic with style class titlebutton (the same class as the other buttons on the header), assuming the app is using the built-in close button.

Answer 2

2020-10-14 EDIT:

gtkparasite has been integrated into GTK under the name GtkInspector since GTK 3.14.

Original answer:

You may use gtkparasite to find the type and name of the element and how it's nested.

Answer 3

the min/max/close button selectors:

headerbar.titlebar button.titlebutton.close
headerbar.titlebar button.titlebutton.maximize
headerbar.titlebar button.titlebutton.minimize

the selector for any/each of the individual min/max/close buttons:

headerbar.titlebar > :last-child button.titlebutton

the selector for the container of the entire group of min/max/close buttons:

headerbar.titlebar > :last-child

the selector for the left-most button (usually, but not always, the application button):

headerbar.titlebar > :first-child > button.titlebutton

the selector for the left-most button's container:

headerbar.titlebar > :first-child

i used these selectors in a theme of my own, you can inspect the relevant piece(s) of code here: http://xfce-evolution.sourceforge.net

Answer 4

for python

header = Gtk.HeaderBar()
header.set_show_close_button(False)

button = Gtk.Button()
button.set_relief(Gtk.ReliefStyle.NONE)
img = Gtk.Image.new_from_icon_name("window-close-symbolic", Gtk.IconSize.MENU)
button.set_image(img)
button.connect("clicked", Gtk.main_quit)
header.pack_end(button)

seperator = Gtk.Separator.new(Gtk.Orientation.VERTICAL)
header.pack_end(seperator)

#window/self.set_titlebar(header)