How do I customise the scrollbar?

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
poohe
Newbie
Posts: 22
Joined: Sun Jan 31, 2016 7:02 am
Projects: Princess of Desire, Black Sands
Deviantart: omt8
Location: United Kingdom
Contact:

How do I customise the scrollbar?

#1 Post by poohe » Sat Nov 05, 2016 12:56 pm

I'm creating character profiles for every main character in my game and I'm using a scroll bar to display all the info. I've looked through the documentation and haven't found an answer. Is it possible to customize the scroll bar, and how do I do it? Also how do I resize the scrollbar, so it's smaller than the actual text, is that possible?

side "c r":
area (770, 100, 700, 580)

viewport id "vp":
draggable False
mousewheel True
vbar.scrollbar_size = 24

add "character_select_stuff/Ragnyo Character Select Menu TEXT.png"

vbar value YScrollValue("vp")


Image

This code gives me the scrolling I need, but it has a default bar and a block as the thumb. How would I edit it, so the thumb is a heart and the default bar is the line? And how do I get it smaller? If it's not possible through renpy, then it'll be nice to be told.

User avatar
poohe
Newbie
Posts: 22
Joined: Sun Jan 31, 2016 7:02 am
Projects: Princess of Desire, Black Sands
Deviantart: omt8
Location: United Kingdom
Contact:

Re: How do I customise the scrollbar?

#2 Post by poohe » Mon Nov 07, 2016 4:20 am

*bump*

User avatar
poohe
Newbie
Posts: 22
Joined: Sun Jan 31, 2016 7:02 am
Projects: Princess of Desire, Black Sands
Deviantart: omt8
Location: United Kingdom
Contact:

Re: How do I customise the scrollbar?

#3 Post by poohe » Tue Nov 08, 2016 1:54 pm

*bump again* I really need help on this. If it's not possible, then just tell me please.

User avatar
Ocelot
Miko-Class Veteran
Posts: 849
Joined: Tue Aug 23, 2016 10:35 am
Skype: miinipaa
Contact:

Re: How do I customise the scrollbar?

#4 Post by Ocelot » Tue Nov 08, 2016 2:10 pm

I suggest to check out bar style properties, in paticular base_bar and thumb ones. I do not have much experience with old GUI, but you probably want to look where style properties for scrollbars are set and modify it to change all scrollbars at once.

https://www.renpy.org/doc/html/style_pr ... properties
< < insert Rick Cook quote here > >

User avatar
Minuteman
Regular
Posts: 29
Joined: Sat Feb 24, 2018 2:02 pm
Location: On duty
Contact:

Re: How do I customise the scrollbar?

#5 Post by Minuteman » Tue Sep 10, 2019 9:56 am

*Bump*
I'm interested in this as well.
of the people for the people

User avatar
hell_oh_world
Regular
Posts: 175
Joined: Fri Jul 12, 2019 5:21 am
Projects: Pathfinding
Organization: NILA
Contact:

Re: How do I customise the scrollbar?

#6 Post by hell_oh_world » Tue Sep 10, 2019 11:07 am

poohe wrote:
Sat Nov 05, 2016 12:56 pm
I'm creating character profiles for every main character in my game and I'm using a scroll bar to display all the info. I've looked through the documentation and haven't found an answer. Is it possible to customize the scroll bar, and how do I do it? Also how do I resize the scrollbar, so it's smaller than the actual text, is that possible?

side "c r":
area (770, 100, 700, 580)

viewport id "vp":
draggable False
mousewheel True
vbar.scrollbar_size = 24

add "character_select_stuff/Ragnyo Character Select Menu TEXT.png"

vbar value YScrollValue("vp")


Image

This code gives me the scrolling I need, but it has a default bar and a block as the thumb. How would I edit it, so the thumb is a heart and the default bar is the line? And how do I get it smaller? If it's not possible through renpy, then it'll be nice to be told.
Do this, add some properties to the vbar, then experiment on those until you're satisfied with the result.

Code: Select all

side "c r":
         area (770, 100, 700, 580)
        
         viewport id "vp":
             draggable False
             mousewheel True
             vbar.scrollbar_size = 24

             add "character_select_stuff/Ragnyo Character Select Menu TEXT.png"

         vbar value YScrollValue("vp"):
         	## These are all the fundamental properties of a bar that you can alter in order to change its look.
         	## It is well explained in the doc on what each one does.
         	left_bar img_name
		right_bar img_name
		top_bar img_name ## Probably the most common property that you need to change to alter the look.
		bottom_bar img_name ## Probably the most common property that you need to change to alter the look.
		base_bar img_name
		thumb img_name
		thumb_shadow img_name
         
Here's the doc:
https://www.renpy.org/doc/html/style_pr ... y-left_bar

If you're still confused to what each property do, experiment on it. Try different images and see how it works.

Post Reply

Who is online

Users browsing this forum: No registered users