Button - Style

Use the button widget as our first example and run the following queries interactively in Python.

Import ttk

Older versions of python work with import ttk, newer versions use import tkinter.ttk as ttk

Find the class name:

>>>import ttk
>>>St = ttk.Style()
# Style is used to call the classic theme
>>>St.theme_use('classic')
# step 1 using the widget name of *Button*
>>>but = ttk.Button(None, text='Righto')

# step 2
>>>butClass = but.winfo_class()
# find the class name using the Button handle "but"
>>>butClass
   TButton

The class name is 'TButton'. Using layout find the element name(s), the elements are preceded by the component name, in this case 'Button.:

     # step 3
     >>> layout = St.layout('TButton')
# find the Button component names as used by the classic theme
     >>> layout
     [('Button.highlight', {'children': [('Button.border', {'border':
     '1', 'children': [('Button.padding', {'children': [('Button.label',
     {'sticky': 'nswe'})], 'sticky': 'nswe'})], 'sticky': 'nswe'})],
     'sticky': 'nswe'})]

It creates quite an output, but don't be put off. We have found 4 element names - highlight, border, padding and label. Compare to Button Elements.

layout

Older versions of python display this layout as:

[('Button.highlight', {'children': [('Button.border', {'border':
'1', 'children': [('Button.padding', {'children': [('Button.label',
{'sticky': 'nswe'})], 'sticky': 'nswe'})], 'sticky': 'nswe'})],
'sticky': 'nswe'})]

Newer versions will display as:

[('Button.highlight',
    {'children': [('Button.border',
         {'border': '1',
          'children': [('Button.padding',
                        {'children': [('Button.label',
                                       {'sticky': 'nswe'})],
                         'sticky': 'nswe'})],
          'sticky': 'nswe'})],
'sticky': 'nswe'})]

Be careful to use the correct element name with right theme. That's just completed the third step. As a help in determining the element names for every widget check out the table 02elements.csv. See how the names change not only with the widgets, but may also change with the theme.

Table Theme Layout Names

Show/Hide Table 02names.csv

02names.csv

Widget	Layout Name
Button	Button
Checkbutton	Checkbutton
Combobox	Combobox
Entry	Entry
Frame	Frame
Label	Label
LabelFrame	Labelframe
LabelFrame - Label	Label
Menubutton	Menubutton
Notebook	Notebook
Notebook - Tab	Notebook
PanedWindow	PanedWindow
PanedWindow - Sash	Sash
Progressbar	Progressbar
Radiobutton	Radiobutton
Scale	Scale
Scrollbar	Scrollbar
Separator	Separator
Sizegrip	Sizegrip
Spinbox	Spinbox
Treeview	Treeview
Treeview - Heading	Treeheading

Now onto the element options:

     # step 4
     >>>d = St.element_options('Button.highlight') # find the element attributes
     >>> d
     ('-highlightcolor', '-highlightthickness')
# 2 elements in this component

     # step 5
     >>>St.lookup('Button.highlight', 'highlightthickness')
     1
# the highlight is 1 pixel thick

     # step 5 repeated for the other element
     >>> St.lookup('Button.highlight', 'highlightcolor')
     '#d9d9d9'
# highlight has a default or normal colour #d9d9d9 which is grey

Button is a fairly straightforward widget, but some such as Progressbar, Scale and Scrollbar have an orientation, whereas LabelFrame, Notebook and Treeview have a main and auxiliary class name. Lastly PanedWindow has both orientation and an auxiliary part.

Table Theme Elements

Show/Hide Table 02elements.csv

02elements.csv

Widget	alt	clam	classic	default
Button	border, focus, padding, label	border, focus, padding, label	highlight, border, padding, label	border, focus, padding, label
Checkbutton	padding, Checkbutton.indicator, focus, label	padding, Checkbutton.indicator, focus, label	highlight, border, padding, Checkbutton.indicator, label	padding, Checkbutton.indicator, focus, label
Combobox	field, downarrow, padding, textarea	downarrow, field, padding, textarea	field, downarrow, padding, textarea	field, downarrow, padding, textarea
Entry	field, padding, textarea	field, padding, textarea	highlight, field, padding, textarea	field, padding, textarea
Frame	border	border	border	border
Label	border,padding,label	border,padding,label	border,padding,label	border,padding,label
LabelFrame	border	border	border	border
LabelFrame - Label	fill, text	fill, text	fill, text	fill, text
Menubutton	border, focus, Menubutton.indicator, padding, label	border, focus, Menubutton.indicator, padding, label	highlight, border, Menubutton.indicator, padding, label	border, focus, Menubutton.indicator, padding, label
Notebook	client	client	client	client
Notebook - Tab	tab, padding, focus, label	tab, padding, focus, label	tab, padding, label	tab, padding, focus, label
PanedWindow	background	background	background	background
PanedWindow - Sash	hsash	hsash, hgrip	hsash	hsash
Progressbar	trough, pbar	trough, pbar	trough, pbar	trough, pbar
Radiobutton	padding, indicator, focus, label	padding, indicator, focus, label	highlight, border, padding, indicator, label	padding, indicator, focus, label
Scale	trough, slider	trough, slider	trough, slider	trough, slider
Scrollbar	trough, leftarrow, rightarrow, thumb	trough, leftarrow, rightarrow, thumb	trough, leftarrow, rightarrow, thumb	trough, leftarrow, rightarrow, thumb
Separator	separator	separator	separator	separator
Sizegrip	sizegrip	sizegrip	sizegrip	sizegrip
Spinbox	field, uparrow, downarrow, padding, textarea	field, uparrow, downarrow, padding, textarea	field, uparrow, downarrow, padding, textarea	field, uparrow, downarrow, padding, textarea
Treeview	field, padding, treearea	field, padding, treearea	field, padding, treearea	field, padding, treearea
Treeview - Heading	cell, border, padding, image, text	cell, border, padding, image, text	cell, border, padding,image, text	cell, border, padding,image, text

Note

Widgets with an auxiliary part will have two entries.