< Prev  |  Home  |  Next >

Making Widgets Look Nice

A lot of the time, you’ll want your windows and their widgets to have the normal look and feel of your operating system, which Tkinter does for you. For example, my GUIs were developed on a PC running Windows 7.

Login GUI

But if you run these examples on, say, Windows 8, they automatically change to look like a Windows 8 program:

Login GUI in Windows 8

The window will also look different to both of these examples on a Mac, or a PC running Linux. Most of the time, you’ll want to leave the look of your GUI to look like other programs, but sometimes you’ll want to customise the look of your program. There’s lots you can do to alter how your GUI looks, and we’ll be discussing a few of these things in this section.

Firstly, you already know that you can create a custom icon for your window, but we can also alter the colour of the window itself. I’m going to create customise the login form we created in the previous section to match the look and feel of this website. Adding the line:

will configure the window background to be the colour with hex code ‘#a1dbcd’. You don’t have to use hex colour codes though, you can just type in the name of any valid Tkinter colour (for example “firebrickred2″ or “cornsilk”). Adding a custom icon I created, along with the line above to change the window colour, we get the following:

Changing the window colour

That’s looking a little better, but now it’s obvious that the label widgets have a different colour background to the main window. Let’s add another argument to the labels that we create, by changing them to the following:

As you can see, this just changes the background of the label ‘lblUsername’ to be the same as the main widow background. Do the same to the “Password:” label, and you now get a much nicer looking form:

Changing the label background colour

When you create widgets, you can also use “fg=…” to set the foreground (text colour) of a widget. So adding in lines like:

Creates a button widget that now has teal-coloured text on an off-black button. Finally, I’d like to add an image to my login form, with the website logo. This can be achieved, strangely, with another label, but this time contining a GIF image:

You can only add GIF or PGM/PPM images, unless you import and use the Python Imaging Library. Here’s my finished login form (notice that I’ve also added another label at the top of the form):

Improved login form

And here’s the code:

Challenge

Improve the look of your login form, by using your own colour scheme (or that of your school).

< Prev  |  Home  |  Next >