Search code examples
pythonpython-3.xtkinterpython-3.8guizero

How to style and customize tkinter/guizero menu bar?


I am working with Tkinter and guizero and am trying to style the menu bar.I am using Python 3.8.2

Things I am trying to change

  1. Remove the border/3D effect on the menu bar and options.

  2. Remove the menu bar top padding(the little space above and on the left side).

  3. Active select color for both toplevel/menu bar and options.

from guizero import App, MenuBar

def file_function():
    print("File option")

def about_function():
    print("about option")

app = App(title="My app", height=300, width=500,bg='white')
menubar = MenuBar(app,
                    toplevel=["File", "About"],
                    options=[
                        [ ["New", file_function], ["Save", file_function]],
                        [ ["Report Bug", about_function], ["About", about_function] ]
                    ])

menubar.bg=(111, 77, 124)

# none of the styling below works and this is what I've tried
menubar.border=0
menubar.toplevel.border=False
menubar.options.border=0
menubar.toplevel.options.bg='gray'
menubar.toplevel.focus.bg='yellow'
menubar.toplevel.focus.fg='yellow'
menubar.toplevel.options.border=False
app.display()

Image:

enter image description here

Update

The menu is not meant to currently look good the strange colors are to see what does and doesn't works. I am able to use guizero widget and all of their functionality.

Current Problems

  1. Unable to remove 3d/possible padding effect on menu and sub menu when item is selected

I have tried setting border to 0 and highlightthickness to 0

Updated code

from guizero import *
from tkinter import *

app=App(title='Test',bg=(53, 60, 81))
root = app.tk

def hello():
    print ("hello!")


#creates menubar
menubar = Menu(root,relief=FLAT,bd=0)




# Sets menubar background color and active select but does not remove 3d  effect/padding
menubar.config(bg = "GREEN",fg='white',activebackground='red',activeforeground='pink',relief=FLAT)


# First item on menubar and creates sub options
filemenu = Menu(menubar, tearoff=0,relief=FLAT, font=("Verdana", 12),activebackground='red')
filemenu.config(bg = "GREEN") 
filemenu.add_command(label="New (Ctrl + N)", command=hello)
filemenu.add_command(label="Save(Ctrl + S)", command=hello)
filemenu.add_separator()
filemenu.add_command(label="Exit", command=root.quit)
menubar.add_cascade(label="File", menu=filemenu)



# Adds to menubar and creates sub options
editmenu = Menu(menubar, tearoff=0)
editmenu.add_command(label="Cut", command=hello)
editmenu.add_command(label="Copy", command=hello)
editmenu.add_command(label="Paste", command=hello)
menubar.add_cascade(label="Edit", menu=editmenu)

helpmenu = Menu(menubar, tearoff=0,bg='green',fg='blue')

helpmenu.add_command(label="Report bug", command=hello)
helpmenu.add_command(label="About", command=hello)
menubar.add_cascade(label="Help", menu=helpmenu)

helpmenu.activebackground='red'



root.config(menu=menubar)
app.display()

Solution

  • I have broken down the following code. You do need to import tkinter first or it will throw an error.

    from tkinter import * 
    from guizero import *
    
    
    #background can be set rgb values,color name, and hex values
    # width and height set the defualt startup window size
    app=App(title='Test',bg=(53, 60, 81),width=500,height=500)
    
    #sets min and max size of window
    app.tk.minsize(width=250,height=250)
    app.tk.maxsize(width=550,height=550)
    
    root = app.tk
    
    
    #Basic test function
    def hello():
        print ("hello!")
        
        
            
        
    #creates the menubar and sets the location to root window
    menubar = Menu(root,relief=FLAT,bd=0)
    
    
    '''
    bg sets the menubar background color
    fg sets the text color
    activebackground sets the selected item background
    activeforeground set the selected item text color
    active borderwidth removes the 3d effect/border around item
    font sets the font type and size
    Defualt text,background and other things can be set with variables
    
    '''
    
    menubar.config(bg = "GREEN",fg='white',activebackground='red',activeforeground='purple',activeborderwidth=0,font=("Verdana", 12))
    
    
    # create a pulldown menu, and add it to the menu bar
    # background,foreground and bother border and active border width needs to be set to remove any 3d border effect
    filemenu = Menu(menubar, tearoff=0,relief='flat', bd=0,activebackground='red',activeborderwidth=0,font=("Verdana", 12))
    filemenu.config(bg = "GREEN") 
    filemenu.add_command(label="New", command=hello)
    filemenu.add_command(label="Save", command=hello)
    #add line between drop down menu items
    filemenu.add_separator()
    filemenu.add_command(label="Exit", command=root.quit)
    # sets the top level menu list name
    menubar.add_cascade(label="File", menu=filemenu)
    
    
    
    
    
    # create a pulldown menu, and add it to the menu bar
    #example of no styling added to the sub menu
    editmenu = Menu(menubar, tearoff=0)
    editmenu.add_command(label="Cut", command=hello)
    editmenu.add_command(label="Copy", command=hello)
    editmenu.add_command(label="Paste", command=hello)
    # sets the top level menu list name
    menubar.add_cascade(label="Edit", menu=editmenu)
    
    # create a pulldown menu, and add it to the menu bar
    # show custom effects can be add to each sub menu 
    helpmenu = Menu(menubar, tearoff=0,bg='orange')
    helpmenu.add_command(label="Report bug", command=hello)
    helpmenu.add_command(label="About", command=hello)
    # sets the top level menu list name
    menubar.add_cascade(label="Help", menu=helpmenu)
    
    
    
    
    # example of guizero widget
    box = Box(app,height=200,width=500)
    box.set_border(thickness=2, color='green')
    box.bg=(53, 60, 81)
    box.text_color='white'
    exampel_text = Text(box, text="Hello World")
    Picture(box,"example.png")
    
    
    # display the menu and other things
    root.config(menu=menubar)
    app.display()