Improving the Look with Styles and Themes

While programs can be perfectly functional with plain text in shades of black, white, and gray, the subtle use of colors, fonts, and images can enhance the visual appeal and usability of even the most utilitarian applications. Your data entry application is no exception, and the current round of requests brought to you by your coworkers seems to require some retooling of the application's look and feel.

Specifically, you've been asked to address these points:

• Your manager has informed you that ABQ's corporate policy requires the company logo to be displayed on all in-house software. You've been provided with a corporate logo image to include in the application.
• The data entry staff have some readability issues with the form. They want more visual distinction between the sections of the form and more visibility for error messages.
• The data entry staff have also requested that you highlight records...

Working with images in Tkinter

To solve the corporate logo issue and spruce up our application with some icons, we're going to need to understand how to work with images in Tkinter. Tkinter provides access to image files through two classes: the PhotoImage class and the BitmapImage class. Let's see how these classes can help us add graphics to our application.

Tkinter PhotoImage

Many Tkinter widgets, including Label and Button, accept an image argument that allows us to display an image on the widget. This argument requires that we create and pass in a PhotoImage (or BitmapImage) object.

Making a PhotoImage object is fairly simple:

myimage = tk.PhotoImage(file='my_image.png')

PhotoImage is typically called with the keyword argument file, which is pointed to a file path. Alternatively, you can use the data argument to point to a bytes object containing image data. In either case, the resulting object can now be used wherever an image argument...

Styling Tkinter widgets

Tkinter has essentially two styling systems: the old Tkinter widgets system, and the newer Ttk system. Although we are using Ttk widgets wherever possible, there are still situations where regular Tkinter widgets are required, so it's good to know both systems. Let's take a look first at the older Tkinter system and apply some styling to the Tkinter widgets in our application.

Widget color properties

As you saw in Chapter 1, Introduction to Tkinter, basic Tkinter widgets allow you to change two color values: the foreground color, meaning mainly the color of text and borders, and the background color, meaning the rest of the widget. These can be set using the foreground and background arguments, or their aliases, fg and bg.

For example, we can set the colors of a label like so:

# tkinter_color_demo.py
import tkinter as tk
l = tk.Label(text='Hot Dog Stand!', fg='yellow', bg='red')

The values for the...

Working with fonts in Tkinter

Some of our data entry users have complained that the font of the application is just a little too small to read easily, but others dislike the idea of you increasing it because it makes the application too big for the screen. To accommodate all the users, we can add a configuration option that allows them to set a preferred font size and family.

Configuring Tkinter fonts

Any widget in Tkinter that displays text allows us to specify a font, typically through its font configuration property. For widgets that support tags, we can also specify font settings for each tag. We've been using the font argument as far back as Chapter 1, Introduction to Tkinter, but now it's time to take a deeper look into what Tkinter allows us to do with fonts.

There are three ways of specifying a widget's font in Tkinter: using a string, using a tuple, and using a Font object. Let's take a look at each one.

Configuring fonts with strings and...

Styling Ttk widgets

The final user requests we need to address involve the styles and colors of our Ttk widgets; users have asked for more visual distinction between the form sections, and more visibility for error messages.

After some thought and discussion, you decide to color-code the sections of the form as follows:

• The Record Information section will use khaki, suggesting the classic manila folders used for paper records
• The Environment Data section will use light blue, symbolic of water and air
• The Plant Data will have a light green background, symbolic of plants
• The Notes input is distinctive enough, so it will remain the same default gray

To improve the visibility of error messages, we'd like to make the background of the fields turn red when they have errors, and the error text itself display in a dark red color. To accomplish this, we're going to need to understand how to style Ttk widgets.

TTk styling breakdown

...

Summary

In this chapter, we overhauled the look and feel of our application for both aesthetic and usability improvements. You learned how to use images and icons in your application using PhotoImage and BitmapImage, and how to extend image format support using Pillow. You learned to assign fonts to widgets, and to change the settings for built-in fonts. You learned how to work with color and font settings for default Tkinter widgets and how to use tags to style individual Treeview items and Text widget contents. We explored the intricate world of Ttk styles and learned to create custom styles based on the built-in defaults. Finally, we applied our knowledge of styling to the ABQ Data Entry application to make it more aesthetically pleasing and user-friendly.

In the next chapter, we'll take steps to make sure our program runs effectively across major desktop platforms. You'll learn strategies to avoid cross-platform pitfalls in both general Python programming and Tkinter...