Centering items in a grid

[trajano]

Hi I have the following code at the moment

Code: Select all

    style_prefix "gamemenu"
    frame:
        xpadding int(50 * pmui.scale)
        vbox:
            hbox:
                xfill True
                yoffset int((100.0-72)/2 * pmui.scale)
                hbox:
                    spacing int(100 * pmui.scale)
                    imagebutton auto "button exit_to_game %s" action Return()

                hbox:
                    xalign 1.0
                    spacing int(100 * pmui.scale)
                    imagebutton auto "button show_menu %s" action Return()
            grid 5 1:
                xfill True
                yoffset int((100.0-72)/2 * 3 * pmui.scale)
                style_prefix "gamemenuitems"
                vbox:
                    xcenter 0.5
                    imagebutton auto "button show_main_menu %s" action MainMenu()
                    textbutton "Main" action MainMenu()
                vbox:
                    imagebutton auto "button history %s" action ShowMenu("history")
                    textbutton "History" action ShowMenu("history")
                vbox:
                    imagebutton auto "button save %s" action ShowMenu("save")
                    textbutton "Save" action ShowMenu("save")
                vbox:
                    imagebutton auto "button load %s" action ShowMenu("load")
                    textbutton "Load" action ShowMenu("load")
                vbox:
                    imagebutton auto "button settings %s" action ShowMenu("preferences")
                    textbutton "Settings" action ShowMenu("preferences")

Which results in this https://pasteboard.co/IoCZqQc.png

I am just trying to align the menu text (and also trying to make it smaller) and the button images so they are centered and they are equally distributed across the width of the screen

[trajano]

I tried

Code: Select all

style gamemenu_gamemenuitems_textbutton:
    size 44

and variations
style gamemenu_gamemenuitems_textbutton_text:
style gamemenuitems_textbutton:
style gamemenuitems_textbutton_text:
style gamemenu_textbutton_text:
style gamemenu_textbutton:

[trajano]

I eventually got it working, but without the "style"

Code: Select all

screen portrait_game_menu():

    ## Ensure this appears on top of other screens.
    zorder 100

    style_prefix "gamemenu"
    frame:
        xpadding int(50 * pmui.scale)
        vbox:
            hbox:
                xfill True
                yoffset int((100.0-72)/2 * pmui.scale)
                hbox:
                    spacing int(100 * pmui.scale)
                    imagebutton auto "button exit_to_game %s" action Return()

                hbox:
                    xalign 1.0
                    spacing int(100 * pmui.scale)
                    imagebutton auto "button show_menu %s" action Return()
            grid 5 1:
                xfill True
                yoffset int((100.0-72)/2 * 3 * pmui.scale)
                style_prefix "gamemenuitems"
                vbox:
                    xalign 0.5
                    imagebutton auto "button show_main_menu %s" xalign 0.5 action MainMenu()
                    textbutton "Main" text_size 30 * pmui.scale text_kerning -1 text_color "#ffffff" xalign 0.5 action MainMenu()
                vbox:
                    xalign 0.5
                    imagebutton auto "button history %s"  xalign 0.5 action ShowMenu("history")
                    textbutton "History" text_size 30 * pmui.scale text_kerning -1 text_color "#ffffff" xalign 0.5 action ShowMenu("history")
                vbox:
                    xalign 0.5
                    imagebutton auto "button save %s" xalign 0.5 action ShowMenu("save")
                    textbutton "Save" text_size 30 * pmui.scale text_kerning -1 text_color "#ffffff" xalign 0.5 action ShowMenu("save")
                vbox:
                    xalign 0.5
                    imagebutton auto "button load %s" xalign 0.5 action ShowMenu("load")
                    textbutton "Load" text_size 30 * pmui.scale text_kerning -1 text_color "#ffffff" xalign 0.5 action ShowMenu("load")
                vbox:
                    xalign 0.5
                    imagebutton auto "button settings %s" xalign 0.5 action ShowMenu("preferences")
                    textbutton "Settings" text_size 30 * pmui.scale text_kerning -1 text_color "#ffffff" xalign 0.5 action ShowMenu("preferences")