Ceci est une ancienne révision du document !
Back in FCM#181, I talked about Themes and Styles and how I was trying to create a style map for the ttk TNotebook. That was just back in May. Here it is, December, and my “work life” has been busy with writing my PAGE book, trying to do support for PAGE with Don Rozenberg, and trying to live with the medical issues that I’ve been “blessed” with.
I have gotten to the chapter in my book about the ttk widget set, and I wanted to try to explain the complicated concept of Themes and Styles.
It all starts with a style. Styles control the appearance of a widget. A Theme “packages” all the widget styles into a group. Hopefully all the styles work together so that all the widgets in the Theme have the same look and feel.
Since it all begins with a style for the widgets, we’ll look at a single class of widget to start. We’ll start with the ttk Button class. The style of this widget class is called “TButton”.
Now, each widget style is made up of one or more elements. A typical Button has four elements: • The border around the outside of the Button, • A focus element that changes color when the Button has input focus, • A padding element, and • A label element. This element contains the label text, image or both.
Every widget has a style that is controlled by the Theme. Now here is where it gets somewhat frustrating. Each Operating System has its own built-in themes, and some Operating Systems have more built-in themes than others. Since we are a Linux-based magazine, I’ll give them to you now, and then give you the ones for the other Operating Systems.
It’s fairly obvious that Linux got the short end of the stick when it comes to the sheer number of themes that come with the OS. You should also notice that the four themes that are “native” to Linux are also available on the other two Operating Systems. This makes it nice – if you are planning on running your application under the three OS systems, you should really stick with one of those four.
When you decide to start working on your own styles, and get ready to wrap them all up in a theme, you should base everything on one theme. For Linux users like us, the simplest theme to start with would be the default theme. Not only does every OS have the default theme built in, but each OS has a different “default” theme that, if you don’t set a specific theme, it will be used by “default”. A logical person would think that that would be default. And you are right, if you are talking about Linux. For Windows, the default theme is winnative, not default and for Mac OS X it is aqua. Talk about confusion!
Anyway, we’ll use the ttk Button – to see what our styles can do. Now, remember back a few paragraphs, we touched on the Elements. So for the ttk Button class, the style name is TButton. The elements are assembled into an “empty box”. For a Button under the default theme, they are assembled from the outside in using this order. Border, focus, padding, and, finally, label. Just like the diagram above.
Each of the elements has a “sticky” attribute that defines which of the sides of the “box” that it will stick to. If, for example, an element has the sticky attribute of ‘ew’, it would expand and stretch in order to reach the right and left sides of our imaginary box. Since there are no definitions for the north or south, it doesn’t have to stretch to the top and bottom of the box. Any of the four points may be defined, it is not necessary for all four to be defined.
Most of the ttk styles have a layout that organizes the different layers that make up the widget style. Some widget classes don’t have a layout. As long as the widget has a layout, you can use the following commands in the Python REPL to get information on the layout. (shown top right).
Now that is as clear as mud, isn’t it? When a widget class has a layout, it will be returned as a list of tuples which have the element name and a dictionary that describes that element. (I just added a bunch more mud, didn’t I?).
Think of it this way. The outermost element is the border. It has its sticky attribute which is, in this case, north, south, east and west (so the border will expand to all sides of the widget), and a border attribute that has a width of 1 pixel. It also has a child element. In this case, it's the focus element. It has a sticky attribute that also expands north, south, east and west. The focus element doesn’t have a border, but it does have a child, which is the padding element. That has only one attribute – as you might guess, it’s the sticky attribute, and again it’s north, south, east and west, and it ALSO has a child element – the label element. It has a sticky attribute as well and, yet again, it is ‘nsew’.
Now, it’s time for me to pull on my “Wellies” (Rubber Boots for those who aren’t Brits, either in family, or location, or heart), and stomp around a little bit more. Each of those elements can (but don’t have to) have options. I’m just going to dump out the options for each of the elements (below).
These are the easiest things that we can change to make our style look the way we want. Notice that I said the easiest things. There can also be images, but that is a discussion for another article. For now, we’ll go back to the element options.
Before we start changing things, let’s take a look at how the TButton looks on a “normal day” under the default Linux theme.
Very bland. It looks just like you’d imagine a button would look. Now, in order to set anything, we would use the general scheme of stylename.configure(option=value) to set things our way. So let’s set the options so we can have a “dark theme” TButton (top right).
Nothing fancy. First we set up a custom style for a specific TButton, then set (in this case) the foreground, background and font. Then, when we place the TButton, we can use the standard configure method to set the text, and the style to our Custom.TButton style. Not hard at all. Now let’s customize some TRadiobuttons and TCheckbuttons. Here they are in their “native” state.
You can customize the indicators so that they use your own customized graphics. At a minimum, you’ll need to have three images for each class. One for unselected, one for selected, and one for disabled.
Here is a quick reference image of all six of the indicators that I used to customize the TRadiobuttons and the TCheckbuttons. Remember, I never presented myself as an artist!
Now we need to code the element style and the element layouts.
First, let’s create image objects – keeping a global version – so that Python’s garbage collection doesn’t wipe our images out of existence. Here we are setting up the TRadiobuttons (bottom right).
I used the shared module scheme in order to keep from having to declare a tonne of global variables. The shared module is an empty file in the project folder – that all modules can read and write to. The file can be named anything, as long as it has the extension of “.py”, and that you import it into any other Python files that will use it. By using the shared module scheme, it is much easier. Now that we have all of the Radiobutton images set into image objects, we then can create the element that we will use (below).
Once you get used to the idea, it’s not that hard, but it is the first time. So we define a new element with element_create and give it a name ‘custom.RBindicator’. We declare the type of element, which is image, and then we define the image name for the unselected state. Then, we define the selected and disabled states, and assign the images to them.
Finally, we need to create the layout and replace the standard indicator element with our custom one (next page, top right).
That’s it for the TRadiobuttons. Follow the same steps for the TCheckbuttons, and when you are all done, and run the program, it should look something like this.
It’s pretty daunting the first time or two you do it, but it gets easier as you go along.
Every widget has different elements and options that you can and probably should look at setting. Once you have a template for the layouts, it starts to become much easier.
In wrapping up, I thought I’d leave you with a number of resources to help you out, if you become brave and try to create your own style sets. In a later article, I’ll show you how to create your own theme – once you’ve gotten the style sets for all the ttk widgets.
Given that there are so many options that so many don’t know about, I’m going to provide two generic links and a specific one. The first one is to the New Mexico Tech Tkinter 8.5 Manual. https://anzeljg.github.io/rin2/book2/2405/docs/tkinter/index.html
Next is a good starting place for the “official” ttk toolkit man page, direct from the tcl group’s “horses mouth”. It’s supposed to be that if it isn’t here, it can’t be done. https://www.tcl.tk/man/tcl/TkCmd/contents.html
Finally, I’m going to give you the link to the “official” ttk Button man page. To find out what all the options and settings (and what many of them mean), you can get it here. https://www.tcl.tk/man/tcl/TkCmd/ttk_button.html
(One word of warning. If you look back at the Button.label options, you will see one named ‘embossed’. I’ve NEVER been able to find out what this is supposed to do. It’s not in the documentation, and if you try to set it to something, it is merrily ignored. Go figure.)
I will leave you with a theme that is created in Python, not tcl. This is a port of the Plastik theme which is part of the ttkwidgets Python library, which, like most themes, is written in Tcl and is pretty difficult to port to Python unless you are familiar with both languages. You can get the Plastic-python file at https://android.googlesource.com/toolchain/python/+/243b47fbef58ab866ee77567f2f52affd8ec8d0f/Python-2.7.3/Demo/tkinter/ttk/plastik_theme.py
Since I mentioned the ttkwidgets package, you can get it from: https://github.com/TkinterEP/ttkthemes.
Follow the documentation on how to install it and how to get them into your own program projects. The docs are at https://ttkthemes.readthedocs.io/en/latest/ .
Until next time, as always; stay safe, healthy, positive and creative!