Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why aren't these tkinter stylings working?

* To eliminate any confusion, I am using macOS Catalina, Python 3.7.4, and Tcl/Tk 8.6.9 *

I have a project that uses 'black' as a theme from ThemedTK in ttkthemes. I am trying to modify the styling for the buttons.

However, I have not been able to figure out how to modify the theme beyond the set_theme_advanced() method, which only changes the colors from what I am reading here. I want to change the button text to be centered within the theme. But, in the process of troubleshooting this, I see I am unable to modify the placement (justification) of the button text in either of the windows in my example code below.

If you look at this example code, you will see that in the first window, the text is left justified on the buttons, but correctly colored, but in the second window (using Tk), the text is justified center on all the buttons and not colored. Neither of the windows is responding to the justification styling and the Tk window appears to not be responding to any custom styling.

# test-ttk-button-style.py

import tkinter as tk
from tkinter import ttk, NSEW
from ttkthemes import themed_tk as tkt

window1 = tkt.ThemedTk()
window1.get_themes()
window1.set_theme("black")
window1.title("First Window")
window1.geometry("+20+70")

window2 = tk.Tk()
window2.title("Second Window")
window2.geometry("+400+70")

ttkStyle = ttk.Style()
ttkStyle.configure("left.TButton", justify="left", background="green", foreground="white", font="Helvetica 12 bold")
ttkStyle.configure("right.TButton", justify="right", background="blue", foreground="white", font="Helvetica 12 bold")
ttkStyle.configure("center.TButton", justify="center", background="red", foreground="white", font="Helvetica 12 bold")

w1content = ttk.Frame(window1, padding=(12,12,12,12))
w1content.grid(row=0, column=0, sticky=NSEW)
w1btn1 = tkt.ttk.Button(w1content, text="First Button in Window 1", style="left.TButton")
w1btn1.grid(row=0, column=0, padx=30, pady=30)
w1btn2 = tkt.ttk.Button(w1content, text="Second Button in Window 1", width=25, style="right.TButton")
w1btn2.grid(row=1, column=0, padx=30, pady=30)
w1btn3 = tkt.ttk.Button(w1content, text="Third Button in Window 1", width=25, style="center.TButton")
w1btn3.grid(row=2, column=0, padx=30, pady=30)
w1btn4 = tkt.ttk.Button(w1content, text="Fourth Button in Window 1", width=25)
w1btn4.grid(row=3, column=0, padx=30, pady=30)

w2content = ttk.Frame(window2, padding=(12,12,12,12))
w2content.grid(row=0, column=0, sticky=NSEW)
w2btn1 = tkt.ttk.Button(w2content, text="First Button in Window 2", style="left.TButton")
w2btn1.grid(row=0, column=0, padx=30, pady=30)
w2btn2 = tkt.ttk.Button(w2content, text="Second Button in Window 2", width=25, style="right.TButton")
w2btn2.grid(row=1, column=0, padx=30, pady=30)
w2btn3 = tkt.ttk.Button(w2content, text="Third Button in Window 2", width=25, style="center.TButton")
w2btn3.grid(row=2, column=0, padx=30, pady=30)
w2btn4 = tkt.ttk.Button(w2content, text="Fourth Button in Window 2", width=25)
w2btn4.grid(row=3, column=0, padx=30, pady=30)

window1.mainloop()

Thanks in advance for any help.

Here's is a pic of what I am seeing on my computer. Resulting windows

* * EDIT * * After reading the answer below, I broke the code down into two files so as to not have two main windows. This did change how Window2 behaved, but the styling is still not being applied. I then created a third window using just Tk and ttk, and still the style is not being applied.

Window 1 (with tkthemed and 'black' theme style set)

# test-ttk-button-style1.py

import tkinter as tk
from tkinter import ttk, NSEW
from ttkthemes import themed_tk as tkt

window1 = tkt.ThemedTk()
window1.get_themes()
window1.set_theme("black")
window1.title("First Window")
window1.geometry("+0+0")

ttkStyle = ttk.Style()
ttkStyle.configure("left.TButton", justify="left", background="green", foreground="white", font="Helvetica 12 bold")
ttkStyle.configure("right.TButton", justify="right", background="blue", foreground="white", font="Helvetica 20 bold")
ttkStyle.configure("center.TButton", justify="center", background="red", foreground="white", font="Helvetica 32 bold")

w1content = ttk.Frame(window1, padding=(12,12,12,12))
w1content.grid(row=0, column=0, sticky=NSEW)
w1btn1 = tkt.ttk.Button(w1content, text="First Button in Window 1", style="left.TButton")
w1btn1.grid(row=0, column=0, padx=30, pady=30)
w1btn2 = tkt.ttk.Button(w1content, text="Second Button in Window 1", width=25, style="right.TButton")
w1btn2.grid(row=1, column=0, padx=30, pady=30)
w1btn3 = tkt.ttk.Button(w1content, text="Third Button in Window 1", width=25, style="center.TButton")
w1btn3.grid(row=2, column=0, padx=30, pady=30)
w1btn4 = tkt.ttk.Button(w1content, text="Fourth Button in Window 1", width=25)
w1btn4.grid(row=3, column=0, padx=30, pady=30)

window1.mainloop()

This is the result on my computer: Window 1 result

Window 2 (tkthemed without a theme style set)

# test-ttk-button-style2.py

import tkinter as tk
from tkinter import ttk, NSEW
from ttkthemes import themed_tk as tkt

window2 = tk.Tk()
window2.title("Second Window")

ttkStyle = ttk.Style()
ttkStyle.configure("left.TButton", justify="left", background="green", foreground="white", font="Helvetica 12 bold")
ttkStyle.configure("right.TButton", justify="right", background="blue", foreground="white", font="Helvetica 20 bold")
ttkStyle.configure("center.TButton", justify="center", background="red", foreground="white", font="Helvetica 32 bold")

w2content = ttk.Frame(window2, padding=(12,12,12,12))
w2content.grid(row=0, column=0, sticky=NSEW)
w2btn1 = tkt.ttk.Button(w2content, text="First Button in Window 2", style="left.TButton")
w2btn1.grid(row=0, column=0, padx=30, pady=30)
w2btn2 = tkt.ttk.Button(w2content, text="Second Button in Window 2", width=25, style="right.TButton")
w2btn2.grid(row=1, column=0, padx=30, pady=30)
w2btn3 = tkt.ttk.Button(w2content, text="Third Button in Window 2", width=25, style="center.TButton")
w2btn3.grid(row=2, column=0, padx=30, pady=30)
w2btn4 = tkt.ttk.Button(w2content, text="Fourth Button in Window 2", width=25)
w2btn4.grid(row=3, column=0, padx=30, pady=30)

window2.mainloop()

The result on my computer: Window 2 result Window 3 (without any tkthemed)

#test-ttk-button-style3.py

import tkinter as tk
from tkinter import ttk, NSEW

window3 = tk.Tk()
window3.title("Third Window")

ttkStyle = ttk.Style()
ttkStyle.configure("left.TButton", justify="left", background="green", foreground="white", font="Helvetica 12 bold")
ttkStyle.configure("right.TButton", justify="right", background="blue", foreground="white", font="Helvetica 20 bold")
ttkStyle.configure("center.TButton", justify="center", background="red", foreground="white", font="Helvetica 32 bold")

w3content = ttk.Frame(window3, padding=(12,12,12,12))
w3content.grid(row=0, column=0, sticky=NSEW)
w3btn1 = ttk.Button(w3content, text="First Button in Window 3", style="left.TButton")
w3btn1.grid(row=0, column=0, padx=30, pady=30)
w3btn2 = ttk.Button(w3content, text="Second Button in Window 3", width=25, style="right.TButton")
w3btn2.grid(row=1, column=0, padx=30, pady=30)
w3btn3 = ttk.Button(w3content, text="Third Button in Window 3", width=25, style="center.TButton")
w3btn3.grid(row=2, column=0, padx=30, pady=30)
w3btn4 = ttk.Button(w3content, text="Fourth Button in Window 3", width=25)
w3btn4.grid(row=3, column=0, padx=30, pady=30)

window3.mainloop()

Result on my computer: Window 3 result

like image 223
SouthernYankee65 Avatar asked Nov 20 '25 02:11

SouthernYankee65


2 Answers

You've created two root windows (instances of tkinter.Tk), set the second window to be a Toplevel widget:

window2 = tk.Toplevel()
like image 104
ipaleka Avatar answered Nov 22 '25 15:11

ipaleka


The second window is using system widget and have restricted options due to Apple's Human Interface Guideline (text on button can not be aligned left or right).

Regarding ttk style widget, this is a subtility of tkinter, justify specify the behavior of multiple line labels, anchor is probably what you want to move one-line label to the side.

anchor= Controls where in the button the text (or image) should be located. Use one of N, NE, E, SE, S, SW, W, NW, or CENTER. Default is CENTER. (anchor/Anchor)

justify= Defines how to align multiple lines of text. Use LEFT, RIGHT, or CENTER. Default is CENTER. (justify/Justify)

Source: https://effbot.org/tkinterbook/button.htm

like image 40
FabienAndre Avatar answered Nov 22 '25 15:11

FabienAndre



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!