Forum Discussion
Change built in button size in Articulate storyline player
Hi guys!
Any way I can change the size of the built in buttons in the storyline player?
As html5 make mobile learning (on an iphone 5s/mobile safari) a reality, the only real issue is the tiny prev/next/submit buttons in the player...they seem to be functioning better than custom buttons, which is why I want to use them, but they are really small.
Any way to adjust the size?
Regards, Eilert
You can't change the size of the player buttons but you can turn them off and create your own button any size you want.
Hi, thanks for the reply:)
I'm aware of the solution you're suggesting, and I did try that, however it turns out that the custom buttons don't work as well as the built in ones. Sometimes it will lead to the next slide, sometimes not. Might have something to do with the loading of the elements on the slide, don't know. Anyways, the built in ones always lead to the next slide, as long as I can hit them. Bigger built in buttons would greatly improve the usability and possibility for creating courses for the smallest mobile devices...
Mvh Eilert
I agree with you 100%. I would like to be able to adjust the size, shape and position of the player buttons.
Hello Eilert and Nancy!
You are welcome to submit this as a feature request here.
Hi Emily!
Will do☺ Would be a great feature.
Eilert
Hmm.. I thought you could adjust the size of the buttons by changing the CSS code. I know I changed the menu font size with CSS.
That would be awesome, Jerson! Which editor do you use to edit the css-code in SL? Would Dreamweaver do?
That is right. I remember this now. I don't think it changes the button size in the Flash version but it should work for the html5 version.
Jerson,
If you can get this to work, please let us know!
Eilert - FYI, when you post using the "reply" feature in the email, your email signature will copy here. You can go in and edit your post. Click on the title of the thread to avoid this.
You can use any text editor for CSS. I use Adobe Brackets. Its simple and straight forward for messing around with the code.
Here is the code to adjust the buttons. You need to open the player.css file in the mobile folder. This only works for the HTML5 version. This doesn't work for the flash version. You don't have to delete the comments between /* -- */. They won't render. I also added the code to adjust the font sizes for the buttons to make them bigger. Just paste the code at the end. This will have to be done every time you publish it.
/* To adjust the padding for each button, adjust the number. In order they are Top Right Bottom Left. This will apply a padding around the text. */
#control-next /* This will adjust the next button. Make changes to the numbers below */
{
padding: 10px 20px 10px 20px; /* Top Right Bottom Left */
}
#control-previous /* This will adjust the previousbutton. Make changes to the numbers below */
{
padding: 10px 20px 10px 20px;
}
#control-submit /* This will adjust the submit button. Make changes to the numbers below */
{
padding: 10px 20px 10px 20px;
}
#control-submitall /* This will adjust the submit all button. Make changes to the numbers below */
{
padding: 10px 20px 10px 20px;
}
.controlbar-button .label /* This will adjust the font sizes for the buttons. Make changes to the number after font-size*/
{font-size:20px; /* Adjusts the font size. */
}
One more thing Jerson, any idea how I can align the buttons with the bottom of the player? Changed the padding to 15 30 15 30, which is a perfect size, however the button dropped below the player...any pointers on alignment?
Thats great!!
Pasted the css-code to the css-file with Edge animate, works great:) Thanks so much Jerson, you made my day:)
Eilert
After the code for the padding just add this line
margin-top: -10px;
So it would look like this
#control-next /* This will adjust the next button. Make changes to the numbers below */
{
padding: 15px 30px 15px 30px; /* Top Right Bottom Left */
margin-top: -10px;
}Youre a genious, thanks so much:) Wish I could code. How do you know this stuff?
Hello, does anyone know if this will work with Storyline 360? I am having trouble finding the player.css file.
me too
I built websites on the side for a while. I enjoyed it, but realized my skill couldn't really keep up with the current trends.
Hi Jerson Campos
First of all thank you for the detailed solution.
I know this post is little bit older but my requirement is same, i have to edit the Next and previous buttons sizes.I used the mentioned CSS code and its works very well.
Can we edit the Menu button, volume icon and Seekbar sizes ?
