Folders/ captions questions

dlynne

1. Is there code available to hide captions on folders or galleries until the photo is moused over? (as seen on http://www.lostonmarsphotography.com/Galleries/Lakes/, featured recently on the SmugMug blog.

2. I have successfully changed font size and color on gallery captions but can't find how to do the same on folders. In the meantime I have chosen to place folder captions under the photos for better readability, but that would not be my first choice.

http://www.debbielynne.smugmug.com/browse//

Thank you for your time and assistance.

Debbie Lynne

DanCarl97

For the first question, you've almost answered it in your second. Where you've changed where the caption should be (Info Style), the option below that should be 'Info Hover' where you can set this to 'Show'.

For the second question, do you mean that you've used custom CSS to change the colour for galleries but haven't got it to work for folders?

dlynne

Thank you Dan, I missed that one!


Is the info hover option available for the photo captions in galleries?
I don't see any similar choice so I assume it is not but thought it best to ask!

Additional Question:

Is there a way to have the shaded caption area lighter? (when choosing captions beneath option.) I am thinking it is influenced by the theme color, i.e. white backgrounds have very light shading. Please advise... Thank you in advance.

Regarding changing the font for folders I have just found some code that worked for that.

http://debbielynne.smugmug.com/In-The-Garden/November-2013/
http://www.debbielynne.smugmug.com/browse//

Debbie Lynne

DanCarl97

dlynne wrote: »

Is the info hover option available for the photo captions in galleries?
I don't see any similar choice so I assume it is not but thought it best to ask!

It is actually available for galleries. There are a few extra steps. Unfortunately, I'm unsure if you can modify site-wide at this time.

Customise > Customise Site

Then click the spanner on the gallery content area. This will bring up settings for the different gallery styles. If you choose the one you're using, you will get a dialogue similar to that for folders and can change the "Info Hover" option.

dlynne wrote: »

Additional Question:

Is there a way to have the shaded caption area lighter? (when choosing captions beneath option.) I am thinking it is influenced by the theme color, i.e. white backgrounds have very light shading. Please advise... Thank you in advance.

You can indeed change the appearance of the caption area but CSS will be involved.

You can use the .sm-user-ui .sm-tile-content > .sm-tile-info selector. It must be a specific sleector in order to override Smugmug's formatting.

For example, if I wanted to make my caption background cyan with 50% transparency, I could use:

.sm-user-ui .sm-tile-content > div.sm-tile-info {
	background-color: rgba(0,191,255, 0.5);
}

The colour must be in the rgba format (red, green, blue, alpha) because using the opacity styling will also effect the text opacity.

You can obtain this value by looking up some colour charts or using a picker, both available on this site. You will want the 'Decimal Code', not the 'Hex' code. If you use the colour picker, the R, G and B fields are the RGB values. The last decimal number of course is the transparency between 0 and 1, 0 being complete transparency and 1 being no transparency.

Cyan caption background doesn't look so bad actually!

DanCarl97

You're question actually inspired me to change mine... At least when you hover over the thumbnails.

http://www.meljones.info/galleries

Added a nice transition too!

If anyone is wondering, this is the code I used:

/* Change Caption Colour On Hover */

.sm-user-ui div:not(.sm-gallery-tiles-container) li:not(.sm-tile-photo) .sm-tile-content:hover > div.sm-tile-info {
	background-color: rgba(143,105,255, 0.8);
  color:white;
}
.sm-user-ui div:not(.sm-gallery-tiles-container) li:not(.sm-tile-photo) .sm-tile-content:hover > div.sm-tile-info .sm-tile-title {
  color:white;
}

.sm-user-ui .sm-tile-content > div.sm-tile-info, .sm-user-ui .sm-tile-content > div.sm-tile-info .sm-tile-title {
transition: 0.5s;
-webkit-transition: 0.5s; /* Safari */
}

There's quite a lot there because I wanted it to appear for all captions type areas except on images.