Problem adding See Caption text in lightbox

mylifeinfocus

I've tried a few times to add the "See Caption" text to my photo captions as explained here:
http://www.aaronmphotography.com/Customizations/Lightbox/Add-See-Caption

While it does appear, for some reason it's wrapped on two lines so what I see first is the ^ symbol, then when I mouse over it to pull up the full caption, I see the word "See" on one line and "Caption" squished underneath. I'm not sure what I'm doing wrong that it won't appear as it's supposed to (on a single line). I've already expanded the width of my caption box, so it should have plenty of room.

This is the code I used to put in the CSS of my theme (below). I've tried changing both items in red, but nothing seems to change (other than the font size, but now it's just tiny AND wrapped on two lines):

/* Make the arrow before "See Caption" red */
.sm-lightbox-info-arrow.sm-fonticon {
color:red !important;
}
.sm-lightbox-info-arrow { width: 180px

; }

/* Add the text "See Caption" and set it to red */
.sm-lightbox-info-arrow.sm-fonticon:after {
content:" See Caption";
color:red;
font-size: 16pt;
font-weight:normal !important;
}

/* Align the text to the left */
.sm-lightbox-info {
text-align: left !important;
}

Any tips would be greatly appreciated. My site is www.alicethompsonphotography.com

Thanks!

DanCarl97

mylifeinfocus wrote: »

I've tried a few times to add the "See Caption" text to my photo captions as explained here:
http://www.aaronmphotography.com/Customizations/Lightbox/Add-See-Caption

While it does appear, for some reason it's wrapped on two lines so what I see first is the ^ symbol, then when I mouse over it to pull up the full caption, I see the word "See" on one line and "Caption" squished underneath. I'm not sure what I'm doing wrong that it won't appear as it's supposed to (on a single line). I've already expanded the width of my caption box, so it should have plenty of room.

This is the code I used to put in the CSS of my theme (below). I've tried changing both items in red, but nothing seems to change (other than the font size, but now it's just tiny AND wrapped on two lines):

/* Make the arrow before "See Caption" red */
.sm-lightbox-info-arrow.sm-fonticon {
color:red !important;
}
.sm-lightbox-info-arrow { width: 180px

; }

/* Add the text "See Caption" and set it to red */
.sm-lightbox-info-arrow.sm-fonticon:after {
content:" See Caption";
color:red;
font-size: 16pt;
font-weight:normal !important;
}

/* Align the text to the left */
.sm-lightbox-info {
text-align: left !important;
}

Any tips would be greatly appreciated. My site is www.alicethompsonphotography.com

Thanks!

Try using this code instead (adapted from Aaron's):

/* Make the arrow before "See Caption" red */
.sm-lightbox-info-arrow.sm-fonticon {
   color:red !important;
}
.sm-lightbox-info-arrow { width: 180px !important; }

/* Add the text "See Caption" and set it to red */
.sm-lightbox-info-arrow.sm-fonticon:after {
   content:" See Caption";
   color:red;
   font-size: 16pt;
   font-weight:normal !important;
}

/* Align the text to the left */
.sm-lightbox-info {
  text-align: left !important;
}

mylifeinfocus

PERFECT! Thank you, DanCarl! I appreciate your help!

mylifeinfocus

How would I go about changing the font to match the font in my caption (which is Titillium Web)? I thought it would be this section here, but that didn't work:

/* Add the text "See Caption" and set it to red */
.sm-lightbox-info-arrow.sm-fonticon:after {
content:" See Caption";
color:red;
font: titillium web;
font-size: 16pt;
font-weight:normal !important;
}

DanCarl97

Change font to font-family.

font-family: titillium web;

mylifeinfocus

DanCarl97 wrote: »

Change font to font-family.

font-family: titillium web;

Thank you! Thank you! Much appreciated! (I forgot "font-FAMILY". Duh.) :-)