Trouble with custom preferences screen.

[Wolfblood Games]

Okay, so my team and I are working on a ren'py visual novel called Onibi that's using custom GUI. The thing is, this is my first time programming in Custom GUI and I'm having a bit of trouble adjusting some things.

This is the result that we want to have for the preferences screen:


Now here's the code for the new preferences screen as is:

Code: Select all

screen preferences():

        hbox:
            xcenter 0.5
            ycenter 0.5

            vbox:
                 vbox:
                     style_prefix "radio"
                     label _("Display")
                     textbutton _("Window") action Preference("display", "window")
                     textbutton _("Fullscreen") action Preference("display", "fullscreen")
                     null height 50

                 vbox:
                     style_prefix "radio"
                     label _("Rollback Side")
                     textbutton _("Disable") action Preference("rollback side", "disable")
                     textbutton _("Left") action Preference("rollback side", "left")
                     textbutton _("Right") action Preference("rollback side", "right")
                     null height 50


                 vbox:
                     style_prefix "check"
                     label _("Skip")
                     textbutton _("Unseen Text") action Preference("skip", "toggle")
                     textbutton _("After Choices") action Preference("after choices", "toggle")
                     textbutton _("Transitions") action InvertSelected(Preference("transitions", "toggle"))
                     null height 50

            vbox:
                 vbox:
                     label _("Text Speed")
                     bar value Preference("text speed")

                     label _("Auto-Forward Time")
                     bar value Preference("auto-forward time")

                     null height 50

                 vbox:
                     if config.has_music:
                         label _("Music Volume")


                     hbox:
                         bar value Preference("music volume")

                         if config.has_sound:
                             label _("Sound Volume")

                         null height 50

                     hbox:
                          bar value Preference("sound volume")

                          if config.sample_sound:
                              textbutton _("Test") action Play("sound", config.sample_sound)

                          if config.has_voice:
                              label _("Voice Volume")

                          null height 50

                     hbox:
                         bar value Preference("voice volume")

                         if config.sample_voice:
                             textbutton _("Test") action Play("voice", config.sample_voice)

                         if config.has_music or config.has_sound or config.has_voice:
                             null height gui.pref_spacing

                         textbutton _("Mute All"):
                              action Preference("all mute", "toggle")
                              style "mute_all_button"

                         null height 50

Now I have the actual options in the right format (All within a centered hbox), but I don't know how to code in the image for the hbox, add the background image back in, and find a spot to put in the resizing for the sliders since they're way too big.