Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing Ttk Notebook Tab Dashed Line

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)])
like image 733
jstaab Avatar asked Apr 29 '14 02:04

jstaab


1 Answers

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"])
like image 60
FabienAndre Avatar answered Sep 28 '22 02:09

FabienAndre