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.
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...
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*/ {
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?
#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; }
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 ?
I'm not certain if Jerson is still subscribed, but he's a regular here in the forums so you may also want to message him directly using the "contact me" button on his profile to see if he could share specifics.
27 Replies
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.
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.
That would be awesome, Jerson! Which editor do you use to edit the css-code in SL? Would Dreamweaver do?
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. */
}
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.
Thats great!!
Pasted the css-code to the css-file with Edge animate, works great:) Thanks so much Jerson, you made my day:)
Eilert
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?
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?
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.
This post was removed by the author
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 ?
Hi Atul,
I'm not certain if Jerson is still subscribed, but he's a regular here in the forums so you may also want to message him directly using the "contact me" button on his profile to see if he could share specifics.
Hi Ashley,
Thank you so much for the information. :)
Happy to help Atul. :-)
Hi Atul,
You should be able to adjust anything through the CSS, you just need to find what tags have been assigned to those objects.
Thank you for stopping back in to assist Atul, Jerson!
Awesome work Jerson! Thanks for this.
Hello, does anyone know if this will work with Storyline 360? I am having trouble finding the player.css file.
me too