[Solved] Custom hovering on save slot buttons

[Samitha]

Hello!

I'm a newbie coding in general, and thus can't seem to know where to customize the hovering state of the save slot buttons.
My idea is to have a thin frame surround the slot button:

I am aware that style_prefix "slot" in the original sample of The Question is in charge of that hovering but I just can't seem to find that particular style anywhere. Inside my code, it displays a blue line on the left side of the slot buttons:

Here's my code:

Code: Select all

screen file_slots(title):

    default page_name_value = FilePageNameInputValue(pattern=_("Page {}"), auto=_("Automatic saves"), quick=_("Quick saves"))

    use game_menu(title):

        fixed:

            ## This ensures the input will get the enter event before any of the
            ## buttons do.
            order_reverse True

            ## The grid of file slots.
            grid gui.file_slot_cols gui.file_slot_rows:
                style_prefix "slot"
                xsize 800
                xalign 0.5
                yalign 0.3

                spacing 50

                for i in range(gui.file_slot_cols * gui.file_slot_rows):

                    $ slot = i + 1

                    button:
                        xsize 423
                        ysize 243
                        action FileAction(slot)
                        add "gui/saveslot_image.png"

                        vbox:

                            add FileScreenshot(slot) xalign 0.5 size(423,243)

                            text FileTime(slot, format=_("{#file_time}%A, %B %d %Y, %H:%M"), empty=_("empty slot")):
                                xalign 1.0
                                size 25

                        key "save_delete" action FileDelete(slot)

            ## Buttons to access other pages.
            vbox:

                xalign 0.95
                yalign 0.3

                spacing 30
                textbutton _("^") action FilePagePrevious()

                if config.has_autosave:
                    textbutton _("{#auto_page}Auto") action FilePage("auto")

                if config.has_quicksave:
                    textbutton _("{#quick_page}Quick") action FilePage("quick")

                ## range(1, 10) gives the numbers from 1 to 9.
                for page in range(1, 6):
                    textbutton "[page]" action FilePage(page)

                textbutton _("v") action FilePageNext()


style page_label is gui_label
style page_label_text is gui_label_text
style page_button is gui_button
style page_button_text is gui_button_text

style slot_button is gui_button
style slot_button_text is gui_button_text
style slot_time_text is slot_button_text
style slot_name_text is slot_button_text

style page_label:
    xpadding 75
    ypadding 5

style page_label_text:
    text_align 0.5
    layout "subtitle"
    hover_color gui.hover_color
    size 25

style page_button:
    properties gui.button_properties("page_button")

style page_button_text:
    properties gui.button_text_properties("page_button")

style slot_button:
    properties gui.button_properties("slot_button")

style slot_button_text:
    properties gui.button_text_properties("slot_button")

What should I do?

I'd be eternally grateful !

[Imperf3kt]

I can answer the question as asked, but first I'll answer your specific goal, as that may be simpler.

You say you want thin frame around the Save slot, this already exists.
look under gui.rpy for the save slot borders.

[gas]

That blue border is in fact a graphical .png picture, not a style definition.
You should change the picture in the GUI folder with the one with proper borders. And you should adjust size and paddings of the slot area in the GUI definition script, as they have a left padding for that blue border by default.

[Samitha]

Thank youu! Both of you

And sorry for the newbie-type of a question, I couldn't find an answer anywhere, hehe.

Could I ask for another thing, though? The buttons grew a little bit in size and they seem to be disappearing towards the bottom part of the screen. However much I want to, I can't get the grid to move upwards. I don't know if there's another property I could use, or something I'm doing wrong. Though the xalign does work somewhat, the yalign doesn't.

[gas]

I think is the top_padding of this style definition you can find in the game_menu screen.

Code: Select all

style game_menu_outer_frame:
    bottom_padding 25
    top_padding 100

    background "gui/overlay/game_menu.png"

(but I can't test it right now).

[Samitha]

You nailed it! Thank you so much! ♥