4

How can i make layout like this using CSS stylesheet for GTK app?

box needle

Here is example code:

#!/usr/bin/python

import gi

gi.require_version("Gtk", "3.0")
gi.require_version("Gdk", "3.0")

from gi.repository import Gtk, Gdk


# Main application window
# =======================
class MainWindow(Gtk.Window):
    def __init__(self):
        Gtk.Window.__init__(self)

        self.connect("delete-event", Gtk.main_quit)

        self.set_name("main-window")

        # load style from file
        cssProvider = Gtk.CssProvider()
        cssProvider.load_from_path('style.css')

        # get the default screen for the default display
        screen = Gdk.Screen.get_default()

        # new object which will store styling information affecting widget
        styleContext = Gtk.StyleContext()
        styleContext.add_provider_for_screen(screen, cssProvider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)

        self.resize(200, 200)

        # create box for another boxes
        self.box = Gtk.Box()
        self.box.set_name("box")
        self.add(self.box)

        self.box2 = Gtk.Box()
        self.box2.set_name("box2")
        self.box.pack_start(self.box2, False, False, 0)

        self.text = Gtk.Label.new()
        self.text.set_text('text')
        self.box2.pack_start(self.text, False, False, 0)

        self.box3 = Gtk.Box()
        self.box3.set_name("box3")
        self.box.pack_start(self.box3, False, False, 0)

        self.text2 = Gtk.Label.new()
        self.text2.set_text('text2')
        self.box3.pack_start(self.text2, False, False, 0)

# Create and show window
win = MainWindow()
win.show_all()
Gtk.main()

Here is CSS stylesheet for this which will work in HTML

#box {
  background: blue;
  padding: 5px;
}

#box2 {
  background: red;
  margin: 5px;
}

#box3 {
  background: green;
  margin: 5px;
}

But result is:

box result

Of course I can add padding/spacing values in python code, but only for horizontal gaps without nesting boxes. Can it be done without hardcoding, with css-only solution?

1 Answer 1

5

Not right now. GTK doesn't support margin properties on its widgets, and it only supports padding properties on widgets that draw a frame. (Which elements draw a frame can be a bit arbitrary, but Gtk.Box and Gtk.Label don't, so that's why your example doesn't work. You can fake it on any widget by putting it inside a Gtk.Frame though.)

This blog post reveals that margin and padding are planned to be supported consistently on all widgets in the upcoming GTK 3.20.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.