How to move preferences [SOLVED]

[lemonscent]

So I decided to work on the GUI a little more, and then... I messed things up. A lot. How do I move the menu things in the preferences page?



The red text says, "move this 2 here". The circle is an estimate of about where the menu thing should go. You don't need to tell me the coordinates or anything, just tell me how to move the selections bar thingie. Thanks in advance:)

Current code:

screen preferences:
tag menu

# Include the navigation.
use navigation

hbox:
vbox:
frame:
style_group "pref"
has vbox
label _("Display")
textbutton _("Window") action Preference("display", "window")
textbutton _("Fullscreen") action Preference("display", "fullscreen")
frame:
style_group "pref"
has vbox
label _("Transitions")
textbutton _("All") action Preference("transitions", "all")
textbutton _("None") action Preference("transitions", "none")
frame:
style_group "pref"
has vbox
label _("Text Speed")
bar value Preference("text speed")

frame:
style_group "pref"
has vbox
label _("Auto-Forward")
bar value Preference("auto-forward time")



vbox:

frame:
style_group "pref"
has vbox
label _("Skip")
textbutton _("Seen Messages") action Preference("skip", "seen")
textbutton _("All Messages") action Preference("skip", "all")

frame:
style_group "pref"
has vbox
label _("After Choices")
textbutton _("Stop Skipping") action Preference("after choices", "stop")
textbutton _("Keep Skipping") action Preference("after choices", "skip")

frame:
style_group "pref"
has vbox
label _("Sound Volume")
bar value Preference("sound volume")
if config.sample_sound:
textbutton _("Test"):
action Play("sound", config.sample_sound)
style "soundtest_button"
frame:
style_group "pref"
has vbox
label _("Music Volume")
bar value Preference("music volume")


init -2 python:
style.pref_frame.xfill = False
style.pref_frame.xmargin = 15
style.pref_frame.top_margin = 15

style.pref_vbox.xfill = False

style.pref_button.size_group = "pref"
style.pref_button.xalign = 1.0

style.pref_slider.xmaximum = 168
style.pref_slider.xalign = 1.0

style.soundtest_button.xalign = 1.0

[OokamiKasumi]

So I decided to work on the GUI a little more, and then... I messed things up. A lot. How do I move the menu things in the preferences page?

Start by setting everything back to Default -- what it was when you first began.

Then add this Below it:
-- Note! These codes are for a 1024x768 game! You WILL need to adjust them to suit your screen resolution.

Code: Select all

################################ 
init -2 python:
    
    ## -------- grid --------------
    style.prefs_grid.ypos = 0.15
    style.prefs_grid.xmaximum = 900
    style.prefs_grid.xalign = 0.5
    
    ## ------- frame --------------
    style.pref_frame.background = Frame("ui/frame.png",10,10)
    style.pref_frame.xfill = True
    style.pref_frame.xmargin = 3
    style.pref_frame.ymargin = 3
    
    ## -------- vbox ---------------
    style.pref_vbox.xfill = True
    style.pref_vbox.top_margin = 75

To adjust the buttons, sliders, and labels add this:
-- Note: Be sure to have all the appropriate Graphics in your Game folder, (I keep mine in a folder inside the Game folder called ui,) before you try to add these!

Code: Select all

    ## -------- button --------------
    style.pref_button.size_group = "pref"
    style.pref_button.xalign = 0.5
    
    style.pref_button.background = Frame("ui/button_idle.png",5,5)
    style.pref_button.hover_background = Frame("ui/button_hover.png",5,5)
    style.pref_button.insensitive_background = Frame("ui/button_insensitive.png",5,5)
    style.pref_button.selected_background = Frame("ui/button_selected.png",5,5)
    style.pref_button.selected_hover_background = Frame("ui/button_selected_hover.png",5,5)
    
    style.pref_button.yminimum = 45
    
    ## Button text ----------------------------
    # style.pref_button_text.font = "bluecabin.ttf" # You MUST have this font loaded to use this. 
    style.pref_button_text.color = "#ffffcc"
    style.pref_button_text.size = 22
    
    style.pref_button_text.hover_color = "#fff"
    style.pref_button_text.insensitive_color = "#999"

    style.pref_button_text.outlines = [(1, "#663300", 0, 0)]
    style.pref_button_text.hover_outlines = [(1, "#cc9933", 0, 0)]
    style.pref_button_text.selected_outlines = [(1, "#663300", 0, 0)]
    style.pref_button_text.selected_hover_outlines = [(1, "#cc9933", 0, 0)]

    style.pref_text.xalign = 0.5
    
    ## Label text -----------------------
    style.pref_label_text.size = 34
    style.pref_label_text.color = "#996633"
    # style.pref_label_text.font = "LHFmisterkookyREG_0.TTF" # You MUST have this font loaded to use this. 

    style.pref_label.xalign = 0.5

    style.pref_label_text.outlines = [(1, "#003366", 0, 0)]
    style.pref_label_text.drop_shadow = [(2, 2)] 
    style.pref_label_text.drop_shadow_color = "#000000"
    
    ## slider -------------------------------
    style.pref_slider.xalign = 0.5
    style.pref_slider.ymaximum = 29
    style.pref_slider.xmaximum = 197    
    
    style.pref_slider.left_bar = "ui/bar_full.png"
    style.pref_slider.right_bar = "ui/bar_empty.png"
    style.pref_slider.hover_left_bar = "ui/bar_hover.png"

    style.pref_slider.thumb = "ui/thumb.png"
    style.pref_slider.thumb_shadow = None
    style.pref_slider.thumb_offset = 6
    
    ## Sound test button
    style.soundtest_button.xalign = 1.0

For the background image, you'll need to ADD this:

Code: Select all

##############################################################################
# Preferences
#
# Screen that allows the user to change the preferences.
# http://www.renpy.org/doc/html/screen_special.html#prefereces
    
screen preferences:
    tag menu
    add "ui/Pref_bg.png" # Background image. 
    use navigation

It looks like this:

I hope that helps.

[lemonscent]

Thank you!