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

Topic: Changing font size of image titles and captions (and gallery title)

Unfortunately, there are no configuration options available within JuiceboxBuilder-Pro to change the font size of image titles and captions.

However, you can style individual image titles and captions (for example, to change the font size) using HTML formatting as noted in this FAQ:
How do I add HTML formatting to image captions and titles?

A sample caption with a font size of 12px (for example) would look like this:

<span style="font-size: 12px;">Image caption text goes here.</span>

In the gallery's XML configuration file, the caption would look like this:

<caption><![CDATA[<span style="font-size: 12px;">Image caption text goes here.</span>]]></caption>

... but JuiceboxBuilder-Pro will automatically add the <caption> and CDATA tags so you only need to enter the <span> tag (as above) into JuiceboxBuilder-Pro.
(You can do likewise for image titles.)

Otherwise, you can set the size of all image titles and/or captions at once using CSS such as the following (changing the numeric values as appropriate):

/* IMAGE TITLE */
.jb-caption .jb-caption-title {
    font-size: 20px !important;
}

/* IMAGE CAPTION */
.jb-caption .jb-caption-desc {
    font-size: 18px !important;
}

/* IMAGE NUMBER */
.jb-cap-frame .jbac-number {
    font-size: 12px !important;
}

You could add this CSS to the end of your gallery's 'jbcore/classic/theme.css' file or wrap it in <style type="text/css"> ... </style> tags and add it to the end of your gallery web page's <head> section.

If you want to change the font size for the Gallery Title, then you can do so using HTML formatting (just like the image titles and captions above).
Please see this FAQ for details:
How do I add HTML formatting to the Gallery Title or Back Button?

For example, you could enter a Gallery Title such as the following into JuiceboxBuilder-Pro's 'Customize -> Lite -> Gallery Title' field (changing the values as appropriate):

<span style="font-size: 48px;">Gallery Title text goes here.</span>

Alternatively, if you want to change the font size for the Gallery Title via CSS, then use the following (changing the numeric values as appropriate):

/* GALLERY TITLE - LARGE SCREEN MODE */
.jb-area-large-mode-title {
    font-size: 48px !important;
}

/* GALLERY TITLE - SMALL SCREEN MODE */
.jb-idx-ssm-title-wrapper {
    font-size: 48px !important;
}