Gtk3 Css button states

Question

I'm using gtk+-3.2.3 with css on Ubuntu natty. In the code below I have a button that starts out with a background color of green with blue text. When I hover over it the background color changes to red but the font color will not change to white as I've specified. Also when pressing and holding the button the background color changes to orange but the font color won't change to cyan that I've specified. Why is this happening? Is this the window manager over-riding my code?

/*Compile with:
  gcc -Wall -o cssbutton2 `pkg-config --cflags --libs gtk+-3.0` cssbutton2.c
*/

#include <gtk/gtk.h>

int main(int argc, char *argv[] )
{
  GtkWidget *window;
  GtkWidget *button;
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;

  gtk_init (&argc, &argv);

  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_set_default_size(GTK_WINDOW(window), 280, 200);
  g_signal_connect (GTK_WIDGET (window), "destroy",
                        G_CALLBACK (gtk_main_quit), NULL);

  button = gtk_button_new_with_label("CssButton");  
  gtk_widget_set_name (GTK_WIDGET(button), "mybutton");        
  gtk_widget_set_halign (GTK_WIDGET(button),GTK_ALIGN_CENTER);
  gtk_widget_set_valign (GTK_WIDGET(button),GTK_ALIGN_CENTER);
  gtk_widget_set_size_request(GTK_WIDGET(button), 200, 120);
  gtk_container_add(GTK_CONTAINER(window),button); 

  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_USER);

  gtk_css_provider_load_from_data (GTK_CSS_PROVIDER (provider),
                            " GtkWindow {\n"                          
                            "   background-color: tan;\n"
                            "}\n"
                            " GtkButton {\n"
                            "   -GtkWidget-focus-line-width: 0;\n"
                            "   border-radius: 15;\n"
                            "   font: Sans 23;\n"
                            "   color: #00008B;\n"                                       
                            "   background-color: green;\n"
                            "}\n"
                            " .button:hover {\n"
                            "   background-color: red;\n"
                            "   color: white;\n"
                            "}\n"
                            " .button:hover:active {\n"
                            "   background-color: orange;\n"
                            "   color: cyan;\n"
                            "}\n", -1, NULL);

  g_object_unref (provider);
  gtk_widget_show_all(window);
  gtk_main();
  return(0);
}

I could really use some help here, anyone ?

mike
– mike

2012-01-24 05:11:12 +00:00
Commented Jan 24, 2012 at 5:11 — mike
– mike, Commented Jan 24, 2012 at 5:11

user21926 · Accepted Answer · 2012-06-08 13:07:49Z

1

I've just tested this on Ubuntu 12.04 (gtk+ 3.4.2) and after adding background-image: none; to the GtkButton style definition, this works as you describe is the desired behavior. Maybe just a bug in GTK that has since been fixed?

answered Jun 8, 2012 at 13:07

user21926

Sign up to request clarification or add additional context in comments.

1 Comment

mike Over a year ago

I believe your right but it so difficult to manually install gtk that I don't want to risk messing up mine to check.

poolooloo wu · Accepted Answer · 2016-11-23 05:26:39Z

you can reference the gtk css style grammar: https://developer.gnome.org/gtk3/stable/chap-css-overview.html

/*Compile with:
  gcc -Wall -o cssbutton2 `pkg-config --cflags --libs gtk+-3.0` cssbutton2.c
*/

#include <gtk/gtk.h>

int main(int argc, char *argv[] )
{
  GtkWidget *window;
  GtkWidget *button;
  GtkCssProvider *provider;
  GdkDisplay *display;
  GdkScreen *screen;
  //GtkStyleContext *context;

  gtk_init (&argc, &argv);

  window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_set_default_size(GTK_WINDOW(window), 280, 200);
  gtk_window_set_title(GTK_WINDOW(window),"CSSBUTTON");
  g_signal_connect (GTK_WIDGET (window), "destroy",
                        G_CALLBACK (gtk_main_quit), NULL);

  button = gtk_button_new_with_label("CssButton");  
  gtk_widget_set_name (GTK_WIDGET(button), "mybutton");        
  gtk_widget_set_halign (GTK_WIDGET(button),GTK_ALIGN_CENTER);
  gtk_widget_set_valign (GTK_WIDGET(button),GTK_ALIGN_CENTER);
  gtk_widget_set_size_request(GTK_WIDGET(button), 200, 120);
  gtk_container_add(GTK_CONTAINER(window),button); 

  provider = gtk_css_provider_new ();
  display = gdk_display_get_default ();
  screen = gdk_display_get_default_screen (display);                                                                                  
   // context = gtk_widget_get_style_context(window);

  gtk_css_provider_load_from_data (provider,
                            "*{"
                            "color:green;"
                            "font-family:Monospace;"
                            "border:1px solid;"
                                 " }"       
                            " window {"                          
                            "   background-color: rgba(50,30,70,100);"
                            "   background-image:none;"
                            "}"
                            " button {"
                            "   border-radius: 15px;"
                            "   font: Sans 23;"
                            "   color: #00008B;"                                       
                            "   background-color: green;"
                            "   background-image:none;"
                            "}"
                            " button:hover {"
                            "   background-color: red;"
                            "   color: white;"
                            "}"
                            " button:hover:active {"
                            "   background-color: orange;"
                            "   color: cyan;"
                            "}", -1, NULL);

  gtk_style_context_add_provider_for_screen (screen, GTK_STYLE_PROVIDER(provider),GTK_STYLE_PROVIDER_PRIORITY_USER);
  g_object_unref (provider);
  gtk_widget_show_all(window);
  gtk_main();
  return(0);
}

Collectives™ on Stack Overflow

Gtk3 Css button states

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related