Forum Discussion
Change built in button size in Articulate storyline player
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. */
}
- EilertTorsnes12 years agoCommunity Member
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?
Related Content
- 11 months ago