Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes
Is it possible to control the size of the back/next arrows? For a particular project, I'd like for them to be smaller.
in how_to by (150 points)
edited by

1 Answer

0 votes
Best answer

Yes, you can create your own .css file and attach it using the Resources section of the in5 dialog. Here are 2 different CSS code snippets that will shrink the arrows to half size for example...

Note: In newer versions of in5 (v3.1+), the navigation arrows are standard to all page formats and accessed with the following CSS:

nav#page-nav > button { }
nav#page-nav > button:hover { }
nav#page-nav > #backBtn { }
nav#page-nav > #nextBtn { }

A) This ways is a bit easier but it relies on the browser supporting CSS transforms.

.anythingSlider-in5 .arrow a {
    -ms-transform: scale(0.5, 0.5); /* IE 9 */
    -webkit-transform: scale(0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5, 0.5);
B) This way involves a bit more tweaking, and is also not supported in IE8 due to the background-size property.
.anythingSlider-in5 .arrow a {
    background-size: 200% auto;
    height: 34px;
    margin: -34px 10px 0;
    width: 34px;
It may be easier to make tweaks to the CSS while you're testing using the browser inspector.


by (197k points)
edited by
Thanks for the support.

How could I change the color of the arrows? or change the image? Is it possible?
With the previous plugin (2) I could do it.
You can do it in v3 too. This is the CSS that sets the button image in the current version:

nav#page-nav > button {
    background:url(../images/arrows-slider.svg) no-repeat;

It's a single (back) arrow that is rotated to get the next arrow.

You can simply replace that image, or re-assign it with custom CSS that you attach as a resource.
Hi, thanks
I replaced the image and the arrow disappeared. I imagine I did something wrong, don't worry.
Hmm...yep, I'm sure it's fixable. Send me the files as you've edited them.
I fixed it with adding this css with my arrow, thanks:
nav#page-nav > button {
    background:url(../images/arrows-slider.svg) no-repeat;