Slideshow - How to put photo captions "below" slideshow?

Bluegrass

Hi -

When using a Slideshow, is there a way to make the captions display "below" the photo instead of across the bottom?

I used the instructions in the following thread to remove the grey box which helped the photos look better but now it's difficult to read the captions. http://www.dgrin.com/showthread.php?t=253690&highlight=slideshow+caption

My preference is to move the caption below the photos in the slideshow but in case that can't be done, my second choice would be to make the caption darker and bolder. However, it also appears to me that the caption is also displaying a little too far left (instead of being in line with the left margin of the photo) and I'm not sure how to solve that, either.

I am still just experimenting on sample pages in the sandbox, but if it would help to see what I've done so far, here is a link to the page =>
http://www.pearlbluegrass.com/NEWSmugMug-Files/NEW-Stage-Shows/NEWSS/n-LDZvg2

I haven't published anything yet but made this page accessible if you have the link. However, I'm not sure it will display in the New SmugMug for you unless you're logged in as me. If not, maybe you can get the idea about what I'm trying to do just by my explanation above.

I will really appreciate the help if anyone has time to advise me about this.
Thx!
...Sue

Allen

Might try posting a screen shot if you think that would help to understand what you want.

Bluegrass

Allen wrote: »

Might try posting a screen shot if you think that would help to understand what you want.

Thank you, Allen. I am going to post 4 screen shots with more information, below.

Bluegrass

bluegrass wrote: »

thank you, allen. I am going to post 4 screen shots with more information, below.

screen shot #1
===========

Bluegrass

Screen shot #2
===========

Bluegrass

Screen shot #3
===========

Bluegrass

Screen shot #4
===========

Bluegrass

Code I am using
==========
.sm-tile-content {
overflow: visible;
}

.sm-tile-content > .sm-tile-info {
background-color: rgba(0, 0, 0, 0) !important;
}

.sm-page-widget-slideshow .sm-tile-single.sm-tiles-uncropped .sm-image {
max-width: 90%;
border: 24px solid white;
box-shadow: 10px 10px 10px #1e1e1e;
-webkit-box-shadow: 10px 10px 10px #1e1e1e;
-moz-box-shadow: 10px 10px 10px #1e1e1e;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}

* I had also added a couple lines, as follows, trying to change the color of the font but that didn't work.
.sm-tile-content > .caption {color: #fff;}
.slideshow .caption {color: #fff;}

Bluegrass

Okay, I was able to modify the code to be able to have the captions for each photo in a slideshow appear in the bottom border which moved the caption off of the photo and made it more readable.

Here's a link to an example screenshot
========================
http://www.pearlbluegrass.com/photos/i-3ctCd6s/1/XL/i-3ctCd6s-XL.jpg

Here's the code I put in a CSS content block
===========================
.sm-page-widget-slideshow .sm-tile-single.sm-tiles-uncropped .sm-image {
max-width: 89%;
border-top: 1px solid white;
border-right: 1px solid white;
border-bottom: 20px outset white;
border-left: 1px solid white;
box-shadow: 10px 10px 10px #1e1e1e;
-webkit-box-shadow: 10px 10px 10px #1e1e1e;
-moz-box-shadow: 10px 10px 10px #1e1e1e;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
.
NEW RELATED QUESTION
================
How can I display the caption below (or above) each photo in a "Gallery Slideshow"?
- When I make the Gallery setting "Slideshow", the photo captions appear "on top" of each picture
- I tried adding a CSS content block with the above code to the Gallery page but that doesn't seem to work
- I sent an email to the SmugMug Help Heros who changed the color of the overlay to white which made the caption more readable but I don't want the overlay on top of the pictures
- There is a lot of space all around the photos in a Gallery Slideshow so I would like to be able to display a nice big, readable caption someplace outside of the photo like we could do with the "old" SmugMug
- Any ideas?