2

I am delving a little into theming and css styling.

It mostly works well, but I am having trouble with the styling of the title bars. They all accept well gradient, background color and such, but not all applications adopt the title bar height.

I tried to code

.titlebar and 

.headerbar 

in all forms I can imagine, but still the height of the title bars remains incoherent. Some applications adopt the title bar height, others totally ignore it.

This apparently happens all across themes.

I wonder what the reason for this is, and how I can achieve equal height of all title/ header bars.

My question is not a duplicate, since my issue is not that of slimming the bar down, but that of making a too NARROW bar (on the right) BIGGER, to match the height of the bars on the left. I understand that the bar on the left is huge, but I intentionally exaggerated on the height to show my point.

I am using Ubuntu Budgie 19.04, on a Dell laptop.

enter image description here

5
  • 1
    Left is an app with client side decorations, right are windows with legacy window decorations. With CSD, I gues it is the app (the client) that controls the look (including the height)
    – vanadium
    Aug 23, 2019 at 12:36
  • Thanks for clarifying. Is there a way to override these app settings?
    – rainer
    Aug 23, 2019 at 21:57
  • Dont't know the way. However, the CSD title bars require space for the controls. You would need to widen the "legacy" titlebars as it will not be neat to shrink the CSD title bars below the space needed.
    – vanadium
    Aug 24, 2019 at 7:26
  • Not a duplicate, since my issue is not that of slimming the bar down, but that of making a too NARROW bar (on the right) BIGGER, to match the height of the bars on the left. I understand that the bar on the left is huge, but I intentionally exaggerated on the height to show my point.
    – rainer
    Aug 25, 2019 at 2:33
  • 1
    Although closely related, I see what you mean. I've retracted my vote to close this as a duplicate of How to slim down Ubuntu GNOME title bar fatness? Aug 25, 2019 at 11:32

2 Answers 2

5

You are dealing with two different kinds of programs.

  • The left program in your screenshot is an application that uses GTK3 Client Side Decorations (CSD). This means that the application itself draws its title bar and includes controls in it.
  • The right programs you show use window manager provided window decorations (some call this 'legacy decorations'. The window manager controls the decoration, and these are the applications that obey your settings.

For applications using CSD, padding still can be controlled through the GTK3 theme. However, a minimum height is needed to accomodate the controls. You would therefore need to set unpleasantly wide "legacy" titlebars to accommodate the minimal width of a CSD title bar.

CSD cannot easily be avoided. Linux Mint adopts the approach of eliminating all CSD and has forked core gnome applications to revert to a traditional header bar and menu. Also the Mate desktop adopts that approach. To eliminate CSD on standard Ubuntu is less obvious. In short, there is no satisfactory solution, but options are:

  • There used (and still is) is a way to return "legacy" window decorations to CSD programs (note that for more recent Ubuntu versions, gtk3-nocsd is included in the standard software repositories, so no need to add a PPA). This worked better in older days, where traditional menus would neatly be restored. Currently, the effect is that you add a traditional title bar, but the CSD area beneath remains, leading to a less than pleasant appearance.
  • Alternatively, one can consider avoiding CSD applications, and for example move to the alternative applications of Linux Mint or Mate.
1
  • Thanks for your detailed information. It helped a lot to understand the mechanics. I have posted a answer below, with a code snippet a found on askubuntu. Thanks anyway for your great help.
    – rainer
    Aug 25, 2019 at 2:26
4

I found a usable answer here.

The relevant part of the code is:

.ssd .titlebar {
  padding: 8px;
}

.titlebar controls the height of the window manager provided window decorations, whereas

.ssd .titlebar seems to control that of the Client Side Decorations.

The code goes into the theme's own gtk.css file.

1
  • Thank you for this CSS. It really fixed the problem for me. The only note is that I had to use 9px padding instead of 8px to have the title bars exactly the same height (Ubuntu 20 with Adwaita-Dark theme). Apr 27, 2021 at 10:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .