GTK Widgets changing with CSS

Question

I can change the color of a button with CSS (background und color). But this don't work for dropdown button and textview. Do you have any suggestions?

"#Button {\n"
"background: #FF0000;\n"
"color: #00FF00;\n"
"}\n"

For a text field is font-size and font-family working, but not background or color.

And 2nd question. Is there any documention, where all the possibilities of changing is written? For which Widget can what be changed?

Answer 1

With a bit of trial and error identifying the specific CSS nodes for the button widget, dropdown widget, and textview widget, I was able to get the background colors and text/foreground colors to output with the requested behavior. First off, I took advantage of a new capability within GTK4 to override the element name for the widgets so that any custom CSS definitions are only applied to the appropriate widgets. That property is called "css-name". Here is an example for the button that was defined in a "ui" file.

<property name="css-name">CustomButton</property>

For the widgets I defined in a "ui" file for my test program, I assigned the widgets the following "css-name" property:

• <property name="css-name">CustomButton</property> (in lieu of "button")
• <property name="css-name">CustomDrop</property> (in lieu of "dropdown)
• <property name="css-name">CustomText</property> (in lieu of "textview")

Within my test program, I define and create my widgets from the "ui" file with a GtkBuilder along with a CSS provider. The following code snippet illustrates the elements and children that were identified for the application of custom CSS definitions.

gtk_css_provider_load_from_data(provider, "CustomText, CustomButton, \
CustomDrop > button, CustomDrop > popover.menu > contents {background-color: #FF0000; color: #FFFFFF;}", -1);

gtk_style_context_add_provider_for_display (display, GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_USER);

Probably, the thing to point out is identifying all of the children of the widgets to properly associate CSS style directives.

FYI, I associated the CSS provider with the display context, but it should work with the widget level context as well.

With that, I was able to get all widgets to have a red background. For my example, I made the text white in lieu of green. Following is a sample illustration.

Hopefully, that will point you in the proper direction.