1 Topic by jarnold2 (edited by jarnold2 2012-09-13 17:44:55)

  • Registered: 2012-09-12
  • Posts: 8

Topic: Text too hard to read, need to change opacity or make text white

Here is an example of our galleries where the caption text is unreadable.

http://inside.akronchildrens.org/catego … ng_events/

I can't seem to make any change in the CSS to work.  Thanks for any pointers.

Jim

  • Registered: 2012-09-12
  • Posts: 8

Re: Text too hard to read, need to change opacity or make text white

Was able to spend a bit more time looking into this. The caption text is using the text color from our body copy via inheritance. Not sure yet how to modify our CSS code to make the caption text white.

Thanks for any pointers.

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

Re: Text too hard to read, need to change opacity or make text white

Try adding the Pro Option:

textColor="rgba(255,255,255,1)"

... in the WP-Juicebox 'Pro Options' text area of your gallery's settings.

Otherwise, your could add the following code to the end of the 'wp-juicebox/jbcore/classic/theme.css' file:

.jb-caption-title {
    color: #ffffff;
}

You can also change the color of each caption individually by entering HTML code such as the following into the 'Caption' text fields of your Media Library images:

<span style="color: #ffffff;">Caption Text Goes Here</span>

  • Registered: 2012-09-12
  • Posts: 8

Re: Text too hard to read, need to change opacity or make text white

Steven wrote:

Try adding the Pro Option:

textColor="rgba(255,255,255,1)"

... in the WP-Juicebox 'Pro Options' text area of your gallery's settings.

This does not change the caption color. If you look at this gallery, which has the options above added, and a mixture of title and captions, you will see that the captions are still dark gray:

http://inside.akronchildrens.org/2012/0 … s-spirits/

Otherwise, your could add the following code to the end of the 'wp-juicebox/jbcore/classic/theme.css' file:

.jb-caption-title{
    color: #ffffff;
}

This does work if the title field is filled out. What would be the CSS fix so the captions show as white? I tried to add

.jb-caption{
    color: #ffffff;
}

but that did not work


You can also change the color of each caption individually by entering HTML code such as the following into the 'Caption' text fields of your Media Library images:

<span style="color: #ffffff;">Caption Text Goes Here</span>

That's not really an option for us for the way our workflow is structured.

Thanks for your help. At least I'm half way there.

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

Re: Text too hard to read, need to change opacity or make text white

.jb-caption-title is, indeed, for the <title>. For the <caption>, use:

.jb-caption-desc {
    color: #ffffff;
}
  • Registered: 2012-09-12
  • Posts: 8

Re: Text too hard to read, need to change opacity or make text white

Perfect! Thanks so much for the help. Juicebox is a wonderful gallery tool that has been a great addition to our site.

  • Registered: 2015-11-18
  • Posts: 1

Re: Text too hard to read, need to change opacity or make text white

Ancient post, I know...but is there a CSS selector for the "ImageNumber" that displays to the right of the caption box?

I modified the CSS in theme.css to set a more suitable color for the <title> and <caption> text, but would like to get the "1 of 20" text to match...

Thank you!

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

Re: Text too hard to read, need to change opacity or make text white

@winglet

As noted above, you can change the color for all gallery text via the textColor configuration option (in JuiceboxBuilder-Pro's 'Customize -> Lite' section).

If you want to change the color of only the image number in the caption area, then you can use the following CSS (changing the color value as necessary):

/* IMAGE NUMBER */
.jb-cap-frame .jbac-number {
    color: #ff0000 !important;
}

For more information on formatting image titles and captions, please see this forum thread.