13

Gretings!

I want to change the color displayed in a tab header, created using ttk.Notebook. After search for a while I've found that to change the style of ttk widgets, we can use ttk. Styling, because Notebook apparently do not have configuration options to change its colors. However, I only found how to change the background and the foreground of a NoteBook object, but not how to configure the "tab header", whose background is either white (when selected) or grey (when not selected).

Anybody can help me with this?

This is the code that I have for now, related with what I'm trying to do

import Tkinter as tki
import ttk

...
##Other code. Not relevant here
...

#create tabs and associate the apropriate frames to it
tabs = ttk.Notebook(parent.master)
ttk.Style().configure("TNotebook", background=mainWcolor, foreground='green')   #configure "tabs" background color

paramsFrame = tki.Frame(tabs, bg=mainWcolor)   #frame with control parameters
comsFrame = tki.Frame(tabs, bg=mainWcolor)     #frame with communication parameters.
ssInfoFrame = tki.Frame(tabs, bg=mainWcolor)   #frame with start and stop messages and procedures

tabs.add(paramsFrame, text = "Control")
tabs.add(comsFrame, text = "Communications")
tabs.add(ssInfoFrame, text = "Start & Stop info")
tabs.pack()

Thanks in advance.

Justino Rodrigues
  • 552
  • 3
  • 6
  • 16
  • In case you haven't found a solution yet, I found one that helped me out a ton! Good Luck! page.sourceforge.net/html/themes.html – Jarren Poulsen Jan 30 '19 at 20:46
  • That one with example: https://www.tutorialspoint.com/change-the-color-of-tab-header-in-ttk-notebook-tkinter `s.configure('TNotebook.Tab', background="green3") s.map("TNotebook", background= [("selected", "green3")])` – Lod Aug 24 '23 at 18:32

4 Answers4

21

You can try creating a custom theme.

import tkinter as tk
from tkinter import ttk

root = tk.Tk()

mygreen = "#d2ffd2"
myred = "#dd0202"

style = ttk.Style()

style.theme_create( "yummy", parent="alt", settings={
        "TNotebook": {"configure": {"tabmargins": [2, 5, 2, 0] } },
        "TNotebook.Tab": {
            "configure": {"padding": [5, 1], "background": mygreen },
            "map":       {"background": [("selected", myred)],
                          "expand": [("selected", [1, 1, 1, 0])] } } } )

style.theme_use("yummy")

note = ttk.Notebook(root)
f1 = ttk.Frame(note, width=300, height=200)
note.add(f1, text = 'First')
f2 = ttk.Frame(note, width=300, height=200)
note.add(f2, text = 'Second')
note.pack(expand=1, fill='both', padx=5, pady=5)

tk.Button(root, text='yummy!').pack(fill='x')

root.mainloop()

EDIT

The most detailed ttk documentation is from the tcl/tk world

eg.

http://www.tcl.tk/man/tcl/TkCmd/ttk_notebook.htm

For some useful python-based examples, you can grab the pyttk-samples package from http://code.google.com/p/python-ttk/

Oblivion
  • 1,669
  • 14
  • 14
  • Works great! Thanks! However, I realize that the code is a bit "complex". You have answered my question, but now I became interested in understand what you really have done here. If it was the case, had you consulted any documentation useful to deal with Notebook widgets at this level of detail? The tutorials I have found don't describe this level of detail. – Justino Rodrigues Apr 21 '14 at 11:26
  • another decent source of ttk styling information is http://www.tkdocs.com/tutorial/styles.html – Bryan Oakley Apr 21 '14 at 22:04
  • Thanks Oblivion and Bryan! – Justino Rodrigues Apr 30 '14 at 10:51
  • 2
    What if I want to have different colors in different tabs? – Pontios Dec 13 '17 at 21:09
13

I had been using Oblivion's answer for some time, but I encountered an issue where the open/save dialog button outlines disappeared and Checkbuttons in Text widgets never appeared to be checked (even when they were checked). So, I translated the theme code into some style configuration and such to solve the problem (it solved it). This will let you change the tab bar color, the tab background/foreground and the active tab background/foreground. Plus, it won't cause issues with the rest of your chosen theme. It's essentially the same code from the theme translated over. So, really, Oblivion deserves most of the credit.

Style().configure("TNotebook", background=myTabBarColor);
Style().map("TNotebook.Tab", background=[("selected", myActiveTabBackgroundColor)], foreground=[("selected", myActiveTabForegroundColor)]);
Style().configure("TNotebook.Tab", background=myTabBackgroundColor, foreground=myTabForegroundColor);

Edit: Apparently, this solution doesn't work in Windows. I tested it in Linux (a number of versions of Xubuntu).

Brōtsyorfuzthrāx
  • 4,387
  • 4
  • 34
  • 56
  • 3
    The above did not work for me on Windows. I was only seeing the foreground colors but not the background colors. I found this posting (https://stackoverflow.com/questions/22389198/ttk-styling-tnotebook-tab-background-and-borderwidth-not-working) which explained why the above doesn't work, and it allowed me to get it working. – GaryMBloom Jan 15 '18 at 08:43
  • 1
    @Gary02127 That's really good to know. I used the code in the answer in Linux (several versions of Xubuntu). – Brōtsyorfuzthrāx Jan 15 '18 at 23:28
2

I'm a begginer in python, tkinter. I had these style problem by my App too. This worked by Treeview style and now checked by the Notebook, it works so fine for me using windows .... theme_use, configure, map.

noteStyle = ttk.Style()
noteStyle.theme_use('default')
noteStyle.configure("TNotebook", background=clr, borderwidth=0)
noteStyle.configure("TNotebook.Tab", background="clr", borderwidth=0)
noteStyle.map("TNotebook", background=[("selected", clr)])
Falcon77
  • 31
  • 2
2

change the color of a Tab header: when selecting a tab header. when upon hovering over a Tab header. removing the dotted line around the text in a tab header.

from tkinter import *
from tkinter import ttk

root = Tk()
#background color
color='#21252b'
root.configure(background = color)
root.resizable(False, False)
#Notebook color
sky_color = "sky blue"
gold_color = "gold"
color_tab = "#ccdee0"
#style
style = ttk.Style()
style.theme_create( "beautiful", parent = "alt", settings ={
        "TNotebook": {
            "configure": {"tabmargins": [10, 10, 20, 10], "background":sky_color }},
        "TNotebook.Tab": {
            "configure": {"padding": [30, 15], "background": sky_color, "font":('consolas italic', 14), "borderwidth":[0]},
            "map":       {"background": [("selected", gold_color), ('!active', sky_color), ('active', color_tab)],
                          "expand": [("selected", [1, 1, 1, 0])]}}})
style.theme_use("beautiful")
style.layout("Tab",
                    [('Notebook.tab', {'sticky': 'nswe', 'children':
                        [('Notebook.padding', {'side': 'top', 'sticky': 'nswe', 'children':
                            #[('Notebook.focus', {'side': 'top', 'sticky': 'nswe', 'children':
                                [('Notebook.label', {'side': 'top', 'sticky': ''})],
                            #})],
                        })],
                    })]
                 )
style.configure('TLabel', background = color , foreground = 'white')
style.configure('TFrame', background = color)
#frame
frame_main_notebook = ttk.Frame(root, width = 200, height = 100)
frame_main_notebook.pack()
#note book
main_notebook = ttk.Notebook(frame_main_notebook, width = 200, height = 100)
main_notebook.pack(side = TOP, expand = 1, fill = 'both')
#first tab
frame_one = ttk.Frame(main_notebook, width = 200, height = 100)
frame_one.pack(side = TOP)
main_notebook.add(frame_one, text = '    tab one    ')
ttk.Label(frame_one, text = "this is inside of tab one").pack()
#second tab
frame_two = ttk.Frame(main_notebook, width = 200, height = 100)
frame_two.pack(side = TOP)
ttk.Label(frame_two, text = "this is inside of tab two").pack()
main_notebook.add(frame_two, text = '    tab two    ')
    
root.mainloop()
kourosh
  • 81
  • 1
  • 4
  • please go through the link. I really need your help. link- https://stackoverflow.com/questions/76253451/inside-tkinter-notebook-ttk-widget-not-responding – anikesh sharma May 15 '23 at 11:38