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

24 Replies
Eilert Torsnes

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

Jerson  Campos

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. */

}

Atul Kumar

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 ?