Topic: Using multiple fonts in Juicebox (how to?) [SOLVED]

Is there a quite simple way (via HTML formatting or custom CSS) to use multiple fonts in Juicebox Pro (e.g. a regular font for the caption, a bold font for the image title in caption and a black font for the gallery title)?

Re: Using multiple fonts in Juicebox (how to?) [SOLVED]

You can set a font family and color for all gallery text (globally) via the galleryFontFace ('Customize -> General') and textColor ('Customize -> Lite') configuration options respectively.

You can style all image titles and captions at once using CSS such as the following (using whatever CSS properties and values you like):

/* IMAGE TITLE */
.jb-caption .jb-caption-title {
    font-family: Courier !important;
    font-size: 20px !important;
    color: #000000 !important;
}

/* IMAGE CAPTION */
.jb-caption .jb-caption-desc {
    font-family: Courier !important;
    font-size: 18px !important;
    color: #000000 !important;
}

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

Depending where you set the CSS, you might find that you need to use !important (as above) to override Juicebox's own CSS rules.

You can also style the Gallery Title and individual image titles and captions using HTML formatting as noted in these FAQs:
How do I add HTML formatting to image captions and titles?
How do I add HTML formatting to the Gallery Title or Back Button?

A sample caption with a font-family of Courier, a font-size of 12px an a color of black (for example) would look like this:

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

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

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

(If you enter the image caption directly into JuiceboxBulder-Pro's interface, the  the application will automatically add the <caption> and CDATA tags so you need only enter the <span> tag (as above).

I hope this helps.

Re: Using multiple fonts in Juicebox (how to?) [SOLVED]

Steven,
Thanks a lot.
Concerning the title of the gallery and using your method, it would give in my opinion the following code. Is it correct?
Thank you in advance.


/* GALLERY TITLE AREA */
.jb-idx-ssm-title-wrapper {
    font-family: Courier !important;
    font-size:16px; !important;
    color:inherit; !important;
}

.jb-flag-large-screen-mode .jb-area-large-mode-title {
    position: absolute; !important;
    top: 10px; !important;
    padding: 5px 10px 5px 10px; !important;
    color: #FFFFFF; !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4), 0 0 5px rgba(0,0,0,0.2); !important;
    font-family: Courier !important;
    font-size: 18px; !important;
    outline: none; !important;
    border: none; !important;
    cursor:default; !important;
}

Re: Using multiple fonts in Juicebox (how to?) [SOLVED]

If you want to style the Gallery Title using CSS, then try something like the following:

/* GALLERY TITLE - LARGE SCREEN MODE */
.jb-area-large-mode-title {
    font-family: Courier !important;
    font-size: 12px !important;
    color: #000000 !important;
}

/* GALLERY TITLE - SMALL SCREEN MODE */
.jb-idx-ssm-title-wrapper {
    font-family: Courier !important;
    font-size: 12px !important;
    color: #000000 !important;
}

Re: Using multiple fonts in Juicebox (how to?) [SOLVED]

Steven,
It works (solved!).
Thanks a lot, again.
Best regards.

Re: Using multiple fonts in Juicebox (how to?) [SOLVED]

You're welcome!