How to decrease titlebar hight of a gtk dialog using css?

Question

I am unable to reduce titlebar height of gtk-dialog (colorChooser & file-selection dialog).

.titlebar {
  min-height: 25px;
  padding: 0px;
  margin: 0px;
}

it can decrease titlebar height of gtk window, but not working on Gtk Dialog. Can anybody check it please?

Answer 1

I did a bit of investigation on this. First off, it looks as though you actually will want to set up your custom CSS definitions referencing a "headerbar" and not a "titlebar". You may want to reference a similar issue that was resolved by connecting to the following link:

"https://unix.stackexchange.com/questions/257163/how-to-reduce-title-bar-height"

In using the information from this link, I tested out various minimum sizes in a sample program I wrote to see the effect of CSS properties on the header bar associated with the color chooser dialog. Referencing your minimum height requirement, I loaded the following data into a CSS provider object and rebuilt my program.

headerbar
{
    min-height: 0px;
    padding-left: 2px;
    padding-right: 2px;
}
headerbar entry, headerbar spinbutton, headerbar button, headerbar separator
{
    margin-top: 2px;
    margin-bottom: 2px;
    min-height: 25px;
}   

Comparing the color chooser dialog between a standard dialog and one with a twenty-five pixel height dialog one can see the slight difference in button size in the following illustration.

Just to show a slightly more extreme setting for widget sizes in the header bar, I changed the minimum size to sixty pixels just to show the impact of custom CSS values.

As you can see, the header bar effect is exaggerated and is seen in both the dialog and in the window.

Additional Notes.

Responding to the comment about trying this method and having the unwanted knock-on effect, that appears to be because the color chooser dialog is a stand-alone widget that is created when the program is built as one can visualize when utilizing the GTK inspector.

Since that widget does not appear to have any CSS definitions, one cannot directly adjust the header bar associated with that widget. So, as an experiment, I revised the custom CSS I initially listed to filter out other widgets that have a header bar widget. So, in my sample program, I added a class to my window widget as follows.

gtk_style_context_add_class(gtk_widget_get_style_context(GTK_WIDGET(window)),"Colour");

Then, I modified the custom CSS to still modify the header bar and its child widgets for the color chooser dialog widget but omit any modification to the window header bar.

:not(.Colour) headerbar
{
    min-height: 0px;
    padding-left: 2px;
    padding-right: 2px;
}
:not(.Colour) headerbar button, :not(.Colour) headerbar separator
{
    margin-top: 2px;
    margin-bottom: 2px;
    min-height: 60px;
}

When I applied those additional modifications, I did get the result of no header bar modification to the window but did get the header bar modification for the color chooser dialog.

In effect, for this filtration to work where only the header bar for the color chooser widget is modified and any other header bars are left alone, one would need to add that same class to any other widget that has a header bar and is not the color chooser dialog widget. It's a bit messy, but I could not find another method.

Regards,

Craig