• Registered: 2014-01-22
  • Posts: 14

Topic: CSS font options

I've seen some helpful tips on how to use CSS to change fonts for captions, for image titles, and for gallery titles in large-screen mode.  Can you provide a more complete listing of such possibilities?  The two elements for which I'd like to change fonts are:

1. Gallery titles in small-screen mode
2. Image numbers

Thanks,
Patrick

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

Re: CSS font options

You can set a global font for all text in your gallery using the galleryFontFace configuration option (in JuiceboxBuilder-Pro's 'Customize -> General' section).
Please see the General Options section of the Config Options page for a short description of this configuration option.
This is the recommended way to set a font for a gallery. The tips you have seen may have been posted prior to galleryFontFace being introduced (in v1.3.0) and the CSS modifications were probably the only way to achieve font changes at the time.
If you really want to change the font for only a particular section of your gallery, then the best way to figure out which classes and ids you have to apply your custom CSS rules to would be to inspect your gallery with a browser's developer tools (usually accessed by hitting F12) or by searching through the gallery's 'jbcore/classic/theme.css' file. There is no official list of which classes and ids refer to which elements as these could change between versions.

  • Registered: 2014-01-22
  • Posts: 14

Re: CSS font options

Just to be clear, I'd like to be able to change font *sizes*, not just font faces. 

Maybe it's a bit clunky to do this via CSS, but if there's no other way, I'm happy to do it that way.  But I thought you might be able to save me some time and avoid going through the 1000 lines of CSS code in theme.css...

The tips that I'm referring to are not from prior to v.1.3.0 days; the tips were posted last month:

http://juicebox.net/forum/viewtopic.php?id=1347

-Patrick

  • Registered: 2014-01-22
  • Posts: 14

Re: CSS font options

After a bit of looking around, I came up with this short list (and some examples of font sizes):

            /* font for gallery title in small-screen mode (above thumbnails) */
            .jb-idx-title .jb-idx-ssm-title-wrapper {font-size: 18px !important;}  
            
            /* font for page numbers in small-screen mode (typically below thumbnails) */
            .jb-idx-thb-list-page-number {font-size: 13px !important;}  
            
            /* font for image title in caption */
            .jb-caption .jb-caption-title {font-size: 13px !important;}  
            
            /* font for caption text */
            .jb-caption p {font-size: 10px !important;}  
            
            /* font for image numbers in caption */
            .jb-cap-frame .jbac-number {font-size: 13px !important;}

-Patrick

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

Re: CSS font options

You can change font sizes in image titles and captions by using HTML formatting as documented in this FAQ:
How do I add HTML formatting to image captions and titles?

You can do likewise with the Gallery Title and Back Button Text:
How do I add HTML formatting to the Gallery Title or Back Button?

Other font sizes (for example for the image number) would have to be changed via CSS.

But I thought you might be able to save me some time and avoid going through the 1000 lines of CSS code in theme.css...

Unfortunately, as I mentioned, there is no list mapping classes to elements and I would just need to do the same as yourself (use a browser's developer tools to determine the relevant classes or rifle through the 'theme.css' file).

I am glad that you have found what you were looking for.
Thank you for sharing your findings. Hopefully it will help others.