• Registered: 2014-07-29
  • Posts: 4

Topic: Outline Type?

I'm building a gallery and finding that no matter what neutral color I choose for my caption type, some image or other makes it hard to read.  It would be great to add a thin outline to the type.

I'm no CSS pro.  I tried to add the following to the index.html's body tag:

          text-shadow: 2px 2px 0 black, 2px -2px 0 black, -2px 2px 0 black, -2px -2px 0

But, that only affected the arrows  (and it did so badly), not the caption text.

So:

1) Is there a feature in Juicebox-pro which will help make my caption text consistently readable?
2) If not, does anyone know any CSS I could add to the html file which would do this?

Thanks much!

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

Re: Outline Type?

You can change the color of the text shadow using the textShadowColor configuration option in JuiceboxBuilder-Pro's 'Customize -> Color' section.
However, you would have more control over the text shadow of your image titles and captions using CSS such as the following:

<style type="text/css">

    /* Image Titles */
    .jb-caption .jb-caption-title {
        text-shadow: 1px 1px 1px rgba(0,0,0,1);
    }  

    /* Image Captions */
    .jb-caption p {
        text-shadow: 1px 1px 1px rgba(0,0,0,1);

    } 
</style>

The sample code above sets a black shadow close to the original text and with a very small amount of blur which sounds suitable for your scenario.
For more details on the parameters of the CSS text-shadow property, please see here.