In this tutorial I will not teach CSS, only how to add it with GTK+ using LGI.
Let’s start with some Lua
Our starting point is a Lua document. You can copy the code below if you
want to work on your computer. Save the following code as main.lua in a
directory on your computer.
local lgi = require("lgi")
local Gtk = lgi.require("Gtk", "3.0")
local Gdk = lgi.require("Gdk", "3.0")
assert = lgi.assert
local window = Gtk.Window {
title = "Adding CSS Styles",
width = 200,
height = 200,
window_position = Gtk.WindowPosition.CENTER,
{
Gtk.Button {
id = "myButton",
label = "Example of the label with css"
}
},
on_destroy = function()
Gtk.main_quit()
end
}
window:show_all()
Gtk.main()
Adding the CSS
The first thing to do is to include the CSS styles in the Lua document.
I recommend reading these documents for more information about the selectors and the properties that can be used:
- https://developer.gnome.org/gtk3/stable/chap-css-overview.html
- https://developer.gnome.org/gtk3/stable/chap-css-properties.html
Create a file in the same directory as your Lua document and save it as
custom.css with the following code.
window button {
color: #1E90FF;
}
button.red label {
color: #E32424;
}
To add custom.css to main.lua, add the following lines somewhere inside
the Lua document before displaying the window (GtkWindow) like this in this example:
assert = lgi.assert -- With this function I will confirm if the css file exists.
--- I load my css
local provider = Gtk.CssProvider()
-- Show a message if custom.css does not exist
assert(provider:load_from_path("custom.css"), "ERROR: custom.css not found")
--- I add my css to the current window
local screen = Gdk.Display.get_default_screen(Gdk.Display:get_default())
local GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600
Gtk.StyleContext.add_provider_for_screen(
screen, provider,
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION
)
local window = Gtk.Window {
Once the previous steps are done we can execute lua main.lua.
As you can see, we have added the desired CSS styles to our little example.
To extend the tutorial further, we will now add a class to our button when
we press it, using the add_class method.
{
Gtk.Button {
id = "myButton",
label = "Example of the label with css",
on_clicked = function (self)
self:get_style_context():add_class("red")
end
}
},
If you have already worked with Javascript, the above code would be translated to this:
document.getElementById("myButton").addEventListener("click", function () {
this.classList.add("red");
});