2

* 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

stovfl
  • 14,998
  • 7
  • 24
  • 51
SouthernYankee65
  • 1,129
  • 10
  • 22
  • Something weird I noticed is if I change the 'justify=' to 'anchor=' in the window1 styling the text then becomes centered on the buttons, except the fourth button. Changing the 'justify=' to 'anchor=' on the other two windows does not change anything at all. – SouthernYankee65 Oct 11 '19 at 15:28

3 Answers3

2

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

window2 = tk.Toplevel()
ipaleka
  • 3,745
  • 2
  • 13
  • 33
  • This doesn't make a difference other than make two windows with the "black" theme. There still isn't any styling, other than colors. – SouthernYankee65 Oct 11 '19 at 14:45
  • Okay, I went back and broke them apart into two separate files. I will update my example code above. The stylings still aren't working the way I want them to. – SouthernYankee65 Oct 11 '19 at 15:03
1

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

Community
  • 1
  • 1
FabienAndre
  • 4,514
  • 25
  • 38
  • Yep, once I changed 'justify=' to 'anchor=' and added in the E,W,CENTER from tkinter it worked on the themedtk buttons (Window 1). Now I need to figure out why it doesn't work on the non-themedtk buttons. But, this fixes my basic problem. Thank you! – SouthernYankee65 Oct 11 '19 at 15:40
  • 1
    The first sentence of my answer might give you an hint. – FabienAndre Oct 11 '19 at 15:46
  • Yep, I got that after I commented. Thanks! Now I'm off to see how to style a button based upon its state (normal, disabled, active, clicked/pressed) when it is an image. :) – SouthernYankee65 Oct 11 '19 at 17:24
0

In the windows2, where you have not used ThemedTk() you can use ttkStyle.theme_use('alt') to display the results.

It looks something like this,

ttkStyle = ttk.Style()   
ttkStyle.theme_use('alt')

Reference: https://anzeljg.github.io/rin2/book2/2405/docs/tkinter/ttk-theme-layer.html

Axisnix
  • 2,822
  • 5
  • 19
  • 41
Ketan Khanolkar
  • 1