How to change Gtk.Notebook Tabs
5,085
Here's a minimal testcase where the notebook is being styled with CSS.
from gi.repository import Gtk, Gdk
CSS = """
.myNotebook tab {
background-color: red;
}
.myNotebook tab:active {
background-color: blue;
}
"""
class TestWindow(Gtk.Window):
def __init__(self):
Gtk.Window.__init__(self)
self.resize(600, 400)
self.connect("delete-event", Gtk.main_quit)
cssprovider = Gtk.CssProvider()
cssprovider.load_from_data(CSS)
screen = Gdk.Screen.get_default()
stylecontext = Gtk.StyleContext()
stylecontext.add_provider_for_screen(screen, cssprovider,
Gtk.STYLE_PROVIDER_PRIORITY_USER)
nb = Gtk.Notebook()
context = nb.get_style_context()
context.add_class("myNotebook")
for x in range(1, 5):
label = Gtk.Label("page %s" % x)
nb.append_page(label, None)
self.add(nb)
self.show_all()
if __name__ == "__main__":
test = TestWindow()
Gtk.main()
This only changes the background color of the tabs, but more should be possible. Here is the style for the default Ubuntu theme, you're probably searching for the border-image
.
.notebook tab {
background-image: none;
background-color: transparent;
border-style: solid;
border-image: -gtk-gradient (linear, left top, left bottom,
from (alpha (shade (@bg_color, 0.9), 0.0)),
to (shade (@bg_color, 0.9))) 1;
border-image-width: 0 1px;
border-color: transparent;
border-width: 0;
box-shadow: none;
/*color: shade (@fg_color, 1.2);*/
}
.notebook tab:active {
border-color: shade (@bg_color, 0.82);
border-style: solid;
border-width: 1px;
background-color: shade (@bg_color, 1.02);
background-image: none;
/*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/
color: @fg_color;
}
Instead of CSS classes, you can also use the GTK widget name to apply the custom style to all widgets. Remove the context.add_class("myNotebook")
and use the following CSS:
CSS = """
GtkNotebook tab {
background-color: red;
}
GtkNotebook tab:active {
background-color: blue;
}
"""
Or work with custom names. Add a name to your widget: nb.set_name("myNotebook")
And the CSS:
CSS = """
GtkNotebook#myNotebook tab {
background-color: red;
}
GtkNotebook#myNotebook tab:active {
background-color: blue;
}
"""
Related videos on Youtube
Author by
koMah
I love everything that regards computers, informatics and programming
Updated on September 18, 2022Comments
-
koMah over 1 year
There is a way to change the default Gtk.Notebook Tab? I want to realize a flat tab button
-
Timo over 10 yearsWhat is a "flat tab button"?
-
koMah over 10 yearsMy intent was to realize a Gtk.Notebook with custom button shapes. I dont't wont do add a label, or a widget inside tabs, i want to change the tab button completely
-
-
koMah over 10 yearsThanks for your answer, I prefer subclassing widgets but this method works as well. I know that in ubuntu, themes are stored in /usr/share/themes/, but can you tell me the filenames with this lines?
-
Timo over 10 yearsSubclassing isn't going to help you with theming though. The file is located here
/usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css
from line 1174 on my system.