Dont get css in gtk3 with glade to work

1
votes

I want to load a glade-file and change the color of all toggle-buttons ( class "GtkToggleButton" , I want to change the "pressed" color) The toggle-button is one of many sub-sub-element in the glade-file. Here the C-code-snipped I use to load the .css and the .glade:

void on_minute_pressed(GtkWidget *button)
{
    GtkCssProvider *cssProvider = gtk_css_provider_new ();
    gtk_css_provider_load_from_path(cssProvider,"./test.css",NULL);
    GtkBuilder *builder = gtk_builder_new();
    gtk_builder_add_from_file (builder, "minute_dialog.glade", NULL);
    GtkWidget       *window= GTK_WIDGET(gtk_builder_get_object(builder, "MinuteWizard"));
    gtk_window_set_transient_for (window,main_window);
    gtk_style_context_add_provider(gtk_widget_get_style_context(window),cssProvider,GTK_STYLE_PROVIDER_PRIORITY_USER);
    gtk_builder_connect_signals(builder, NULL);

    gtk_widget_show(window);
    g_object_unref(builder);
}

And here the .css I currently use:

.button {
  padding: 30;
  background-color: shade (@bg_color, 55);
}

togglebutton entry {
  color: 900185;
}

button:active {
  background-color: #0274d9;
}

What currently happens: The new window load's fine, but it seems like it does not matter what I write into the .css, it does not change the look of the window-elements. I can see that the .css is loaded, because I get warnings like:

Gtk-WARNING **: Theme parsing error: test.css:2:13: Not using units is deprecated. Assuming 'px'.

What is wrong ? Do I need to apply the .css to each sub-widged separately?

4
csscgtk3glade
The Not using units is deprecated comes from old CSS files, where some size are just specified by a number, such as border=1. Present gtk versions require those to be specified as 1px. Mind, if your theme is so old, you will probably run into problems with gtk newer than 3.20! It should not influence your main problem though. - jcoppens

4 Answers

3
votes

Ok, I found out myself what was the problem:

According to the documentation of gtk_style_context_add_provider css providers are not inherited to the children style contexts.

So either one needs to apply the css to each single widget, or use gtk_style_context_add_provider_for_screen to change the css of the whole screen:

gtk_style_context_add_provider_for_screen(gdk_screen_get_default(), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER);
1
votes

A list of suggestions too long to put as comments:

  • Could it be that you have another version of your theme's CSS installed in ~/.themes? If so, that theme will be superseding the theme in /usr/share/themes.

  • Since XDG, there is yet another possibility for the location of the CSS: From the dev documentation ($XDG_CONFIG_HOME below is typically ~/.config):

In addition, certain files will be read when GTK+ is initialized. First, the file $XDG_CONFIG_HOME/gtk-3.0/gtk.css is loaded if it exists. Then, GTK+ loads the first existing file among XDG_DATA_HOME/themes/theme-name/gtk-VERSION/gtk.css, $HOME/.themes/theme-name/gtk-VERSION/gtk.css, $XDG_DATA_DIRS/themes/theme-name/gtk-VERSION/gtk.css and DATADIR/share/themes/THEME/gtk-VERSION/gtk.css, where THEME is the name of the current theme (see the #GtkSettings:gtk-theme-name setting), DATADIR is the prefix configured when GTK+ was compiled (unless overridden by the GTK_DATA_PREFIX` environment variable), and VERSION is the GTK+ version number. If no file is found for the current version, GTK+ tries older versions all the way back to 3.0.

  • Another solution for you might be to use the GtkCssProvider interface for specific widget styles.

An interesting reference is Installing, Obtaining, and Making GTK Themes

0
votes

Try with this

.button {
  padding: 30px; /* px unit added */
  background-color: shade (@bg_color, 55);
}
    
.togglebutton .entry {
  color: #900185; /* # added */
}
    
.button:active {
  background-color: #0274d9;
}
<button class="button">aaaa</button>
<button class="button togglebutton"><span class="entry">aaaa</span></button>
0
votes

Try adding the class name in 'style classes' for the widget in Glade: glade_screenshot_button_attr