• gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Topic: Caption font style/size/position behaviour altered with 1.5 [SOLVED]

Hi,

first off ... thanks for the auto-hide thumbnails.  I requested this a long time ago and it's really nice to see it in there.

I have a slight issue with Caption font style/size/position behaviour in 1.5 which has changed from previous versions for me.

I use some custom css in Freeway Pro to alter Caption position and font size for my embedded galleries.  I have noticed on the only gallery that I've upgraded to so far, that the font is not being positioned where it was previously and appears to be a larger size, or perhaps it's being put in bold (hard to tell from Safari's rendering).

This is the upgraded 1.5 gallery:
http://www.grantsymon.com/e/Food.html

All other galleries are 1.4x

NB, not all images have a caption.

Any idea what's going on?

This is the CSS I have added:

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Della+Respira|Alegreya+Sans:300,400|Droid+Serif:400,700,400italic,700italic' rel='stylesheet'>

<style type="text/css">
    .fwNavItem a {
    -webkit-backface-visibility: hidden;
        -moz-transition: all .5s;
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }
   body { 
-webkit-font-smoothing: subpixel-antialiased;
-webkit-backface-visibility: hidden;
}
.jb-caption p {
    font-size: 11px !important;
    line-height: 11px !important;
}
 .jb-cap-frame .jbac-number {
font-size: 11px !important;
}  

 .jb-idx-thb-list-page-number {
font-size: 11px !important;
}

/* Image number */
.jb-cap-frame .jbac-number {
    margin-top: 20px !important;
}

/* Image Caption */
.jb-caption p {
    margin-top: 20px !important;
}
  • Registered: 2012-04-24
  • Posts: 5,905

Re: Caption font style/size/position behaviour altered with 1.5 [SOLVED]

first off ... thanks for the auto-hide thumbnails.  I requested this a long time ago and it's really nice to see it in there.

I'm glad you like it!


... the font is not being positioned where it was previously...

I'm pretty sure this is due to the following custom CSS:

/* Image number */
.jb-cap-frame .jbac-number {
    margin-top: 20px !important;
}

Try removing it for your v1.5.0 galleries. Hopefully it will help.

... and appears to be a larger size, or perhaps it's being put in bold...

It looks like it's just a larger size (rather than being bold).
Try using the following classes for changing image title, image caption and image number font sizes.

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

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

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

I hope this helps.

  • Registered: 2012-05-01
  • Posts: 94

Re: Caption font style/size/position behaviour altered with 1.5 [SOLVED]

Classes definitions for caption are changed in JB 1.5. I had a similar problem.

Steven wrote:

first off ... thanks for the auto-hide thumbnails.  I requested this a long time ago and it's really nice to see it in there.

I'm glad you like it!


... the font is not being positioned where it was previously...

I'm pretty sure this is due to the following custom CSS:

/* Image number */
.jb-cap-frame .jbac-number {
    margin-top: 20px !important;
}

Try removing it for your v1.5.0 galleries. Hopefully it will help.

... and appears to be a larger size, or perhaps it's being put in bold...

It looks like it's just a larger size (rather than being bold).
Try using the following classes for changing image title, image caption and image number font sizes.

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

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

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

I hope this helps.

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

Re: Caption font style/size/position behaviour altered with 1.5 [SOLVED]

There have been many changes to the 'theme.css' file since the last version of Juicebox (v1.4.4.2) but the code I posted above, I also posted here on 23 October 2015, long before v1.5.0 was released.
In any case, I hope the code helps.  (It certainly differs from the code in the original post above.)

5 Reply by gfs (edited by gfs 2016-06-06 10:24:22)

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Caption font style/size/position behaviour altered with 1.5 [SOLVED]

... the font is not being positioned where it was previously...
I'm pretty sure this is due to the following custom CSS:

/* Image number */
.jb-cap-frame .jbac-number {
    margin-top: 20px !important;
}

Try removing it for your v1.5.0 galleries. Hopefully it will help.

Thanks Steven.

After trying the various options, the code below works as before.  The only necessary change was to the Caption size. ".jb-caption-desc" in place of ".jb-caption p".  The list-page-number code was redundant so I removed it:

/* Image Caption size */
.jb-caption .jb-caption-desc {
    font-size: 11px !important;
    line-height: 11px !important;
}

/* Image number size  */
 .jb-cap-frame .jbac-number {
font-size: 11px !important;
}  

/* Image number position */
.jb-cap-frame .jbac-number {
    margin-top: 20px !important;
} 

/* Image Caption position */
.jb-caption .jb-caption-desc {
    margin-top: 20px !important;
}
  • Registered: 2012-04-24
  • Posts: 5,905

Re: Caption font style/size/position behaviour altered with 1.5 [SOLVED]

I'm glad you've got it working again.
Thank you for letting me know.