Caption Location in Slideshow

kpatkau · Member · Sep 10, 2014 at 3:56 pm
Copy link

Add topic to favorites
Is there any way I can move the caption location in my slideshow? I would like the text to appear below all the images not on top of some of them. I’ve managed to get my site up and running, but have no experience with CSS.

Here’s the page:
http://karenpatkau.com/slideshow/

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Sep 10, 2014 at 7:16 pm
Copy link
Hi Karen,

When I try to view your slideshow page I get a message saying it doesn’t exist, the slideshow on your portfolio page has all the text at the bottom though. Is that where you meant? If not can you provide a working link to the page where the text is at the top of the slideshow too?
kpatkau · Member · Sep 11, 2014 at 4:11 pm
Copy link
Hi,
OK I fixed that. You can now see the portfolio slideshow if you click on PORTFOLIO in the menu.

My big problem is that the captions for all slides appear in the same location in the “area for images” within the slideshow. This means sometimes the text appears on top of an image and sometimes it appears below it – depending on the shape of the particular image.

I’d like to find a way for the captions to appear the same distance “below” all the different shaped images.
hallluke · Member · Sep 11, 2014 at 4:21 pm
Copy link
Hi Karen,

I see what you mean now: the caption is placed relative to the bottom of the tallest image you’ve used. If you don’t want to change the images so they all have the same height the easiest workaround would be to move the caption above the image, try this code out (it should work as long as our caption doesn’t wrap to more than one line):
```
.slideshow-slide-caption {
  top:5px;
}

.slideshow-slide img {
  position:relative;
  top:40px;
}
```
I’m struggling to find a way to position the caption a certain amount below the image with variable image heights. I’ll let you know if I do manage to think of anything though!
kpatkau · Member · Sep 11, 2014 at 4:47 pm
Copy link
Thanks so much! I’m happy with captions above the images.

Is there a way to change the type appearance to a plain 80% gray without the drop shadow? Like I said, I have no experience with coding.
hallluke · Member · Sep 11, 2014 at 5:39 pm
Copy link
Add this to your CSS:
```
.slideshow-slide-caption {
  color:#666;
  text-shadow:none;
}
```
kpatkau · Member · Sep 11, 2014 at 9:57 pm
Copy link
This is what is in my CSS now, but the text color and shadow have not changed from the original white with shadow.

.slideshow-slide-caption {
top: 5px;
}

.slideshow-slide img {
position: relative;
top: 40px;
}

.slideshow-slide-caption {
color: #666;
text-shadow: none;
}
hallluke · Member · Sep 11, 2014 at 10:24 pm
Copy link
Could you try switching the last bit with this:
```
#main .slideshow-slide-caption{
  color:#666;
  text-shadow:none
}
```
kpatkau · Member · Sep 11, 2014 at 10:29 pm
Copy link
That worked! Thank you!

No items found.