How to access the Scale of the GtkScaleButton

After I read everything what I found about CSS on its Documentation, I realized that I still cannot figure out how to access the scale of a ScaleButton.

I have a Demo program which includes two widgets:

GtkScale
GtkScaleButton

I need to style only the GtkScaleButton and even if I set a name for both with:

gtk_widget_set_name()

Still no succed.

Here is a Picture of the program:

And here is the Code:

#include <gtk/gtk.h>

void load_css ( void );
GtkWidget *createWindow ( const gint width, const gint height, const gchar *const title );

int main ( void )
{
    GtkWidget *window;
    GtkWidget *grid;
    GtkAdjustment *adjustment;
    GtkWidget *scale;
    GtkWidget *scaleButton;
    
    /// *** Initialize GTK and load CSS
    gtk_init ( NULL, NULL );
    load_css();

    /// *** Create a Window
    window = createWindow ( 300, 300, "ScaleButton" );

    /// *** Create a Grid
    grid = gtk_grid_new();
    gtk_container_add ( GTK_CONTAINER ( window ), grid );

    /// *** Create an Adjustment
    adjustment = gtk_adjustment_new ( 0, 0, 10, 1, 2, 0 );

    /// *** Create a Scale
    scale = gtk_scale_new ( GTK_ORIENTATION_HORIZONTAL, adjustment );
    gtk_widget_set_name ( scale, "myScale" );
    gtk_widget_set_size_request ( scale, 150, 40 );
    g_object_set ( scale, "margin", 25, NULL );

    /// *** Create a ScaleButton
    scaleButton = gtk_scale_button_new ( GTK_ICON_SIZE_DIALOG, 0, 5, 1, NULL );
    gtk_widget_set_name ( scaleButton, "myScaleButton" );
    gtk_widget_set_size_request ( scaleButton, 50, 50 );
    g_object_set ( scaleButton, "margin", 25, NULL );

    /// *** attach...
    gtk_grid_attach ( GTK_GRID ( grid ), scale,       0, 0, 1, 1 );
    gtk_grid_attach ( GTK_GRID ( grid ), scaleButton, 0, 1, 1, 1 );
    /// ***
    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;
}

And the CSS File:

window
{
    background-color: orange;
}

#myScaleButton
{
    background-color: red;
    border:           2px solid black;
}

#myScaleButton:hover
{
    background-color: green;
    border:           2px solid black;
}

scale
{
    background-color: black;
    color: yellow;
}

scale slider
{
    background-color: red;
    color: yellow;
}

scale > contents > trough 
{
    background-color: blue;
}

scale > contents > trough > highlight 
{
    background-color: red;
}

.flat
{
    background-color: magenta;
    color: yellow;
}

.image-button
{
    background-color: yellow;
    color: red;
}

As you can see I also marked in the Picture :

.flat
.image-button

Both has same effect on the scale buttons ( + and - Buttons) and I am confused about those as well.
I need to know how to style only the scale of the GtkScaleButton and leave the scale unchanged.

It’s not documented anywhere but this works:

.scale-popup scale {
  background-color: orange;
}

If you want to know much more about Gtk styling I suggest to use the inspector and look at the “CSS nodes” screen.

1 Like

Thank you for your Reply. At this moment I cannot use the “Inspector”, but I will very happy to know If this is the Right way or not, before I go with it.

Some one should really take care of the CSS documentation.

Opened a merge request to fix that.

2 Likes

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