Adjusting the text position inside customtkinter.CTkLabel with an image

Question

I have recently tried customtkinter to create a UI for my Python script. Things have been going pretty well other than being unable to slightly lower the text position inside the customtkinter.CTkLabel. Attached are the partial code and the picture of the UI output.

self.value_box_image = ctk.CTkImage(Image.open("temperature_box.png"), size=(280, 142))

self.temperature_label = ctk.CTkLabel(self.data_frame, text="90", font=ctk.CTkFont(size=60, weight="bold"), corner_radius = 50, text_color = "black",
                                      image=self.value_box_image)
self.temperature_label.grid(row=1, column=0, pady=(20, 10), sticky = "e")

And here is the picture

I think the temperature_label.grid(...) only changes the position of the entire label itself and not just the text inside the labe. Other than that, Temperature (*F) is part of my picture, and as you can see the value 90 is just ever so slightly off because the CTkLabel always want to put the text in the center of the image. I have tried justify = "s" and anchor = "s", nothing works. If anyone have a solution for this problem can you please share it with me. Thanks everyone.

Answer 1

There is no option of CTkLabel to put the text at the position you want.

However you can create an image with the upper part of the original image:

Then you can use that image and set compound="top" to put that image above the text. Note that you need to set the border and relief option of the label as well in order to get the same outline effect. However customtkinter does not allow you to set these two options in CTkLabel, so you need to set those options using the internal label widget instead:

# image with the upper part of the original image
img = Image.open("temperature_banner.png")
self.value_box_image = ctk.CTkImage(img, size=(img.width, img.height))
self.temperature_label = ctk.CTkLabel(self.data_frame, text="90", bg_color="white",
                                              font=ctk.CTkFont(size=60, weight="bold"),
                                              corner_radius=50, text_color="black",
                                              image=self.value_box_image)
# configure the border width, relief and compound option via the internal label widget
self.temperature_label._label.config(bd=3, relief="solid", compound="top")
self.temperature_label.grid(row=1, column=0, pady=(20, 10), sticky = "e")

And the result: