How to theme/style the title bar in gnome-3? - css

Question

I am trying to create a theme for Gnome 3, but I am running into a bit of an issue with styling the title bar. I am using the following CSS in my attempt to style the bars, but it only applies to windows that utilize a GtkHeaderBar to override the title bar.
headerbar {
border: 1px solid #000000;
border-bottom: none;
border-radius: 4px 4px 0 0;
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px 1px 0px 0px rgba(255, 255, 255, 0.25);
background-image: linear-gradient(to right, rgba(109, 179, 242, 0.5) 0%, rgba(84, 163, 238, 0.5) 50%, rgba(54, 144, 240, 0.5) 51%, rgba(30, 105, 222, 0.5) 100%);
padding: 0 5px;
}
headerbar:backdrop {
border: 1px solid #303030;
border-bottom: none;
background-image: linear-gradient(to right, #C1C1C1 0%, #B1B1B1 50%, #A2A2A2 51%, #8B8B8B 100%);
}
/* Window Body */
window {
border: 1px solid #000000;
border-top: none;
border-radius: 0 0 4px 4px;
box-shadow: inset 1px -1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px -1px 0px 0px rgba(255, 255, 255, 0.25);
background-image: linear-gradient(to right, rgba(109, 179, 242, 0.5) 0%, rgba(84, 163, 238, 0.5) 50%, rgba(54, 144, 240, 0.5) 51%, rgba(30, 105, 222, 0.5) 100%);
padding: 5px;
}
window:backdrop {
border: 1px solid #303030;
border-top: none;
background-image: linear-gradient(to right, #C1C1C1 0%, #B1B1B1 50%, #A2A2A2 51%, #8B8B8B 100%);
}
window > box {
border: 1px solid black;
border-radius: 3px;
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.25);
margin: 4px;
background-color: #ABABAB;
background-image: none;
}
It appears that the window manager is using the styling information from the last loaded theme instead of the CSS I am providing. I am switching themes by running gsettings set org.gnome.desktop.interface gtk-theme "<theme name".
This is what the title bar is supposed to look like (applied to a different window)
This is what a gtk3-demo window looks like when switching to my theme after Ambiance
This is what a gtk3-demo window looks like when switching to my theme after Adwaita
My conclusion from this is that there is a separate set of css nodes or classes that are separate from headerbar, although none of the suggestions I have found online such as using .header-bar have lead to any success. I attempted to inspect the css node hierarchy by launching the interactive debugger with GTK_DEBUG=interactive gtk3-demo, but the node hierarchy viewer ends at the window node, which does not include the title bar.
What is the proper way to style the title bar for themes in gnome-3? Is there a master list of css nodes somewhere that could be used for reference?
Edit: I just came across and tried the decoration tag, but it seems to have the same issue as headerbar, where it does not effect windows without a GtkHeaderBar element.
Edit 2: It would now seem that my issue is not necessarily with the CSS I have created. As a last ditch effort to try and induce any change in the title bars, I created a rule * { color: #00ff00; background-color: #ff0000; background-image: none} but it had no effect on the titles. I am now beginning to think the default title bar is styled somewhere other than the application css, possibly in another folder under the ~/.themes/xyz/ directory. Currently I have copied my entire CSS into both the gtk-3.0 and gtk-3.20 folders, but it doesn't seem to change anything. This is a tree of my theme. Are there required files missing from this?
.
├── gtk-3.0
│ └── gtk.css
├── gtk-3.20
│ └── gtk.css
└── index.theme

Answer 1

This issue was caused by forgetting to install the User Themes extension in gnome-tweak-tool. Because the title bar for some applications is provided by the application itself, the theme applied to them, but other programs relied on the shell to provide the title bar, and were therefore left without a style.