How can I add custom CSS to my application built with Python and GTK 4?

Hello. I’m trying to style the following program with a custom CSS file. Here I want to create other buttons and add custom backgrounds via CSS file.

import sys
import gi
gi.require_version (
  'Gtk', '4.0'
)
gi.require_version (
  'Adw', '1'
)
from gi.repository import Gtk, Adw, GLib, Gio

class MainWindow (Gtk.ApplicationWindow):
  def __init__ (self, *args, **kwargs):
    super ().__init__ (*args, **kwargs)
    GLib.set_application_name ('Adwaita Buttons')
    GLib.set_prgname ('Adwaita Examples by Afacanc38')

    self.hb = Gtk.HeaderBar ()
    self.set_titlebar (self.hb)

    self.scroll = Gtk.ScrolledWindow ()
    self.set_child (self.scroll)

    self.main_box = Gtk.Box (
      spacing = 10,
      orientation = Gtk.Orientation.VERTICAL
    )
    self.main_box.set_margin_top (20)
    self.main_box.set_margin_bottom (20)
    self.main_box.set_margin_start (20)
    self.main_box.set_margin_end (20)
    self.scroll.set_child(self.main_box)

    self.box_normal_buttons_group = Gtk.Box (
      spacing = 6,
      orientation = Gtk.Orientation.VERTICAL,
      halign = Gtk.Align.START,
      valign = Gtk.Align.START
    )
    self.main_box.append (self.box_normal_buttons_group)

    self.lbl_normal_buttons_title = Gtk.Label (
      label = 'Normal Buttons',
      halign = Gtk.Align.START
    )
    self.lbl_normal_buttons_title.get_style_context().add_class ('title-1')
    self.box_normal_buttons_group.append (self.lbl_normal_buttons_title)

    self.box_normal_buttons = Gtk.Box (
      spacing = 6
    )
    self.box_normal_buttons_group.append (self.box_normal_buttons)

    self.normal_button_regular = Gtk.Button (
      label = 'Regular'
    )
    self.box_normal_buttons.append (self.normal_button_regular)

    self.normal_button_flat = Gtk.Button (
      label = 'Flat'
    )
    self.normal_button_flat.get_style_context().add_class ('flat')
    self.box_normal_buttons.append (self.normal_button_flat)

    self.normal_button_suggested = Gtk.Button (
      label = 'Suggested'
    )
    self.normal_button_suggested.get_style_context ().add_class ('suggested-action')
    self.box_normal_buttons.append (self.normal_button_suggested)
    
    self.normal_button_destructive = Gtk.Button (
      label = 'Destructive'
    )
    self.normal_button_destructive.get_style_context ().add_class ('destructive-action')
    self.box_normal_buttons.append (self.normal_button_destructive)

class MyApp (Adw.Application):
  def __init__ (self, **kwargs):
    super ().__init__ (**kwargs)
    self.connect (
      'activate',
      self.on_activate
    )

  def on_activate (self, app):
    self.win = MainWindow (
      application = app
    )
    self.win.present ()

app = MyApp(
  application_id = 'io.github.afacanc38.adw-buttons'
)
app.run(sys.argv)

I tried to try what is described in the topic below, but failed to do so.

Please excuse my ignorance because I’m really new to Gtk+.

1 Like

EDIT: I found a pull request on a Python Gtk4 Tutorial on GitHub.

But when I tried this, I got an error like this.

alperen@nalbant:~/Projeler/gtk-examples-python$ /bin/python3 /home/alperen/Projeler/gtk-examples-python/libadwaita/2-buttons.py
Traceback (most recent call last):
  File "/home/alperen/Projeler/gtk-examples-python/libadwaita/2-buttons.py", line 89, in on_activate
    self.win = MainWindow (
  File "/home/alperen/Projeler/gtk-examples-python/libadwaita/2-buttons.py", line 18, in __init__
    css_provider.load_from_file('resources/2-buttons.css')
TypeError: argument file: Expected Gio.File, but got str
1 Like

I found the solution in Avvie’s source code.

    def set_pink_theme(self):
        self.reset_theme()
        self.sm.set_color_scheme(Adw.ColorScheme.FORCE_LIGHT)
        path = os.path.join(resource_folder, "pinku.css")
        self.css.load_from_file(Gio.File.new_for_path(path))
        self.sc.add_provider_for_display(self.win.get_display(), self.css, Gtk.STYLE_PROVIDER_PRIORITY_USER)

And I edited the code as bellow.

css_provider = Gtk.CssProvider()
    css_provider.load_from_file(Gio.File.new_for_path('resources/2-buttons.css'))
    Gtk.StyleContext.add_provider_for_display(Gdk.Display.get_default(), css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
/* resources/2-buttons.css */
button {
  background: green;
}

resim

2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.