Change the Background color of a Gtk Toglebutton in Python

Question

I’ve been looking for a few days for information on how to change the colour of widgets in Python/Gtk 3 but haven’t found much. What I specifically want to do is change the colour of ToggleButtons in CSS. The Gtk documentation is not help for me because I do not understand C.

I tried to understand the code at: Change the Background color of a Toglebutton when pressed in GTK3 (C language), and change it to Python, shown below, but the button colour does not change. Could someone kindly tell me if there is a good resource for Python programmers using CSS for Gtk programs or can someone point me in the correct direction to change the code below to work? Thank you in advance.

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk, Gdk

class btn:
    def __init__(self):
# From https://stackoverflow.com/questions/41796529/
        styleProvider=Gtk.CssProvider()
        css = b"""
GtkWindow {
    background-color: #A4A4A4;
    color: cyan;
    border-width: 3px;
    border-color: blue;
}

#myGrid {
    background-color: white;
    border-style: solid;
    border-width: 3px;
    border-radius: 15px;
    border-color: grey;
}

#myChild {
    background-color: red;
    border-style: solid;
    border-width: 3px;
    border-radius: 15px;
    border-color: grey;
}

#tgl_btn{
    background-color: red;
    color: red;
}


GtkButton {
    background-image: none;
    background-color: blue;
}

GtkButton:active {
    background-color: #00FF00;
}
"""
        styleProvider.load_from_data(css)
        Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(),styleProvider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
        self.window = Gtk.Window()
        self.btn = Gtk.ToggleButton(label = 'tgl_btn')
        self.window.add(self.btn)
        self.window.show_all()

    def main(self):
        Gtk.main()

p=btn()
p.main()

Asked By: John

||

Source

Answer 1

To change the color of a ToggleButton in Python/Gtk using CSS, you can follow these steps:

Create a Gtk.CssProvider() object to store your CSS code.
Use the Gtk.StyleContext.add_provider_for_screen() method to add the CSS provider to the screen of your application.
Define a CSS style for the ToggleButton by using its widget name followed by the CSS properties you want to change.

Here’s an example code snippet that demonstrates how to change the color of a ToggleButton:

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk, Gdk

class btn:
    def __init__(self):
        window = Gtk.Window()
        window.connect("destroy", Gtk.main_quit)
        
        # Create a Gtk.Grid widget
        grid = Gtk.Grid()
        window.add(grid)
        
        # Create a Gtk.ToggleButton widget and add it to the grid
        toggle_button = Gtk.ToggleButton("Toggle Button")
        toggle_button.set_name("my_toggle_button")
        grid.attach(toggle_button, 0, 0, 1, 1)
        
        # Define the CSS style for the ToggleButton
        css_provider = Gtk.CssProvider()
        css_provider.load_from_data(b"""
            #my_toggle_button {
                background-color: red;
            }
        """)
        Gtk.StyleContext.add_provider_for_screen(
            Gdk.Screen.get_default(),
            css_provider,
            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
        )
        
        window.show_all()

if __name__ == "__main__":
    btn()
    Gtk.main()

In this example, we create a Gtk.ToggleButton() widget and add it to a Gtk.Grid() container. We set the name of the ToggleButton to "my_toggle_button" using the set_name() method. Then, we define a CSS style for the ToggleButton using the widget name and the "background-color" property.

Finally, we create a Gtk.CssProvider() object to store the CSS code and load it using the load_from_data() method. We add the CSS provider to the screen of the application using the Gtk.StyleContext.add_provider_for_screen() method with a priority of Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION. This ensures that the CSS styles will be applied to the widgets in our application.

Answered By: Satyam Mishra

Change the Background color of a Gtk Toglebutton in Python

Question:

Answers: