Not Applying the style on gtk.css

[JerVx]

I added this CSS code to .config/gtk-3.0/gtk.css to shrink and customize the titlebar/headerbar of all the application.

headerbar {
  padding: 0 6px;
  min-height: 46px;
}

headerbar entry,
headerbar spinbutton,
headerbar button,
headerbar separator {
    margin-top: 0px; 
    margin-bottom: 0px;
}

.default-decoration {
    min-height: 0; 
    padding: 0px;
}

.default-decoration .titlebutton {
    min-height: 2px; 
    min-width: 3px;
}

window.ssd headerbar.titlebar {
    padding-top: 1px;
    padding-bottom: 3px;
    min-height: 0;
}

window.ssd headerbar.titlebar button.titlebutton {
    padding-top: 2px;
    padding-left:2px;
    padding-bottom:2px;
    min-height: 0;
}

but this only works on 22.04 LTS

As you can see on 22.04 LTS the styling is applied correctly accross all apps.

But on 23.04, it’s a different story

As you can see it does not affect nautilus, Chrome, and VSCode. I also tried changing shell themes & icons, but it still doesn’t affect the thickness and icon of the title bar/headerbar of nautilus and other apps.

[skeller (Sebastian Keller)]

Ubuntu 23.04 uses Mutter 44, which now uses gtk4 to draw window decorations and Nautilus 44 which draws its own decoration using gtk4 as well. You need to use .config/gtk-4.0/gtk.css for those and maybe also need to adapt to different CSS selectors used by gtk4.

And from looking a Chrome in the screenshots, on 22.04 you seem to have enabled the option to use system titlebars (the ones drawn by Mutter) while on 23.04 you don’t (so Chrome draws the decorations itself, which can not be fully controlled via gtk). This can be enabled in the context menu of the empty area next to the tabs.