• Registered: 2016-12-09
  • Posts: 6

Topic: How to customise the thumbnail arrows [SOLVED]

Hi

I would like to remove the circle backgrounds from the thumbnail navigation arrows, but they seem to be created using inline CSS which I can't override in my custom theme.

Is it possible to customise the styling of these arrows?

Many thanks

  • Registered: 2012-04-24
  • Posts: 5,924

Re: How to customise the thumbnail arrows [SOLVED]

If you want to remove the semi-transparent background from the gallery navigation buttons, set the Nav Button Back Color Opacity to zero (in JuiceboxBuilder-Pro's 'Customize -> Color' section).
If editing your gallery's XML file directly, set navButtonBackColor="rgba(0,0,0,0)".

  • Registered: 2016-12-09
  • Posts: 6

Re: How to customise the thumbnail arrows [SOLVED]

Thanks Steve, that's a great help.

Can the arrows on the main image and the arrows in the thumbnail area be styled differently - or is there just one set of styling options that controls both sets of arrows?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: How to customise the thumbnail arrows [SOLVED]

Can the arrows on the main image and the arrows in the thumbnail area be styled differently...

Yes. Please see the Custom Icons support section in the Theming Guide for details.
You could swap the current icons for other ones from the IcoMoon library (there are a few different arrows to choose from) or you could create your own icons (or modify existing ones) using the IcoMoon editor.

  • Registered: 2016-12-09
  • Posts: 6

Re: How to customise the thumbnail arrows [SOLVED]

Sorry, I meant can the arrows be styled differently from each other, e.g. white arrows on the image and black arrows in the thumbnails?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: How to customise the thumbnail arrows [SOLVED]

Thanks for the clarification.
Juicebox uses the same custom characters for the main image navigation buttons and the thumbnail navigation buttons so it would not be possible to use a different character for main images vs thumbnails.
Also, the navigation button color options (navButtonIconColor, navButtonIconHoverColor, navButtonBackColor) affect both main image and thumbnail navigation buttons.

However, you could use CSS to change the color of only the thumbnail navigation buttons (for example).

If you wanted to use black arrows for the thumbnail navigation buttons, try something like the following in the <head> section of your gallery's HTML page.

<style type="text/css">
    .jb-navigation.index-navigation .jbn-nav-button {
        color: rgba(0,0,0,1) !important;
    }
</style>
  • Registered: 2016-12-09
  • Posts: 6

Re: How to customise the thumbnail arrows [SOLVED]

Yes, that works! I couldn't get my theme CSS to override the inline CSS when I tried before - I must have just been using the wrong selectors.

Many thanks for your help.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: How to customise the thumbnail arrows [SOLVED]

You're welcome. I'm glad you've got it working.
Thank you for letting me know.