3

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()
PurpleLlama
  • 168
  • 1
  • 2
  • 14
  • What you mean by you are working with guizero AND tkinter? You cant mix GUI-Toolkits. – Thingamabobs Jun 30 '20 at 14:17
  • 2
    You can combined them it is even on guizero website. (https://lawsie.github.io/guizero/usingtk/) – PurpleLlama Jun 30 '20 at 14:52
  • I need to apologize: https://lawsie.github.io/guizero/usingtk/ – Thingamabobs Jun 30 '20 at 14:55
  • Can you provide a gif or image to understand better? – Saad Jun 30 '20 at 19:51
  • It appears that guizero is just using tkinter. Why not just write everything in tkinter? – Mike - SMT Jun 30 '20 at 21:02
  • I am trying to keep the code nice and clean so people can add to it plus guizero is a lot easier to read and overall the documentation is overall mostly good. – PurpleLlama Jun 30 '20 at 22:51
  • example (https://krita.org/wp-content/uploads/2019/03/plugin-selection.png) – PurpleLlama Jun 30 '20 at 23:02
  • It seems that `guizero` is a package inherit from tkinter, I think you couldn't do it.You need to create the menu by yourself. – jizhihaoSAMA Jul 01 '20 at 04:23
  • @jizhihaoSAMA I think the same. Since tkinter is using the style of the operating system, like for windows [vista, XP, default..]. – Thingamabobs Jul 01 '20 at 05:20
  • In their documentation as it says *"you can access the internal object using the syntax .tk"*. So if it is possible in Tkinter then it should be possible with `guizero` as well. Unfortunately, I don't have access to a windows machine so I can't find the solution. – Saad Jul 01 '20 at 10:51
  • I have tried translating a normal tk menu into a guizero format by change the window target to app, change menu into menubar and replace the mainloop with app.display(). Adding .tk does not seem to work either when it come to the menu bar. i have used it on other elements like placement and styling buttons and what not. BTW I am running the newest version of Ubuntu. – PurpleLlama Jul 01 '20 at 14:31
  • 2
    A normal menu can be added by using `app.tk` as `root` – Saad Jul 01 '20 at 16:39
  • 2
    ok thank you Saad . I was able to do it by doing from tkinter import * from guizero import App app=App() root = app.tk – PurpleLlama Jul 01 '20 at 17:18
  • 2
    Are you still looking for an answer or you've found one? if you have found an answer then you can answer your own question and accept it so the question is marked as answered. – Saad Jul 02 '20 at 09:55
  • I am only able to do part of it. I am able to remove the border of the menubar and padding on the top. I can also change the backgrounds of the options but still have part of the 3d effect in the sub menu. I am still unable to change the hover over active color for menubar item and its sub menu. – PurpleLlama Jul 02 '20 at 15:43
  • Now I just need to remove the 3d affect on the selected menu and sub menu – PurpleLlama Jul 02 '20 at 23:13

1 Answers1

5

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()
PurpleLlama
  • 168
  • 1
  • 2
  • 14