The CSS provider for Gtk+3 is malfunctioning

I've been attempting to set an image as the background of a GtkBox using a CSS provider, and also customize the style of some label text, but no matter what I try, nothing seems to work.

Below is the content of my custom.css file:

GtkBox#Home_PrincipalScreen_table{
    background-image: url("background.png");
}

GtkLabel#Home_Cooling_Tunnel1_Cooler_label1{
    color: white;
}

GtkLabel#label_Avg_Temp_value{
    color: red;
    font-family: Segoe UI;
    font-size: 25px;
}
GtkButton{
    color: blue;
    font-size: 25px;
}

And here is a snippet from my .c file showing how I'm loading the CSS file:

    GFile *file= g_file_new_for_path("custom.css");
    GtkCssProvider *css_provider = gtk_css_provider_new();
    if(!gtk_css_provider_load_from_file(css_provider, file, &error))
    {
        g_warning( "%s", error->message );
        g_free( error );
        return( 1 );
    }
    gtk_style_context_add_provider_for_screen(gdk_screen_get_default(), css_provider, GTK_STYLE_PROVIDER_PRIORITY_USER);

An update on the issue:

While widgets like GtkButton are changing their properties according to the CSS, specific widgets such as Home_PrincipalScreen_table are not responding to the styling.

Can anyone point out what might be wrong with my code?

Answer №1

The issue arises from not specifying the widget name in Glade. The CSS provider is identified by widget name rather than ID. To resolve this, I replaced

GtkBox#Home_PrincipalScreen_table
with #Background, and defined the widget name as Background. This modification successfully resolved the issue...

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

Learn the easy steps to position an image to the right using FreeMarker

I'm attempting to align the final image on the right side of the page in order to achieve a symmetrical look. The code I have been using in FTL is as follows, but it consistently ends up next to the middle section: <table class="h ...

Display new information within a div element seamlessly without refreshing the page

Just a heads-up, I'm new to HTML development... Currently working on a website using Bootstrap. There are some buttons on the left side shown in the screenshot, and my goal is to update the content on the right without having to reload the entire pag ...

Whitespace in struct causing string to malfunction

I am having trouble understanding why example1 is not working while example2 works. Can you please explain how to put characters with whitespaces into a string used in a struct? I am new to C programming and have been able to find solutions for other probl ...

Achieving the perfect vertical alignment of navigation buttons alongside a responsive image

Is there a way to ensure that the button always vertically aligns in the middle of the image responsively? I've managed to make the image responsive using .img-responsive, but I'm having trouble keeping the arrow centered on the image at all time ...

Error in Chrome: Text container's height is not fully extended to 100%

I'm encountering an issue with achieving 100% height on a child container in Google Chrome, although it works perfectly fine on Firefox. Here is the URL: http://linco.com.py/beta/multiplaza/cartelera.php The styling for the main container is as fol ...

Dynamically switch between showing more and showing less content on each div

Whenever the specific show more button is clicked, the content should be displayed without causing the entire component to re-render. I have tried using a useState, but each time the button is clicked, the whole component re-renders, resulting in long load ...

Is there a way to modify the scroll ion-content's color scheme?

Is there a way to change the scroll color in Ionic to green, specifically for ion-content? Any suggestions on how I can achieve this? Below is my HTML code: <ion-header> <ion-toolbar> <ion-buttons slot="start"> ...

Issues with changing background colors using Jquery animate

I am attempting to create a fading background color effect when a button is clicked. Currently, I can change the background color using this code: $("#" + lblqty).css("background","#e9f1ff"); However, when I try to use the animate function as shown below ...

Controlling the order of class specification prioritization

I have a situation with DOM elements that possess both the foo and bar classes: <div class="foo bar">...</div> I am looking to manage the priority between them. Referring to the W3C specification on this matter, I considered that appending ad ...

Turn a textfield on and off in real-time

Hey everyone, I've been working on making a textfield dynamic and I wanted to share my code with you: <input type="text" id="test1" value ="dynamic" onfocus="this.disabled=true" onblur="this.disabled=false"> <input type="text" id="test2 ...

.comment {Visibility:hidden;} is only functioning on one specific page

What could be the reason behind this function only functioning on one page and not the others? The URL in question is . Specifically, the functionality is only active on the contact page while all other pages still display a comment section. ...

it will still function properly regardless of the width being set to zero

Is anyone able to explain the strange phenomenon I am experiencing with this code snippet? In this particular example, I have set the width of selector h3 to 0. However, when viewing it in IE 9 using F12 development tools, I can see that the width is indee ...

Why am I restricted to adjusting mat-elevation settings within the component's CSS exclusively?

In my Angular 8 project, I am utilizing Angular material to enhance the design of my material cards. To set up the shadow effect on these cards, I am using the elevation helper mixins provided in the documentation: https://material.angular.io/guide/elevati ...

What is the most efficient way to allow a user to input n strings in C without the need to allocate n spaces?

Attempting to tackle a problem with an input format structured as follows: n // number of strings first string second string ..... nth string // n strings to be separated by newlines Each string input requires modifications, and the resulting mo ...

Having trouble with CSS :before pseudo-element and sibling selector?

Looking for a CSS solution to change the appearance of a triangle when the .hide class is activated within my markup. I attempted using a pseudo-element like so: summary:before { content: '\25BC'; } summary:before + .hide { con ...

Troubleshooting border styling problems on an iPad for a table

I'm encountering a CSS issue specifically on iPad devices when rendering the HTML page. Oddly enough, everything appears fine on other browsers. The problem I'm facing is a small space between the cells in my tables as shown in this image: Stran ...

Removing the navigation button from the hamburger menu

I am working on creating a semi-progressive top navigation bar. For the mobile viewport, the navigation bar will only display the logo and a hamburger button. When the button is clicked, various navigation menu options as well as the Log In and Sign Up bu ...

Remove the float from the final list item in order to resolve display issues in Internet Explorer

I am trying to create a menu with the following HTML structure: <ul> <li id="btnHome"><a href="#">Link One</a></li> <li id="btnAbout"><a href="#">Link Two</a></li> <li id="btnContact"> ...

Is there a way to keep the spotlight/shadow position fixed in relation to the horizontal center, regardless of the zoom level?

After working on the following code snippet, I've managed to keep the spotlight centered horizontally, except when the zoom factor is too high. This means that when I zoom in, the spot light no longer remains centered in the horizontal view port. It& ...

What could be causing the background image on my element to not update?

I'm attempting to utilize a single background image that is 3 pixels wide and 89 pixels tall. Each vertical stripe of 1 pixel will serve as the background for a different div. I had presumed that adjusting the background-position by -1px 0 and specif ...