Setting the text color of entry in GtkSpinButton

MichiB · September 29, 2019, 7:22pm

I have a Question which is very strange to me.
I am trying to create an Application and I am trying to set the color of the values found in entry of The GtkSpinButton.

Here is a the Code:
spinbutton.c

 #include <gtk/gtk.h>

gdouble value           = 1;
gdouble lower           = 0;
gdouble upper           = 10;
gdouble step_increment  = 1;
gdouble page_increment  = 1;
gdouble page_size       = 0;

GtkWidget *spinButton;

void load_css ( void );
GtkWidget *createWindow ( const gint width, const gint height );
GtkWidget *createGrid   ( const guint border,
                          gboolean row_homogeneous, gboolean column_homogeneous,
                          guint row_spacing, guint column_spacing );

void entry_value_callback           ( GtkEntry *entry, GtkAdjustment *adjustment );
void entry_lower_callback           ( GtkEntry *entry, GtkAdjustment *adjustment );
void entry_upper_callback           ( GtkEntry *entry, GtkAdjustment *adjustment );
void entry_step_increment_callback  ( GtkEntry *entry, GtkAdjustment *adjustment );
void entry_page_increment_callback  ( GtkEntry *entry, GtkAdjustment *adjustment );

int main ( int argc, char *argv[] )
{
    GtkWidget *window;
    GtkWidget *grid;
    /// ***
    GtkAdjustment *adjustment;
    /// ***
    GtkWidget *label_value;
    GtkWidget *label_lower;
    GtkWidget *label_upper;
    GtkWidget *label_step_increment;
    GtkWidget *label_page_increment;
    /// ***
    GtkWidget *entry_value;
    GtkWidget *entry_lower;
    GtkWidget *entry_upper;
    GtkWidget *entry_step_increment;
    GtkWidget *entry_page_increment;
    /// ***
    gtk_init ( &argc, &argv );
    load_css();
    
    /// *** Create a Window
    window = createWindow ( 400, 300 );
    
    /// *** Create a Grid
    grid = createGrid( 3, FALSE, FALSE, 3, 3 );
    gtk_container_add ( GTK_CONTAINER ( window ), grid );
    
    /// *** Set up Label's
    label_value          = gtk_label_new( "Set Value" );
    label_lower          = gtk_label_new( "Set Lower" );
    label_upper          = gtk_label_new( "Set Upper" );
    label_step_increment = gtk_label_new( "Set Step Increment" );
    label_page_increment = gtk_label_new( "Set Page Increment" );
    
    /// *** Set up Entry's
    entry_value          = gtk_entry_new();
    entry_lower          = gtk_entry_new();
    entry_upper          = gtk_entry_new();
    entry_step_increment = gtk_entry_new();
    entry_page_increment = gtk_entry_new();

    /// *** Attach Label's
    gtk_grid_attach( GTK_GRID( grid ), label_value,             0, 0, 1, 1 );
    gtk_grid_attach( GTK_GRID( grid ), label_lower,             0, 1, 1, 1 );
    gtk_grid_attach( GTK_GRID( grid ), label_upper,             0, 2, 1, 1 );
    gtk_grid_attach( GTK_GRID( grid ), label_step_increment,    0, 3, 1, 1 );
    gtk_grid_attach( GTK_GRID( grid ), label_page_increment,    0, 4, 1, 1 );

    /// *** Attach Entry's
    gtk_grid_attach( GTK_GRID( grid ), entry_value,             1, 0, 1, 1 );
    gtk_grid_attach( GTK_GRID( grid ), entry_lower,             1, 1, 1, 1 );
    gtk_grid_attach( GTK_GRID( grid ), entry_upper,             1, 2, 1, 1 );
    gtk_grid_attach( GTK_GRID( grid ), entry_step_increment,    1, 3, 1, 1 );
    gtk_grid_attach( GTK_GRID( grid ), entry_page_increment,    1, 4, 1, 1 );
    
    /// *** Set up Adjustment
    adjustment = gtk_adjustment_new( value, lower, upper, step_increment, page_increment, page_size );
    
    /// *** Catch Signals
    g_signal_connect( entry_value,          "activate", G_CALLBACK( entry_value_callback          ), adjustment );
    g_signal_connect( entry_lower,          "activate", G_CALLBACK( entry_lower_callback          ), adjustment );
    g_signal_connect( entry_upper,          "activate", G_CALLBACK( entry_upper_callback          ), adjustment );
    g_signal_connect( entry_step_increment, "activate", G_CALLBACK( entry_step_increment_callback ), adjustment );
    g_signal_connect( entry_page_increment, "activate", G_CALLBACK( entry_page_increment_callback ), adjustment );
    
    /// *** Create and set up the SpinButton
    spinButton = gtk_spin_button_new( adjustment, 2, 2 );
    g_object_set( spinButton, "margin-left", 150, "margin-top", 40, NULL );
    gtk_grid_attach( GTK_GRID( grid ), spinButton, 0, 6, 1, 1 );

    /// *** Show them all and loop
    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 );
    /// ***
    g_object_unref ( provider );
}

GtkWidget *createWindow ( const gint width, const gint height )
{
    GtkWidget *window = gtk_window_new  ( GTK_WINDOW_TOPLEVEL );
    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( const guint border,
                       gboolean row_homogeneous, gboolean column_homogeneous,
                       guint row_spacing, guint column_spacing )
{
    GtkWidget *grid = gtk_grid_new();
    gtk_grid_set_row_homogeneous    ( GTK_GRID( grid ), row_homogeneous );
    gtk_grid_set_column_homogeneous ( GTK_GRID( grid ), column_homogeneous );
    /// ***
    gtk_grid_set_row_spacing        ( GTK_GRID( grid ), row_spacing );
    gtk_grid_set_column_spacing     ( GTK_GRID( grid ), column_spacing );
    ///***
    gtk_container_set_border_width( GTK_CONTAINER( grid ), border );
    ///g_object_set( grid, "tooltip-text", "Grid", NULL );
    return grid;
}

void entry_value_callback ( GtkEntry *entry, GtkAdjustment *adjustment )
{
    const gchar *const text = gtk_entry_get_text( entry );
    value = atoi( text );
    g_print( "The value was set to %.0f\n", value );
    gtk_adjustment_set_value( adjustment, value );
    gtk_widget_grab_focus( spinButton );
}

void entry_lower_callback ( GtkEntry *entry, GtkAdjustment *adjustment )
{
    const gchar *const text = gtk_entry_get_text( entry );
    value = atoi( text );
    g_print( "The lower was set to %.0f\n", value );
    gtk_adjustment_set_lower( adjustment, value );
    gtk_widget_grab_focus( spinButton );
}

void entry_upper_callback ( GtkEntry *entry, GtkAdjustment *adjustment )
{
    const gchar *const text = gtk_entry_get_text( entry );
    value = atoi( text );
    g_print( "The upper was set to %.0f\n", value );
    gtk_adjustment_set_upper( adjustment, value );
    gtk_widget_grab_focus( spinButton );
}

void entry_step_increment_callback ( GtkEntry *entry, GtkAdjustment *adjustment )
{
    const gchar *const text = gtk_entry_get_text( entry );
    value = atoi( text );
    g_print( "The step_increment was set to %.0f\n", value );
    gtk_adjustment_set_step_increment( adjustment, value );
    gtk_widget_grab_focus( spinButton );
}

void entry_page_increment_callback ( GtkEntry *entry, GtkAdjustment *adjustment )
{
    const gchar *const text = gtk_entry_get_text( entry );
    value = atoi( text );
    g_print( "The page_increment was set to %.0f\n", value );
    gtk_adjustment_set_page_increment( adjustment, value );
    gtk_widget_grab_focus( spinButton );
}

CSS:

window
{
    background-color: brown;
}

label
{
    color:          orange;
    font-size:      20px;
    font-weight:    bold;
}

entry
{
    background-color: red;
    color:            white;
    font-size:        15px;
    font-weight:      bold;
}

spinbutton
{
    background-color: yellow;
}

spinbutton > button.down
{
    background-color: blue;
    color:            yellow;
}

spinbutton > button.down:hover
{
    background-color: black;
    color:            yellow;
}

spinbutton > button.up
{
    background-color: green;
    color:            magenta;
}

spinbutton > button.up:hover
{
    background-color: black;
    color:            yellow;
}

/*spinbutton > entry */
spinbutton, text
{
    background-color: red;
    color: yellow;
}

And as you can see the values are Yellow (1.00):

This works because I set the color using:

 spinbutton, text
{
    color: yellow;
}

But based on GTKSpinButton’s CSS documentation there is no node (at least I do not see it) or subnode text only entry.
The following affects only the entry background and the color of the value of the entry it is ignored:

spinbutton > entry
{
    background-color: red;
    color: yellow;
}

Why is that?
There is no CSS “text” subnode present in documentation =>> https://developer.gnome.org/gtk3/stable/GtkSpinButton.html#GtkSpinButton.description ?

baedert · September 30, 2019, 6:16am

I don’t understand. What’s the difference between the entry and the “text” subnode? What’s your problem?

MichiB · September 30, 2019, 7:59am

The problem is that probably I was not clear in my Question, so please allow me to explain you again.

I am changing the Background color of the Entry of the GtkSpinButton.
I am trying also to set the color of the value of the Entry in GtkSpinButton.
The default Background is White and the color of the Value is Black:

So the following CSS:

spinbutton > entry
{
    background-color:   red;
    color:              yellow;
}

Changes take place only to the Background ( it is now RED) , but the Color of the value does not change to Yellow (you see it is still black?):

To make the changes one need to set not the entry, but the text:

spinbutton, text
{
    color:              yellow;
}

So that the Color of the Value to be Yellow (you see it is now Yellow?):

So the Question remains, why does not work?:

spinbutton > entry
{
    color:              yellow;
}

baedert · September 30, 2019, 11:27am

The spinbutton is getting that color because of the spinbutton part, not the text part:

spinbutton {
  color: yellow;
}

works as well.

The css nodes aren’t exactly very deterministic in gtk3, but you can simply use

spinbutton {
  color: yellow;
  background: red;
}

and that works (but maybe only with Adwaita due to CSS specificity).

MichiB · September 30, 2019, 11:36am

@baedert
Thank you for your time.
Any way I am sure that it is working like that, but this is not my Question.

I was interested only why I can Set the background-color of the entry with:

spinbutton > entry
{
    background-color: red;
}

But I cannot set the color of the values with:

 spinbutton > entry
{
    color: yellow;
}

Why works for “background-color”, but it does not for “color”?

system · October 14, 2019, 11:36am

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