Tips for implementing CSS on all descendants in Gtk3-css?

Nested Components Challenge:

I have encountered an issue while attempting to add a background color to GtkComboBoxText.

In my approach, I obtain the widget's context and apply CSS styling to it:

 * { background: red } 

Surprisingly, this method does not alter the color of GtkComboBoxText. However, it successfully affects GtkButton and GtkLabel components.

Upon inspection with GtkInspector, it appears that GtkComboBoxText contains nested controls such as GtkToggleButton and GtkEntry which are not affected by the previously applied CSS. I have tried manually traversing through all the nested components using gtk_container_forall(..), selecting the specific elements, and then applying background coloring. While this workaround works, I am unable to find a way to globally apply the CSS to GtkComboBoxText and have it automatically cascade down to all its children.

Is there a method to achieve this?

Test Snippet Overview

A test snippet can be accessed in the repository: https://github.com/LeoUfimtsev/LeoGtk3/tree/3_GtkCombo_background

To execute the snippet:

  git clone https://github.com/LeoUfimtsev/LeoGtk3.git
  make
  ./main

Potential Solutions Attempted:

 * {background:red}
 * {background-color:red} // no visible change

 GtkComboBoxText * { background: red}
 GtkComboBoxText * { background-color: red}

Note to Consider:

If I run the snippet, access the CSS inspector, and individually apply:

 * {background: red} 

To each separate sub-widget:

GtkComboBoxText
- GtkToggleButton <<
- GtkTreeMenu <<

the background coloring is successful.

Edit - Implementing Style Classes?

One potential solution involves adding a style class to a specific widget and subsequently selecting it from the global CSS. A reference example can be found here: https://github.com/LeoUfimtsev/LeoGtk3/blob/057884368bf38a626dbaac5c575c15a5e1c93f2f/main.c#L35

However, this approach may prove impractical when implementing a graphics library on top of GTK due to the large number of classes that would need to be managed.

Answer №1

Did you give this a go?

GtkComboBoxText * {
  background-color: red;
}

In case the CSS above isn't compatible with GTK+, it does support

GtkBin * {/* add your styles here */}
. This will apply styles to all children of the GtkBin, so one solution is to place your GtkComboBoxText within a GtkBin element (where the hierarchy might need to be structured as
GtkBin > GtkComboBox GtkComboBoxText
).

Answer №2

After reviewing the documentation version 3.20 and above, I discovered a working solution:

button.toggle {
  background: red;
}

button.toggle:checked {
  background: blue;
}

Unfortunately, setting the background-color property did not yield the desired result.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to apply background images to LI elements using CSS

I've been experimenting with CSS-generated tabs to display an active state of an arrow underneath the tab. I tried using the background position properties to position the image for the hover event, but it would extend beyond the predefined boundaries ...

`Looking for help with transitioning CSS to JavaScript`

I'm facing an issue that needs to be resolved. Please check out the link provided below. pop up modal This is the HTML code snippet.... <div class="wrap"> <a href="#modal-one" class="btn btn-big">Modal!</a> </div> <!- ...

"Header background image gradually fades out and disappears as you scroll, revealing a bottom gradient effect in a React application

When I scroll, my header image fades away. I used JavaScript in my React app to achieve this effect: useEffect(() => { const handleScroll = () => { if (parallaxDiv.current) { parallaxDiv.current.style.backgroundPositionY = `${ ...

Display PHP output within a styled CSS box

<html> <head> </head> <style type="text/css"> .yellow-box { position:absolute; top:100px; left:500px; width:300px; height:300px; background:yellow } </style> <div class = "yellow-box" > </div ...

Is it possible to implement a custom radio tab index without using JavaScript

Is it possible to apply the tabindex attribute on custom radio buttons, hide the actual input element, and use keyboard shortcuts like Tab, Arrow Up, and Arrow Down to change the value? Check out this example on StackBlitz ...

add text above and below a button in a Button style

Just delving into HTML and CSS, I've created a button with the following styling: .Btns { width:200px; height:75px; background-color:lightblue; color:black; font-weight:bold; ...

Incorporate a course within the conditional statement

Currently, I'm working on the development of an input site and one of my goals is to highlight empty fields. My plan is to check if a field is empty using an if statement and then apply a specific class that will serve this purpose. This is the JavaS ...

Material-UI organizes its Grid Items vertically, creating a column layout rather than a horizontal row

I'm struggling to create a grid with 3 items in each row, but my current grid layout only displays one item per row. Each grid item also contains an image. How can I modify the code to achieve a grid with 3 items in a row? Here's the code snippet ...

Tips for adjusting the header color in materialize framework?

I've been working on a web template and I'm looking to customize the color displayed in the Android browser (maybe using JS?). The default color is blue. How can I go about changing it? https://i.sstatic.net/RxLbS.jpg Appreciate any help! ...

Align text to the right and left side

HTML file: <div id="home"> <b><p class="split-para">java<br><a href="j_temp.html" class="float">temperature converter in terminal</a> <br> <a href="j_palindrom.html" class="float">palindrome checker</a& ...

The align-middle Bootstrap class does not seem to be working within the specified div

I want to vertically align text (<span class="align-middle">middle</span>) in the center of a div. Here is the code snippet: <div class="col-4 shadow product-added"> <div class="row"> <div cla ...

Customizing the text color of steps in a v-stepper component using Vuetify.js

When working with the v-stepper component of VuetifyJS, it is easy to change the color of the steps themselves by using the `color` prop. But how can I alter the text of each step? Specifically, I am looking to modify the color of the text that says Name ...

The output produced by ASP.NET remains unaffected by JQuery or JavaScript interference

I am facing an issue with manipulating a dynamically generated directory tree in HTML format using JavaScript. I have a piece of code that generates the tree server-side in ASP.NET and then tries to add a '+' at the end of each list item using jQ ...

Can the arrangement of divs be altered solely based on specific browser widths, rather than just for visual appeal?

Imagine having the following HTML structure: <div class="outer"> <div class="inner"> </div> </div> However, under the condition @media (min-width: 890px) and (max-width: 958px), you want it to look like this: <div clas ...

Developing a universal.css and universal.js file for a custom WordPress theme

I have developed a custom WordPress theme with an extensive amount of code. To manage the numerous style and script files, I have segmented them into multiple individual files. To integrate all these files into my template, I utilized the following code w ...

Ways to customize the selected item's color in md-select using Angular Material?

Currently, I am utilizing the dark theme in angular-material 1.0.4. The appearance of the select element is different when an item is selected: https://i.sstatic.net/FRU0r.png Comparatively, this is how it appears with the default theme applied: https:/ ...

Ways to horizontally align 2 rows in React

I am in the process of developing a react app and I have encountered an issue with aligning the field names horizontally with their corresponding field values in multiple columns. Despite my efforts, the alignment still appears to be a bit off. Below is th ...

Generate three separate inline blocks and position elements within them without any impact on the neighboring blocks

In my attempt to create three blocks with set height and width, aligned on top/bottom with a couple of elements inside each one, I encountered an issue. Whenever I add additional DIVs to one of the elements (resulting in a different number of DIVs inside e ...

Develop a custom input field feature that utilizes both JavaScript and CSS

I really appreciate the feature that allows me to resize the textarea by simply clicking and dragging on the slanted lines in the lower right hand corner. However, I am looking for a way to apply CSS styles to text which is not possible with a textarea. ...

What is the process for developing multiple screens or views in PhoneGap?

Currently working on a reading app and decided to give phoneGap a shot for the first time. I'm pretty proficient in HTML, CSS, and JS, but not very familiar with xCode. In this app, I plan to have a button on the home screen that redirects users to an ...