I want to style a menubar and I want to remove the menubutton-arrows. I know, I could color them in the same color as the background, but then I also have to do that for any other state (hovering, etc.). It would be far easier to just disable it using style.configure...
For reference, this is the style I am currently using:
class Styles:
@staticmethod
def apply_theme():
style = ttk.Style()
style.theme_use('clam')
@staticmethod
def style_menubar(style: ttk.Style):
background_color = "#130E0B"
style.configure("Menubar.TFrame",
background=background_color)
style.configure("Menu.TMenubutton",
arrowcolor=background_color,
background=background_color,
foreground="#EDEDED",
activebackground="#5C5C5C",
relief='flat')
and the menubar class:
class Menubar(ttk.Frame):
def __init__(self, parent):
super().__init__(parent)
Styles.style_menubar(ttk.Style())
self.configure(style="Menubar.TFrame")
self.create_menubar(parent)
def create_menubar(self, root):
# Create the File menubutton
file_menubutton = ttk.Menubutton(self, text="File", style="Menu.TMenubutton")
file_menu = Menu(file_menubutton, tearoff=0)
file_menu.add_command(label="New")
file_menu.add_command(label="Open")
file_menu.add_command(label="Save")
file_menu.add_separator()
file_menu.add_command(label="Exit", command=root.quit)
file_menubutton["menu"] = file_menu
file_menubutton.pack(side=tk.LEFT, fill=tk.NONE)
# Additional buttons...
How do I make the width of the menubuttons smaller? Currently, there is the text, then a large gap, then the menubutton. Using padding or spacing doesn't help. This would be necessary anyways, when simply recoloring the arrow.
I tried using ipadx, fill=tk.NONE; padding=(0,0), spacing3=0 and activeindicatoron = 0
Unfortunately, tkinter
does not provide a direct way to disable the arrows entirely through the style.configure
method.
So, the best method is to just do as you said.
def style_menubar(style: ttk.Style):
background_color = "#130E0B"
style.configure("Menubar.TFrame",
background=background_color)
style.configure("Menu.TMenubutton",
arrowcolor=background_color, # Same as background to "hide" it
background=background_color,
foreground="#EDEDED",
activebackground="#5C5C5C",
relief='flat',
compound="left") #Make it less noticeable
I am including this snippet just because.
Also, to reduce the width, you can use the anchor
method -
padding=(0, 0), # Remove internal padding
width=10, # Set fixed width
anchor="center") # Center text within the button
Add this to style.configure