Page 1 of 2
CreateMenu and style
Posted: Thu Sep 17, 2020 1:43 pm
by saboteur
Hi all,
I'd like to style a menu made with CreateMenu and looking through the css for dojo i've found quite a few menu entries but none seem to affect the syle in any way whatsoever.
I thought it would be the .dijitMenu entry but nope.
Can anyone point me in the right direction ?
As an aside, as everything in Spiderbasic can be coloured/themed ( unlike PB ) would it not make sense to make this accessible for all gadgets using setgadgetcolour or have a stylesheet changer in compiler options ?
Thanks
Re: CreateMenu and style
Posted: Thu Sep 17, 2020 2:27 pm
by Peter
something like this?
Code: Select all
If OpenWindow(0, 200, 200, 200, 100, "MenuBar Example")
If CreateMenu(0, WindowID(0))
MenuTitle("Project")
MenuItem(1, "Open") ; <!-- Red -->
MenuBar()
MenuItem(4, "Close") ; <!-- Blue -->
EndIf
EndIf
! $("#dijit_MenuItem_0").css("color", "red");
! $("#dijit_MenuItem_0").css("font-size", "24px");
! $("#dijit_MenuItem_1").css("color", "blue");
Re: CreateMenu and style
Posted: Thu Sep 17, 2020 2:43 pm
by saboteur
As usual Peter thankyou.
Is it possible to change the actual menu style, not just the items ( I dont want black text on a white background ) ?
Cheers
Re: CreateMenu and style
Posted: Thu Sep 17, 2020 2:53 pm
by Peter
Code: Select all
! $(".dijitMenu").css("background-color", "black");
! $(".dijitMenuItem").css("color", "white");
! $(".dijitMenuItem").css("background-color", "black");
! $(".dijitMenuSeparator").css("background-color", "red");
Re: CreateMenu and style
Posted: Thu Sep 17, 2020 2:59 pm
by saboteur
Brilliant Peter, many thanks.
Re: CreateMenu and style
Posted: Fri Sep 18, 2020 2:59 pm
by saboteur
Ok this is really frustrating, my window is x pixels wide, my menu seems to fill the entire width of x pixels but the backcolour only fills each 'heading' leaving a whitespace for the remainder of the width of the window.
I'm guessing it's in a div, but how can i either match that colour to the background of the window or make the menu fill the entire width of the window.
I've been through the dojo docs, which in this case don't seem to be very helpfull.
Failing this i'm going to have to create my own menubar using canvas gadgets like i have in PB.
Cheers
Re: CreateMenu and style
Posted: Fri Sep 18, 2020 3:58 pm
by Peter
Try to post a short and executable code here, which can be used to reproduce your problem. Then I will see if I can solve it.
Greetings ... Peter
Re: CreateMenu and style
Posted: Sat Sep 19, 2020 9:18 am
by Kurzer
Hello Peter,
I am desperately looking for more information about the
[/b] syntax you use to change the appearance of Spiderbasic Gadgets.
Unfortunately I don't find this kind of syntax in dojo / dijit tutorials. I have the current dojo source package in front of me, but in the large amount of files you can easily get lost.
Can you point me in the right direction where I can find this information?
Many thanks and sorry for hijacking this thread.
Markus
Re: CreateMenu and style
Posted: Sat Sep 19, 2020 2:16 pm
by Peter
@Markus:
$ is the short form of a jQuery command that you can use in SpiderBasic.
Here you can find more information about jQuery:
https://api.jquery.com/
Greetings ... Peter
Re: CreateMenu and style
Posted: Mon Sep 21, 2020 7:53 am
by saboteur
Hi peter,
Sorry for the delay.
Code: Select all
If OpenWindow(0, 100, 150, 600, 30, "Menu style test", #PB_Window_TitleBar|#PB_Window_ScreenCentered)
ResizeWindow(0, #PB_Ignore, 5, #PB_Ignore, #PB_Ignore)
If CreateMenu(0, WindowID(0))
MenuTitle("Menu 1")
MenuItem( 1, "option 1", ImageID(0))
MenuTitle("Menu 10")
MenuItem( 10, "option 1", ImageID(0))
MenuTitle("Menu 100")
MenuItem( 100, "option 1", ImageID(0))
MenuTitle("Menu 1000")
MenuItem( 1000, "option 1", ImageID(0))
MenuTitle("Help")
MenuItem(900, "Help")
MenuItem(901, "About")
EndIf
! $(".dijitMenu").css("background-color", "black");
! $(".dijitMenu").css("border", "black");
! $(".dijitMenuItem").css("color", "white");
! $(".dijitMenuItem").css("background-color", "black");
! $(".dijitMenuItem").css("width", "auto");
EndIf
When i run this, the menu only extends to a part of the width of the window and the part that is unused is white.
I've tried using width 100%, i've tried changing the background colour of the <div> but nothing seems to work or i've got the syntax wrong.
Any help is greatly appreciated.
Cheers