CreateMenu and style

[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

[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");

[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

[Peter]

Code: Select all

! $(".dijitMenu").css("background-color", "black");

! $(".dijitMenuItem").css("color", "white");
! $(".dijitMenuItem").css("background-color", "black");

! $(".dijitMenuSeparator").css("background-color", "red");

[saboteur]

Brilliant Peter, many thanks.

[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

[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

[Kurzer]

Hello Peter,

I am desperately looking for more information about the

Code: Select all

! $("#dijit_XYZ").css(...)

[/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

[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

[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