Setting HeaderBar's top-border color

Platform Language bindings
1

I have an Issue which I cannot fix it.
I added a HeaderBar to an application and noticed that the headerbar’s top border does not get any changes (after css stylings) at all.
here is a picture:
headerBar-01

As you can see in the picture the Top and the Bottom Borders are not getting changed.
Now if I add:

border-style:       none;

It affects (changes) only the Bottom border, but the Top it is not changing at all:
headerBar-02

Here is a working demo:

#include <gtk/gtk.h>

void load_css ( void );
GtkWidget *createWindow ( const gint width, const gint height, const gchar *const title );
GtkWidget *createGrid   (  gboolean row, gboolean col );

int main ( void )
{
    GtkWidget *window;
    GtkWidget *grid;
    GtkWidget *headerBar;

    /// ***
    gtk_init ( NULL, NULL );
    load_css();

    /// ***
    window = createWindow ( 300, 300, "My App" );

    /// ***
    grid   = createGrid ( FALSE, TRUE );
    gtk_container_add ( GTK_CONTAINER ( window ), grid );

    /// ***
    headerBar = gtk_header_bar_new();
    gtk_container_add ( GTK_CONTAINER ( grid ), headerBar );

    /// ***
    gtk_widget_show_all ( window );
    gtk_main ();
}

void load_css ( void )
{
    GtkCssProvider *provider;
    GdkDisplay     *display;
    GdkScreen      *screen;
    /// ***
    const gchar *css_style_file = "style.css";
    GFile *css_fp               = g_file_new_for_path ( css_style_file );
    GError *error               = 0;
    /// ***
    provider = gtk_css_provider_new ();
    display  = gdk_display_get_default ();
    screen   = gdk_display_get_default_screen ( display );
    /// ***
    gtk_style_context_add_provider_for_screen   ( screen, GTK_STYLE_PROVIDER ( provider ), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION );
    gtk_css_provider_load_from_file             ( provider, css_fp, &error );
    /// ***
}

GtkWidget *createWindow ( const gint width, const gint height, const gchar *const title )
{
    GtkWidget *window;
    window = gtk_window_new         ( GTK_WINDOW_TOPLEVEL );
    gtk_window_set_title( GTK_WINDOW( window ), title );
    g_signal_connect                ( window, "destroy", gtk_main_quit, window );
    gtk_window_set_default_size     ( GTK_WINDOW ( window ), width, height );
    gtk_container_set_border_width  ( GTK_CONTAINER ( window ), 25 );
    return window;
}

GtkWidget *createGrid (  gboolean row, gboolean col )
{
    GtkWidget *grid = gtk_grid_new ();
    /// ***
    gtk_grid_set_row_homogeneous    ( GTK_GRID ( grid ), row );
    gtk_grid_set_column_homogeneous ( GTK_GRID ( grid ), col );
    /// ***
    return grid;
}

CSS:

window
{
    background-color:   red;
}

headerbar
{
    background-color:   orange;
    border-style:       none;
}

How can I fix this?

EDIT:
I added a 5px black border as well

border:             5px solid black;

headerBar-03

EDIT 2:
I just noticed that the behavior is different if the window has no focus:
headerBar-04

2

I would recommend to run your application with the GTK Inspector, and explore what other widgets you are dealing with, inside the headerbar. It could be that there is another widget you need to style, besides the headerbar

To use the inspector:

GTK_DEBUG=interactive ./yourapp
3

That’s not the top border, it’s a box shadow.

1 Like
4

Well I wasn’t thinking on that. I’ll give it a try. Thank you for pointing me to the “box-shadow”.

5

I am more confuse now that before, let us check it together again .

If I use no style, only background:

window
{
    background-color:   red;
}

headerbar
{
    background-color:   orange;
}

The application application looks like this:
new_headerbar-01

If I use “border-stlye”:

headerbar
{
    background-color:   orange;
    border-style:       none;
}

new_headerbar-02

If I replace “border-style: none;” with “box-shadow: none;”:

headerbar
{
    background-color:   orange;
    box-shadow:         none;
}

new_headerbar-03

To fix them both, Top and Bottom I need “box-shadow” and “border-style” also:

headerbar
{
    background-color:   orange;
    box-shadow:         none;
    border-style:       none;
}

new_headerbar-04

Or at least I have to set te “border” to “0px” instead of “border-style”.

Taking a look at its implementation:
https://raw.githubusercontent.com/linuxmint/gtk/master/gtk/gtkheaderbar.c
I cannot figure out where exactly are happening this things.

One thing which comes into my mind is that radius “top-left” and “top-right”, could (somehow) there be the problem?

The Inspector does not show any help here as well.

6

Indeed, and this may still not work when using a different GTK theme. CSS is much more powerful and complex than background-color+border, so if your goal is to make some element appear as something completely different, you didn’t pick an easy battle.

What exactly is it that you are trying to achieve?

It sure does, under “CSS nodes” all CSS properties that apply to the currently selected widgets are shown.

7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.