{"id":2045,"date":"2021-01-04T03:32:03","date_gmt":"2021-01-04T03:32:03","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=2045"},"modified":"2021-01-05T01:19:52","modified_gmt":"2021-01-05T01:19:52","slug":"ttk-style","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/tkinter\/ttk-style\/","title":{"rendered":"Ttk Styles"},"content":{"rendered":"\n<p><strong>Summary<\/strong>: in this tutorial, you&#8217;ll learn about the ttk styles, how to use and customize the widget&#8217;s styles, and how to change the appearance of a widget by extending the built-in styles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id='introduction-to-the-ttk-styles'>Introduction to the ttk styles <a href=\"#introduction-to-the-ttk-styles\" class=\"anchor\" id=\"introduction-to-the-ttk-styles\" title=\"Anchor for Introduction to the ttk styles\">#<\/a><\/h2>\n\n\n\n<p>A <a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-theme\/\">theme<\/a> of a collection of styles that determine the appearances of <a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-ttk\/\">ttk widgets<\/a>.<\/p>\n\n\n\n<p>A style is a description of the appearance of a widget class. Typically, a theme comes with a predefined set of styles.<\/p>\n\n\n\n<p>Therefore, to change the appearance of ttk widgets, you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Modify the built-in styles<\/li><li>Create new styles<\/li><\/ul>\n\n\n\n<p>Generally, the style name of a ttk widget starts with the letter <code>'T'<\/code> followed by the widget name, for example, <code>TLabel<\/code> and <code>TButton<\/code>.<\/p>\n\n\n\n<p>In Tkinter, every widget has a default widget class. A widget class defines the default style for a widget.<\/p>\n\n\n\n<p>The following table shows the style names of the common ttk widget classes:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Widget class<\/th><th>Style name<\/th><\/tr><\/thead><tbody><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-button\/\">Button<\/a><\/code><\/td><td><code>TButton<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-checkbox\/\">Checkbutton<\/a><\/code><\/td><td><code>TCheckbutton<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-combobox\/\">Combobox<\/a><\/code><\/td><td><code>TCombobox<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-entry\/\">Entry<\/a><\/code><\/td><td><code>TEntry<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-frame\/\">Frame<\/a><\/code><\/td><td><code>TFrame<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-label\/\">Label<\/a><\/code><\/td><td><code>TLabel<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-labelframe\/\">LabelFrame<\/a><\/code><\/td><td><code>TLabelFrame<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-menubutton\/\">Menubutton<\/a><\/code><\/td><td><code>TMenubutton<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-notebook\/\">Notebook<\/a><\/code><\/td><td><code>TNotebook<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-panedwindow\/\">PanedWindow<\/a><\/code><\/td><td><code>TPanedwindow<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-progressbar\/\">Progressbar<\/a><\/code>*<\/td><td><code>Horizontal.TProgressbar<\/code>&nbsp;or&nbsp;<code>Vertical.TProgressbar<\/code>, depending on the&nbsp;<code>orient<\/code>&nbsp;option.<\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-radio-button\/\">Radiobutton<\/a><\/code><\/td><td><code>TRadiobutton<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-slider\/\">Scale<\/a><\/code>*<\/td><td><code>Horizontal.TScale<\/code>&nbsp;or&nbsp;<code>Vertical.TScale<\/code>, depending on the&nbsp;<code>orient<\/code>&nbsp;option.<\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-scrollbar\/\">Scrollbar<\/a><\/code>*<\/td><td><code>Horizontal.TScrollbar<\/code>&nbsp;or&nbsp;<code>Vertical.TScrollbar<\/code>, depending on the&nbsp;<code>orient<\/code>&nbsp;option<\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-separator\/\">Separator<\/a><\/code><\/td><td><code>TSeparator<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-sizegrip\/\">Sizegrip<\/a><\/code><\/td><td><code>TSizegrip<\/code><\/td><\/tr><tr><td><code><a href=\"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-treeview\/\">Treeview<\/a><\/code>*<\/td><td><code>Treeview<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>(*) The style names of the <code>Progressbar<\/code> , <code>Scale<\/code>, <code>Scrollbar<\/code>, and <code>Treeview<\/code> widgets don&#8217;t start with the letter <code>T<\/code>.<\/p>\n\n\n\n<p>At runtime, you can get the widget class of a widget by calling the <code>winfo_class()<\/code> method of the widget instance.<\/p>\n\n\n\n<p>The following example uses the <code>winfo_class()<\/code> method to get the widget class of a button widget:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">button = ttk.Button(root, text=<span class=\"hljs-string\">'Click Me'<\/span>)\nprint(button.winfo_class())<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Output:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">TButton<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id='modifying-built-in-ttk-styles'>Modifying built-in ttk styles <a href=\"#modifying-built-in-ttk-styles\" class=\"anchor\" id=\"modifying-built-in-ttk-styles\" title=\"Anchor for Modifying built-in ttk styles\">#<\/a><\/h2>\n\n\n\n<p>Every style has a set of options that define the widget&#8217;s appearance.<\/p>\n\n\n\n<p>To modify the appearance of a style, you use the <code>configure()<\/code> method of the <code>Style<\/code> class:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">style = ttk.Style(root)\nstyle.configure(style_name, **options)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The following program shows how to change the font of all the <code>Label<\/code> and <code>Button<\/code> widgets by modifying the <code>TLabel<\/code> and <code>TButton<\/code>&#8216;s styles:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\"><span class=\"hljs-keyword\">import<\/span> tkinter <span class=\"hljs-keyword\">as<\/span> tk\n<span class=\"hljs-keyword\">from<\/span> tkinter <span class=\"hljs-keyword\">import<\/span> ttk\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">App<\/span><span class=\"hljs-params\">(tk.Tk)<\/span>:<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span><span class=\"hljs-params\">(self)<\/span>:<\/span>\n        super().__init__()\n\n        self.geometry(<span class=\"hljs-string\">'300x110'<\/span>)\n        self.resizable(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>)\n        self.title(<span class=\"hljs-string\">'Login'<\/span>)\n\n        <span class=\"hljs-comment\"># UI options<\/span>\n        paddings = {<span class=\"hljs-string\">'padx'<\/span>: <span class=\"hljs-number\">5<\/span>, <span class=\"hljs-string\">'pady'<\/span>: <span class=\"hljs-number\">5<\/span>}\n        entry_font = {<span class=\"hljs-string\">'font'<\/span>: (<span class=\"hljs-string\">'Helvetica'<\/span>, <span class=\"hljs-number\">11<\/span>)}\n\n        <span class=\"hljs-comment\"># configure the grid<\/span>\n        self.columnconfigure(<span class=\"hljs-number\">0<\/span>, weight=<span class=\"hljs-number\">1<\/span>)\n        self.columnconfigure(<span class=\"hljs-number\">1<\/span>, weight=<span class=\"hljs-number\">3<\/span>)\n\n        username = tk.StringVar()\n        password = tk.StringVar()\n\n        <span class=\"hljs-comment\"># username<\/span>\n        username_label = ttk.Label(self, text=<span class=\"hljs-string\">\"Username:\"<\/span>)\n        username_label.grid(column=<span class=\"hljs-number\">0<\/span>, row=<span class=\"hljs-number\">0<\/span>, sticky=tk.W, **paddings)\n\n        username_entry = ttk.Entry(self, textvariable=username, **entry_font)\n        username_entry.grid(column=<span class=\"hljs-number\">1<\/span>, row=<span class=\"hljs-number\">0<\/span>, sticky=tk.E, **paddings)\n\n        <span class=\"hljs-comment\"># password<\/span>\n        password_label = ttk.Label(self, text=<span class=\"hljs-string\">\"Password:\"<\/span>)\n        password_label.grid(column=<span class=\"hljs-number\">0<\/span>, row=<span class=\"hljs-number\">1<\/span>, sticky=tk.W, **paddings)\n\n        password_entry = ttk.Entry(\n            self, textvariable=password, show=<span class=\"hljs-string\">\"*\"<\/span>, **entry_font)\n        password_entry.grid(column=<span class=\"hljs-number\">1<\/span>, row=<span class=\"hljs-number\">1<\/span>, sticky=tk.E, **paddings)\n\n        <span class=\"hljs-comment\"># login button<\/span>\n        login_button = ttk.Button(self, text=<span class=\"hljs-string\">\"Login\"<\/span>)\n        login_button.grid(column=<span class=\"hljs-number\">1<\/span>, row=<span class=\"hljs-number\">3<\/span>, sticky=tk.E, **paddings)\n\n        <span class=\"hljs-comment\"># configure style<\/span>\n        self.style = ttk.Style(self)\n        self.style.configure(<span class=\"hljs-string\">'TLabel'<\/span>, font=(<span class=\"hljs-string\">'Helvetica'<\/span>, <span class=\"hljs-number\">11<\/span>))\n        self.style.configure(<span class=\"hljs-string\">'TButton'<\/span>, font=(<span class=\"hljs-string\">'Helvetica'<\/span>, <span class=\"hljs-number\">11<\/span>))\n\n\n<span class=\"hljs-keyword\">if<\/span> __name__ == <span class=\"hljs-string\">\"__main__\"<\/span>:\n    app = App()\n    app.mainloop()<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Output:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"142\" src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2021\/01\/ttk-style-modifying-builtin-style.png\" alt=\"\" class=\"wp-image-2049\" srcset=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2021\/01\/ttk-style-modifying-builtin-style.png 302w, https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2021\/01\/ttk-style-modifying-builtin-style-300x141.png 300w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/figure><\/div>\n\n\n\n<p>How it works.<\/p>\n\n\n\n<p>First, create a new instance of the ttk.Style class:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">self.style = ttk.Style(self)\r<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Second, change the font of the <code>TLabel<\/code> and <code>TButton<\/code>&#8216;s styles using the <code>configure()<\/code> method of the <code>Style<\/code> object:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">self.style.configure(<span class=\"hljs-string\">'TLabel'<\/span>, font=(<span class=\"hljs-string\">'Helvetica'<\/span>, <span class=\"hljs-number\">12<\/span>))\nself.style.configure(<span class=\"hljs-string\">'TButton'<\/span>, font=(<span class=\"hljs-string\">'Helvetica'<\/span>, <span class=\"hljs-number\">12<\/span>))<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id='extending-built-in-ttk-styles'>Extending built-in ttk styles <a href=\"#extending-built-in-ttk-styles\" class=\"anchor\" id=\"extending-built-in-ttk-styles\" title=\"Anchor for Extending built-in ttk styles\">#<\/a><\/h2>\n\n\n\n<p>To create a new style that is derived from a built-in style, you use the style name like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">new_style.builtin_style<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>For example, to create a new style of the <code>Label<\/code> widget used for displaying a heading, you can name it as follows:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">Heading.TLabel<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The <code>Heading.TLabel<\/code> style inherits all options from the built-in <code>TLabel<\/code> style.<\/p>\n\n\n\n<p>To override a specific option, you also use the <code>configure()<\/code> method of the <code>Style<\/code> class:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">style = ttk.Style(self)\nstyle.configure(custom_style, **options)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The following example adds a heading to the login window. The heading has the style derived from the <code>TLabel<\/code> style:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\"><span class=\"hljs-keyword\">import<\/span> tkinter <span class=\"hljs-keyword\">as<\/span> tk\n<span class=\"hljs-keyword\">from<\/span> tkinter <span class=\"hljs-keyword\">import<\/span> ttk\n\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">App<\/span><span class=\"hljs-params\">(tk.Tk)<\/span>:<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title\">__init__<\/span><span class=\"hljs-params\">(self)<\/span>:<\/span>\n        super().__init__()\n\n        self.geometry(<span class=\"hljs-string\">'300x150'<\/span>)\n        self.resizable(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>)\n        self.title(<span class=\"hljs-string\">'Login'<\/span>)\n\n        <span class=\"hljs-comment\"># UI options<\/span>\n        paddings = {<span class=\"hljs-string\">'padx'<\/span>: <span class=\"hljs-number\">5<\/span>, <span class=\"hljs-string\">'pady'<\/span>: <span class=\"hljs-number\">5<\/span>}\n        entry_font = {<span class=\"hljs-string\">'font'<\/span>: (<span class=\"hljs-string\">'Helvetica'<\/span>, <span class=\"hljs-number\">11<\/span>)}\n\n        <span class=\"hljs-comment\"># configure the grid<\/span>\n        self.columnconfigure(<span class=\"hljs-number\">0<\/span>, weight=<span class=\"hljs-number\">1<\/span>)\n        self.columnconfigure(<span class=\"hljs-number\">1<\/span>, weight=<span class=\"hljs-number\">3<\/span>)\n\n        username = tk.StringVar()\n        password = tk.StringVar()\n\n        <span class=\"hljs-comment\"># heading<\/span>\n        heading = ttk.Label(self, text=<span class=\"hljs-string\">'Member Login'<\/span>, style=<span class=\"hljs-string\">'Heading.TLabel'<\/span>)\n        heading.grid(column=<span class=\"hljs-number\">0<\/span>, row=<span class=\"hljs-number\">0<\/span>, columnspan=<span class=\"hljs-number\">2<\/span>, pady=<span class=\"hljs-number\">5<\/span>, sticky=tk.N)\n\n        <span class=\"hljs-comment\"># username<\/span>\n        username_label = ttk.Label(self, text=<span class=\"hljs-string\">\"Username:\"<\/span>)\n        username_label.grid(column=<span class=\"hljs-number\">0<\/span>, row=<span class=\"hljs-number\">1<\/span>, sticky=tk.W, **paddings)\n\n        username_entry = ttk.Entry(self, textvariable=username, **entry_font)\n        username_entry.grid(column=<span class=\"hljs-number\">1<\/span>, row=<span class=\"hljs-number\">1<\/span>, sticky=tk.E, **paddings)\n\n        <span class=\"hljs-comment\"># password<\/span>\n        password_label = ttk.Label(self, text=<span class=\"hljs-string\">\"Password:\"<\/span>)\n        password_label.grid(column=<span class=\"hljs-number\">0<\/span>, row=<span class=\"hljs-number\">2<\/span>, sticky=tk.W, **paddings)\n\n        password_entry = ttk.Entry(\n            self, textvariable=password, show=<span class=\"hljs-string\">\"*\"<\/span>, **entry_font)\n        password_entry.grid(column=<span class=\"hljs-number\">1<\/span>, row=<span class=\"hljs-number\">2<\/span>, sticky=tk.E, **paddings)\n\n        <span class=\"hljs-comment\"># login button<\/span>\n        login_button = ttk.Button(self, text=<span class=\"hljs-string\">\"Login\"<\/span>)\n        login_button.grid(column=<span class=\"hljs-number\">1<\/span>, row=<span class=\"hljs-number\">3<\/span>, sticky=tk.E, **paddings)\n\n        <span class=\"hljs-comment\"># configure style<\/span>\n        self.style = ttk.Style(self)\n        self.style.configure(<span class=\"hljs-string\">'TLabel'<\/span>, font=(<span class=\"hljs-string\">'Helvetica'<\/span>, <span class=\"hljs-number\">11<\/span>))\n        self.style.configure(<span class=\"hljs-string\">'TButton'<\/span>, font=(<span class=\"hljs-string\">'Helvetica'<\/span>, <span class=\"hljs-number\">11<\/span>))\n\n        <span class=\"hljs-comment\"># heading style<\/span>\n        self.style.configure(<span class=\"hljs-string\">'Heading.TLabel'<\/span>, font=(<span class=\"hljs-string\">'Helvetica'<\/span>, <span class=\"hljs-number\">12<\/span>))\n\n\n<span class=\"hljs-keyword\">if<\/span> __name__ == <span class=\"hljs-string\">\"__main__\"<\/span>:\n    app = App()\n    app.mainloop()<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Output:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"182\" src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2021\/01\/ttk-style-extending-style.png\" alt=\"\" class=\"wp-image-2051\" srcset=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2021\/01\/ttk-style-extending-style.png 302w, https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2021\/01\/ttk-style-extending-style-300x181.png 300w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/figure><\/div>\n\n\n\n<p>How it works.<\/p>\n\n\n\n<p>First, add a heading to the window and assign the style <code>Heading.TLabel<\/code> to the <code>style<\/code> option of the <code>Label<\/code> widget:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">heading = ttk.Label(self, text=<span class=\"hljs-string\">'Member Login'<\/span>, style=<span class=\"hljs-string\">'Heading.TLabel'<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then, change the font of the <code>Heading.TLabel<\/code> style to Helvetica, 12 pixels:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">self.style.configure(<span class=\"hljs-string\">'Heading.TLabel'<\/span>, font=(<span class=\"hljs-string\">'Helvetica'<\/span>, <span class=\"hljs-number\">12<\/span>))<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id='hierarchies-of-styles'>Hierarchies of styles <a href=\"#hierarchies-of-styles\" class=\"anchor\" id=\"hierarchies-of-styles\" title=\"Anchor for Hierarchies of styles\">#<\/a><\/h2>\n\n\n\n<p>It&#8217;s possible to create your own entire hierarchies of styles. For example, you can have a <code>Message.TLabel<\/code> style that inherits from the built-in <code>TLabel<\/code> style.<\/p>\n\n\n\n<p>And then you can create styles that inherit from the <code>Message.TLabel<\/code> style like <code>Error.Message.TLabel<\/code>, <code>Warning.Message.TLabel<\/code>, and <code>Information.Message.TLabel<\/code>.<\/p>\n\n\n\n<p>When you use a particular style e.g., <code>Error.Message.TLabel<\/code>, <code>ttk<\/code> looks for options in the <code>Error.Message.TLabel<\/code> style first. If it doesn&#8217;t find the options, it&#8217;ll search in the <code>Message.TLabel<\/code> style. And it continues searching for the options in the <code>TLabel<\/code> style.<\/p>\n\n\n\n<p>The following picture illustrates the example of the style hierarchy:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"359\" src=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2021\/01\/ttk-style-extending-builtin-style.png\" alt=\"\" class=\"wp-image-2046\" srcset=\"https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2021\/01\/ttk-style-extending-builtin-style.png 483w, https:\/\/www.pythontutorial.net\/wp-content\/uploads\/2021\/01\/ttk-style-extending-builtin-style-300x223.png 300w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><\/figure><\/div>\n\n\n\n<p>The <em>root<\/em> style determines the appearance of all widgets. The name of the <em>root<\/em> style is <code>'.'<\/code>.<\/p>\n\n\n\n<p>For example, if you want to change the text to a 12-pixel Helvetica font for all widgets, you can configure it as follows:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"Python\" data-shcb-language-slug=\"python\"><span><code class=\"hljs language-python\">style = ttk.Style(root)\nstyle.configure(<span class=\"hljs-string\">'.'<\/span>, font=(<span class=\"hljs-string\">'Helvetica'<\/span>, <span class=\"hljs-number\">12<\/span>))<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Python<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">python<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id='summary'>Summary <a href=\"#summary\" class=\"anchor\" id=\"summary\" title=\"Anchor for Summary\">#<\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>A theme of a collection of styles. A style is a description of the appearance of a widget.<\/li><li>Use the <code style=\"background-color: rgb(255, 255, 255); font-size: 16px;\">widget.winfo_class()<\/code> method to get the widget class of a widget. The widget class defines the default style for the widget.<\/li><li>Use the <code>style.configure()<\/code> method to modify the style of the widget.<\/li><li>To customize the built-in style, you can extend it using the style name <code>new_style.builtin_style<\/code>.<\/li><\/ul>\n<div class=\"helpful-block-content\" data-title=\"\">\n\t<header>\n\t\t<div class=\"wth-question\">Was this tutorial helpful ?<\/div>\n\t\t<div class=\"wth-thumbs\">\n\t\t\t<button\n\t\t\t\tdata-post=\"2045\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/tkinter\/ttk-style\/\"\n\t\t\t\tdata-post-title=\"Ttk Styles\"\n\t\t\t\tdata-response=\"1\"\n\t\t\t\tclass=\"wth-btn-rounded wth-yes-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\tclass=\"feather feather-thumbs-up block w-full h-full\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t<button\n\t\t\t\tdata-response=\"0\"\n\t\t\t\tdata-post=\"2045\"\n\t\t\t\tdata-post-url=\"https:\/\/www.pythontutorial.net\/tkinter\/ttk-style\/\"\n\t\t\t\tdata-post-title=\"Ttk Styles\"\n\t\t\t\tclass=\"wth-btn-rounded wth-no-btn\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17\"\n\t\t\t\t\t><\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t<span class=\"sr-only\"> No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t<div class=\"wth-form hidden\">\n\t\t<div class=\"wth-form-wrapper\">\n\t\t\t<div class=\"wth-title\"><\/div>\n\t\t\t<textarea class=\"wth-message\"><\/textarea>\n\t\t\t<input type=\"button\" name=\"wth-submit\" class=\"wth-btn wth-btn-submit\" id=\"wth-submit\" \/>\n\t\t\t<input type=\"button\" class=\"wth-btn wth-btn-cancel\" value=\"Cancel\" \/>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you&#8217;ll learn about the ttk style, how to use and customize the style of a widget, and how to change the appearance of a widget by extending the built-in style.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1232,"menu_order":46,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2045","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/2045","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/comments?post=2045"}],"version-history":[{"count":0,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/2045\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/pages\/1232"}],"wp:attachment":[{"href":"https:\/\/www.pythontutorial.net\/wp-json\/wp\/v2\/media?parent=2045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}