frames background

[orieantx25]

Is there any way you can make the frames bg to be transparent instead of the grey background

[avalon60]

Have you tried:

my_frame.configure(fg_color="transparent")?

?
The value "transparent" is recognised by CustomTkinter v5.

[truong-dm]

Will it work with image background?
I have tried and it showed the bg_color I set in JSON file

[raja2505]

not only Frames, Buttons, Radiobuttons,Checkboxes, Entries and TextBoxes leaves grey traces eventhough placing the image as label.

[Akascape]

@orieantx25 @raja2505 @truong-dm
Only this method will work with background images:

import customtkinter
from PIL import Image

class CTkTopFrame(customtkinter.CTkToplevel):
        
    def __init__(
        self,
        master,
        padx: int = 10,
        x_offset: int = None,
        y_offset: int = None):
        
        super().__init__()
        
        self.after(10)
        self.master = master
        
        self.master.minsize(200,100)
        self.after(100, lambda: self.overrideredirect(True))
                
        self.transparent_color = self._apply_appearance_mode(self._fg_color) 
        self.attributes("-transparentcolor", self.transparent_color)
        self.resizable(True, True)
        self.transient(self.master)

        self.config(background=self.transparent_color)
        self.x_offset = 15 if x_offset is None else x_offset
        self.y_offset = 35 if y_offset is None else y_offset
        
        self.master.bind("<Configure>", lambda _: self.change_dimension())
        self.master.bind("<Map>", lambda e: self.withdraw)
    
    def change_dimension(self):
        width = self.master.winfo_width()-self.x_offset
        if width<0:
            self.withdraw()
            return
        if self.master.state()=="iconic":
            self.withdraw()
            return
        height = self.master.winfo_height()
        x = self.master.winfo_x()+self.x_offset
        y = self.master.winfo_y()+self.y_offset
        if self.master.state()=="zoomed":
            y += 4
            x -= 7
        self.geometry(f"{width}x{height}+{x}+{y}")
        self.deiconify()


root = customtkinter.CTk()
customtkinter.set_widget_scaling(1.2)
image_label = customtkinter.CTkLabel(root, text="", image=customtkinter.CTkImage(Image.open("image.png"), size=(500,500)))
image_label.pack(expand=True, fill="both")
top_window = CTkTopFrame(root)

# widgets
customtkinter.CTkButton(top_window).pack(pady=5)
customtkinter.CTkSlider(top_window).pack(pady=5)
customtkinter.CTkButton(top_window, corner_radius=20).pack(pady=5)
customtkinter.CTkSwitch(top_window, text_color="black", font=("calibri",20)).pack(pady=5)
customtkinter.CTkLabel(top_window, text_color="black", font=("calibri",20)).pack(pady=5)
customtkinter.CTkCheckBox(top_window).pack(pady=5)
customtkinter.CTkOptionMenu(top_window).pack(pady=5)
customtkinter.CTkEntry(top_window).pack(pady=5)
customtkinter.CTkRadioButton(top_window).pack(pady=5)

root.mainloop()

[raja2505]

@orieantx25 @Akascape

WOW!

is there any way to remove the button background as well?

[Akascape]

@orieantx25 Yes, just pass fg_color=transparent in button parameter.

[Akascape]

@orieantx25 @raja2505 I found a better and easy solution, check this: #2214