CODEWITHSUNDEEP
pythontkinterttk
jstaab
jstaab

Reputation: 3855

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)])

Upvotes: 14

Views: 7657

Answers (3)

Erdem Şen
Erdem Şen

Reputation: 99

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')

Upvotes: 1

petro4213
petro4213

Reputation: 163

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])]
                      } } } )

Upvotes: 2

FabienAndre
FabienAndre

Reputation: 4604

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"])

Upvotes: 14

Related Questions