Modifying the text color of GtkToggleToolButton using a custom CSS stylesheet in GTK+3

I am currently attempting to implement a CSS stylesheet to modify the properties of my GTK/C application. Within a dialog, there is a GtkToolBar containing GtkToggleToolButtons. My goal is to have the text on these buttons appear in different colors.

In the past, I would include the following code snippet in my CSS stylesheet:

#histoToolGreen {
  color: green;
}

#histoToolBlue {
  color: blue;
}

This method worked successfully with GTK 3.20 (but only when the buttons were turned off). However, after updating GTK, this solution no longer works. The names of the buttons are histoToolGreen and histoToolBlue.

Could you please advise me on how to change the color of a GtkToggleToolButton using a CSS stylesheet?

csscbuttoncolorsgtk

Answer №1

If you want to experiment with enhancing the appearance, consider adjusting the color of the label instead of the button itself. Buttons essentially serve as interactive containers. Including text on buttons serves as a convenient feature that automatically includes a label.

#histoToolGreen label {
  color: green;
}

#histoToolBlue label {
  color: blue;
}

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

Miscalculation in input parameters of the function

Apologies for the unclear title in advance. Today, I was revising some ancient C code (c89 era) and encountered a peculiar rounding problem. The original code utilized numerous #define statements to define certain values used in a specific calculation. W ...

clinuxubuntu

HTML formatting for text

I recently created an HTML website using Dreamweaver. I faced an issue while trying to design a section within an article using tables to incorporate both text and images. Unfortunately, the tables did not have rounded edges as I desired. I am reaching out ...

htmlcsshtml-tableformatting

CSS: Revert INPUT Element Back to Default Width

Although it may seem impossible, I am still going to ask the question. Suppose I have the following HTML: <div style="width: 500px;"> <input class="full" /> </div> And the corresponding CSS: input { width: 100%; } .full { ...

htmlcssbrowsercross-browser

Eliminating Redundant Styles in Specific CSS Files with Gulp, When They Already Exist in a Shared CSS File

Is there a way to eliminate redundant styles in individual css files that are already defined in a common.css file? common.css contains the following styles. .nav { background-color: red; } home.css includes the following styles. .nav { backgroun ...

cssgulppurgecss-purge

Background does not extend beyond the visible screen area

I'm currently working on a website project for the students at my school, but I've encountered a minor issue. When scrolling left or right, the background doesn't extend to cover the entire page; instead, it stops where the edge of the page ...

htmlcssweb

Creating effective href anchors within an iframe using the `srcdoc` attribute

While loading some HTML content in an iframe using the srcdoc attribute, I encountered an issue where following anchor tag links inside the iframe caused the entire page to load within the iframe instead of scrolling to the linked id. You can see a demons ...

javascripthtmlcssiframe

Stop div from exceeding the page boundaries

Here's my current dilemma: I have a simple css3 tooltip-menu that is hidden by default and appears on mouseover. It has a fixed width and is positioned absolutely to the right (with an arrow in the middle pointing to the hovered element). The issue I ...

jquerycsstooltip

Issue with the alignment of the signup form next to the slider

form{ max-width: 30%; background-color: white; padding: 2%; position: relative; left: 50%; color: black; font-family: fantasy; } .form-control{ padding: 2%; margin: 1%; } label{ border-radius: ...

htmlcssslider

Creating a unique custom shape for Bootstrap navigation bar

I'm looking to create a unique custom navigation bar shape inspired by the image attached below. https://i.sstatic.net/G7iIV.png To achieve this shape, I've utilized the following CSS: .navbar-nav.nav-bar-custom { transform: skew(-21deg); ...

csshtmlbootstrap-4

Implementing CSS styles with the className attribute in a Material UI component within a ReactJS application sourced from a dynamic JSON object

I have a dynamic JSON object that includes a button element. I am using createElement and Material UI to display the data from this object. I wanted to add custom CSS styling to the button component using className, but I've been struggling to achiev ...

javascriptcssreactjsmaterial-uijsx

What can I do to prevent my website's font from getting distorted due to the recommended display settings?

I've noticed that newer laptops typically have a display font-size recommendation of 150%, which is causing issues with viewing my webpage correctly. The items appear larger and stretched out on their screens. Is there a way to ensure that users can ...

htmlcsswidth

Tips for keeping the left grid column content visible while scrolling

I have set up a bootstrap grid with one row and two columns like this: <div id="main"> <div class="row"> <div class="col-sm-2 first-col"> Is there a way to keep this column fixed while scrolling? </div> <div ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

How do you determine the dimensions of a background image?

My div is a perfect square, measuring 200 pixels by 200 pixels. The background image I've chosen to use is larger at 500 pixels by 500 pixels. I'm searching for a method to ensure that the entire background image fits neatly within the confines ...

htmlcssbackground

"Even as the page scrolls down, the scrollbars stubbornly stay anchored at the

I'm currently working on a webpage that includes a link to an anchor, which should be a straightforward case. The link code looks something like this: <a href="#target">Link</a> And the anchor code looks like this: <a name=" ...

jquerycsshyperlinkscrollbaranchor

Words next to picture

Can someone help me with aligning different images of varying widths but the same height inline with text next to each image? I tried to do it, but it doesn't look good on responsive screens. Any suggestions on how to fix this? And if there's a b ...

javascripthtmlcsstwitter-bootstrap

What is the best way to align isotope and organize its components?

I have searched for solutions to my issue with centering isotope on my project, but none of the existing answers were sufficient. I am facing challenges trying to center isotope without creating extra space between its elements and arranging them in a spec ...

htmlcssjquery-isotope

What methods are available to test my website across different browsers such as outdated versions of Internet Explorer like IE8?

Currently, I am working on Chrome with Windows 7 OS installed. However, Windows 7 does not support Internet Explorer 8. This is causing issues when trying to view my web pages in the IE8 version and older. How can I resolve this problem? I have attempted ...

javascripthtmlcssuser-interface

In React, when I attempt to pass color props to an SVG component, the color of the SVG does not update as

I've added a new SVG component called SvgAddnew with the following code: import * as React from 'react'; function SvgAddnew(props: React.SVGProps<SVGSVGElement>) { return ( <svg width="1em" height="1em" vi ...

reactjscolorsbackground-color

Can we rely on C or C++ to ensure that array is less than array + SIZE?

Imagine you are working with an array: int array[SIZE]; or int *array = new(int[SIZE]); Is there a guarantee in C or C++ that array < array + SIZE, and if so, where is this specified? I am aware that many operating systems ensure this behavior by res ...

c++clanguage-lawyer

The parent container fails to adjust its size to fit the child div

While browsing through various questions, I noticed that none of them mentioned the position:absolute property (which may be the missing piece). I have always been comfortable working with tables, but in my first attempt with divs, I encountered an issue. ...

csshtml