14

I'm trying to make a tkinter app that doesn't look like a tkinter app. I'm using a ttk Notebook, and the tabs have this little dotted line around the text when they're selected. It looks terrible, and I can't find a way to remove it using either styles or config. Here's a screenshot to clarify:

enter image description here

Edit for code (I don't think it'll be terribly helpful, since I'm actually just trying to remove a default style thing.):

Here is the notebook creation:

tabs = ttk.Notebook(mainframe, width=319, height=210, style=style.Notebook)
tabs.grid(column=0, row=1, sticky=('n', 'w', 'e', 's'))
tabs.columnconfigure(0, weight=1)
tabs.rowconfigure(0, weight=1)

Filling it in:

tab1 = ttk.Frame(tabs)
tab1_frame = ttk.Frame(tab1, style=style.Frame)
tab1_frame.pack(anchor='center', expand=1, fill='both')
# stick some widgets in
progress = ttk.Progressbar(tab1_frame, orient="horizontal", length=300, mode="determinate")
progress.grid(column=1, row=1, columnspan=2, padx=style.padding, pady=style.padding)
progress['maximum'] = 1000
progress['value'] = 500
# More widgets
# Another tab
tab2 = ttk.Frame(tabs)
tab2_frame = ttk.Frame(tab2, style=style.Frame)
tab2_frame.pack(anchor='center', expand=1, fill='both')
# blah blah

Relevant styles:

style_config = Style()
style_config.theme_use('default')

style_config.configure(self.Notebook,
    background=self.dark,
    borderwidth=0)

style_config.configure(self.Tab,
   background=self.dark,
   foreground='white',
   padding=self.padding,
   borderwidth=0)
style_config.map(self.Tab,
    background=[('selected', self.color1)])
jstaab
  • 3,449
  • 1
  • 27
  • 40

3 Answers3

14

You can remove this focus mark by altering the sub elements of tab widget. Ttk widgets are decomposed in subelements. The layout of these elements is described through layout method (or in a layout parameter of theme_create). Here is a command to remove layout marks (you can apply it directly to Tab, or any other derived theme), the commented part is what lead previously to drawing the focus (retrieved through style.layout("Tab"))

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': ''})],
        #})],
    })],
})]
)

A more hacky way could be to alter the color of this focus mark, for instance to draw it the same color as background

style.configure("Tab", focuscolor=style.configure(".")["background"])
FabienAndre
  • 4,514
  • 25
  • 38
2

On a Windows machine, if I create a theme and use "classic" as parent, the ugly dashed border is also not drawn.

style.theme_create( "Florina", parent="classic", settings={
    "TLabel": {"configure": {"background": BACKGROUND }},
    "TFrame": {"configure": {"background": BACKGROUND }},
    "TNotebook": {
        "configure": {"background": BACKGROUND, "tabmargins": [1, 5, 2, 0] }},
    "TNotebook.Tab": {
        "configure": {"background": DARKBG, "padding": [5, 2] },
        "map":       {"background": [("selected", BACKGROUND)],
                      "expand": [("selected", [1, 1, 1, 0])]
                      } } } )
petro4213
  • 163
  • 9
1

You can change the focus color using theme_create():

wthm = ttk.Style()
    
wthm.theme_create('wtheme', parent='default', settings={
       'TNotebook.Tab': {
           'configure': {'focuscolor':{
                             'configure':{
                                 '.':'<your_color>'}
                         }}
})

wthm.theme_use('wtheme')
Erdem Şen
  • 97
  • 1
  • 10