• Registered: 2014-03-02
  • Posts: 16

Topic: Caption colours

Hi. I recently visited my website where I have three separate Juicebox galleries, after making a few additions to one gallery. Although the captions looked normal (white) on the Juicebox browser, after uploading , I saw that they were the background colour of the page (dark violet) and unreadable on the web. I then checked the other two galleries and although I had not touched them, they were also displaying the dark, unreadable text. (Incidentally and perhaps coincidentally, an Adobe Air update came through before I posted to my site). Anyhow, I tried running the gallery through to check my setting which were all correct and reloaded the config file, the index file plus the jbcore file, all to no avail. Eventually I solved the problem by manually going into the theme.css files on all three galleries and specifying #fff for all titles and captions. Can you shed any light on this?

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

Re: Caption colours

Although the captions looked normal (white) on the Juicebox browser, after uploading , I saw that they were the background colour of the page (dark violet) and unreadable on the web.

It sounds like you web page might be using global CSS rules which the gallery is inheriting (and which are overriding the gallery's own CSS). Please check to see if this is the case and, if it is, use more specifically-targeted CSS (using ids or classes) to apply your custom CSS rules to only those elements on your web page which require them.
If you'd like me to take a look, please revert the change you made to the 'theme.css' file (so that I can see the problem) and post the URL to your gallery's web page.
If you don't want to revert the changes to your live web site, perhaps you could copy the page, revert the changes in the copy and post the URL to the copy instead.

  • Registered: 2014-03-02
  • Posts: 16

Re: Caption colours

Sounds logical. However, I wasn't able to sort it out for myself... looks like all the Juicebox CSS was very specific and no overlaps in class. So, here's the three bits I added with "color: #fff" added to each:

.jb-caption .jb-caption-title {
    font-size: 17px;
    cursor:default;
    color: #fff;
}

.jb-caption p
{
    margin-bottom: 0 !important;
    margin-right: 72px;    /* equal to "width" in .jb-cap-frame .jbac-number; margin-top is set in code in order to hide the top margin when there is no desc */
    margin-left: 0;
    font-size: 13px;
    line-height: 23px;
    cursor:default;
    color: #fff;
}
.jb-caption a {
    color: #fff;
}

Here's the code for my style.css page:


/* CSS Reset
Copyright (c) 2015, Sandra Lamb, All rights reserved.
*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,table{border-collapse:collapse;border-spacing:0;}li{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}
   
/* Default Page Setup */

A:link {text-decoration: none; color: #FFFFFF;}
A:visited {text-decoration: none; color: #FFFFFF;}
A:hover {text-decoration: none; color: #9E809E;}
A:active {text-decoration: none; color: #FFFFFF;}

#content {margin: 50px auto; width: 824px;}


IMG {border: none;}

body
    {
    background-color: #473547;
    background-repeat: no-repeat;
    margin-left: 0;
    margin-top: 0;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #FFFFFF;
    }
   
H1
    {
    font-size:20px;
    font-weight:bold;
    color:#FFB24E;
    margin-bottom:0px;
    }
       
H2
    {
    font-size:16px;
    color:#FFB24E;
    margin-top:0;
    margin-bottom:0
    }
   
P
    {
    font-family:Arial, Helvetica, Verdana;
    font-size:14px;
    color:#3D4966
    }
   
P.date
    {
    font-size:20pt;
    color:#FFB24D
    }
   
.artistblurb
    {
    font-size: 14px;
    color:#FFFFFF
    }
   
span
    {
    font-family:Arial, Helvetica, Verdana;
    }
   
.caption
    {
    font-size: 14px;
    font-weight:bold;
    color:#FFFFFF
    }
   
.CV
    {
     font-size:14px;
     color:#FFB24D;
    }
   
.description
    {
     font-size:16px;
     font-style:italic;
     color:#D5BAD5;
    }
   
.mailfont
    {
     font-size:11px;
     color:#000000;
    }

.medium
     {
     font-size:20px;
     font-style:italic;
     color:#9E809E;
     }
     
.times
    {
    font-size: 14px;
    color:#C29FC2;
    }

.intro
    {
    font-size: 14px;
    font-style:italic;
    color:#9E809E;
    }
   
.classes
    {
    font-size: 14px;
    color:#C29FC2;
    }
   
.source
    {
    font-size: 14px;
    font-style:italic;
    color:#3D4966
    }
   
.smallhead
    {
    font-size: 16px;
    color:#FFB24D
    }
   
.smallitalichead
    {
    font-size: 16px;
    font-style:italic;
    font-weight:bold;
    color:#FFB24D;
    }
   
table
    {
     border:0px;
     border-collapse:collapse;
     border-spacing:0px;
    }

td
    { 
     border-width:0px 10px;
     padding:0px;
    }
   
.title
    {
     font-size:28px;
     color:#9E809E;
    }

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

Re: Caption colours

Your gallery's image title and caption text colors are being overwritten by the following code in your 'style.css' page.

P
    {
    font-family:Arial, Helvetica, Verdana;
    font-size:14px;
    color:#3D4966
    }

This code sets the color for all text within all <p> tags within your web page, including those within your gallery.
(A gallery's image title and caption text is displayed within <p> tags.)

Solutions would be to modify the Juicebox CSS (as you have done in the gallery's 'theme.css' file) or to apply your custom CSS rules to only those elements on your web page which require them through use of CSS selectors.
For example:

p.custom {
    font-family: Arial, Helvetica, Verdana;
    font-size: 14px;
    color: #3D4966;
}
<p class="custom">This text will have the 'p.custom' CSS rules applied to it.</p>
  • Registered: 2014-03-02
  • Posts: 16

Re: Caption colours

Thanks Steven - I suspected you would have better/fresher eyes than mine. I will give it a go.