Gallery names cutoff in SmugMug Theme

southeasternphotography · August 24, 2013

SmugMug theme

My legacy SmugMug theme allowed for long gallery names. It would wrap them to the next line under the gallery image. It then adjusted the spacing between rows of galleries. My naming conventions took this into account. The NEW SmugMug theme does not wrap the line. It simply cuts the line off with no way to see what it says. Thanks alot. I even have the names set up to be UNDER the image in the space between rows. I am requesting that these name lines be capable of wrapping under the image. If not, then I request that an quick to open info box to open when hovering over the name or box (if it is a single gallery with no galleries beneath it.

As it is, I have used text to describe the gallery with the event date at the END of the name. Now, many times, the date is cut off. Not very friendly for my clients and actually looks BAD.

Example here:

http://www.southeasternphotography.com/History/Hofwyl-Broadfield

Andy · August 25, 2013

The link you give is to legacy SM

Allen · August 25, 2013

Andy wrote: »

The link you give is to legacy SM

He hasn't unveiled yet so all you can see is legacy.

Andy · August 25, 2013

Well then. We can't help, can we?

Allen · August 25, 2013

southeasternphotography wrote: »

SmugMug theme

My legacy SmugMug theme allowed for long gallery names. It would wrap them to the next line under the gallery image. It then adjusted the spacing between rows of galleries. My naming conventions took this into account. The NEW SmugMug theme does not wrap the line. It simply cuts the line off with no way to see what it says. Thanks alot. I even have the names set up to be UNDER the image in the space between rows. I am requesting that these name lines be capable of wrapping under the image. If not, then I request that an quick to open info box to open when hovering over the name or box (if it is a single gallery with no galleries beneath it.

As it is, I have used text to describe the gallery with the event date at the END of the name. Now, many times, the date is cut off. Not very friendly for my clients and actually looks BAD.

Example here:

http://www.southeasternphotography.com/History/Hofwyl-Broadfield

I removed the icon in front and reduced the text size and it helped some although
real long ones still get cut off.

.sm-tile-folder .sm-tile-type-icon:after, 
.sm-tile-album .sm-tile-type-icon:after {
  display: none;
}

     /* titles on featured images in folders */
.sm-tiles-grid ul li a p {
  font-size: 95%!important;
  padding-left: 0!important;
  padding-right: 0!important;
  color: gold!important;
}

southeasternphotography · August 25, 2013

Thanks Allen for the real help. ANdy, I hope was being funny. Yes, the link was to legacy so you can see the wrapping text. Go try that in the New SmugMug. The way you can help is to get something done in the New SMugMug theme. Like, I said, I hope you were joking. Allen, I will look deeper in what you presented tomorrow.

southeasternphotography · August 25, 2013

@Allen - Thanks - that DID help alot...not perfect but much better. I have tried to add a "text-align: center" to your code so the text below the folders will center up; but can't get it to do anything. Can you help again?

Allen · August 25, 2013

southeasternphotography wrote: »

@Allen - Thanks - that DID help alot...not perfect but much better. I have tried to add a "text-align: center" to your code so the text below the folders will center up; but can't get it to do anything. Can you help again?

Right, left and center works but doesn't help the long ones. We need wrap.
"all folders" CSS

.sm-tiles-grid ul li a p {
  font-size: 95%!important;
  padding-left: 0!important;
  padding-right: 0!important;
  color: gold!important;
  [COLOR=Red]text-align:center;[/COLOR]
}

southeasternphotography · August 25, 2013

Hey Allen - tried that in various places in your code. Didn't work. Just went back and tried again - no workee! Not from the top level down.

Darter02 · September 8, 2013

@ Allen. I mentioned this on the other thread where I saw your fix, but there are so many posts I thought I'd ask this question here.

I modified your code to work with my Collage Lanscape themed galleries. It works great! Thanks for posting this.

Here's what I used, the red is the bit I changed to affect Collage Landscape.

/* titles on thumbs in folders */
[COLOR="Red"].sm-tiles-row-organic[/COLOR] ul li a p {
  font-size: 100%!important;
  padding-left: 0!important;
  padding-right: 0!important;
  color: #f3f3b2!important;
  text-align:left;
  overflow: visible !important;
  white-space:normal !important;
  height: 41px !important;
}

Now, I redesigned one of my pages, and created a vertical row on the far right (you'll see the girl in a loincloth at the top of the row) that uses the standard Vertical Layout. I've tried and tried to sort out the correct code to replace, or add to that red line above. No luck, and I'm about done in for the night. Would you happen to know what it would be?

Darter02 · September 8, 2013

southeasternphotography wrote: »

Hey Allen - tried that in various places in your code. Didn't work. Just went back and tried again - no workee! Not from the top level down.

You have to use the specific gallery style that code is aimed at. I can't tell if you are or not. Did you place it in your entire site's theme CSS? It's in the Theme>Advanced Tab.

Allen · September 9, 2013

Darter02 wrote: »
@ Allen. I mentioned this on the other thread where I saw your fix, but there are so many posts I thought I'd ask this question here.

I modified your code to work with my Collage Lanscape themed galleries. It works great! Thanks for posting this.

Here's what I used, the red is the bit I changed to affect Collage Landscape.
/* titles on thumbs in folders */
[COLOR=Red].sm-tiles-row-organic[/COLOR] ul li a p {
  font-size: 100%!important;
  padding-left: 0!important;
  padding-right: 0!important;
  color: #f3f3b2!important;
  text-align:left;
  overflow: visible !important;
  white-space:normal !important;
  height: 41px !important;
}
Now, I redesigned one of my pages, and created a vertical row on the far right (you'll see the girl in a loincloth at the top of the row) that uses the standard Vertical Layout. I've tried and tried to sort out the correct code to replace, or add to that red line above. No luck, and I'm about done in for the night. Would you happen to know what it would be?

Can't get my right click menu so no way to inspect the element to find the classes.

Darter02 · September 9, 2013

DOH! I forgot to turn it off. I just did for that gallery. Sorry about that.

I've tried .sm-tiles-vertical, .sm-tile-portrait, .sm-tiles-list, and a bunch of other ones. No dice so far.

Allen · September 9, 2013

Darter02 wrote: »

DOH! I forgot to turn it off. I just did for that gallery. Sorry about that.

I've tried .sm-tiles-vertical, .sm-tile-portrait, .sm-tiles-list, and a bunch of other ones. No dice so far.

This seems to get it. Got everything up the line, probably don't need all of them.

  /* titles on thumbs in folders */
[COLOR=Red].sm-tiles-vertical .sm-tile-album .sm-tile .sm-tile-content .sm-tile-info .sm-tile-title,[/COLOR]
.sm-tiles-row-organic ul li a p {
  font-size: 100%!important;
  padding-left: 0!important;
  padding-right: 0!important;
  color: #f3f3b2!important;
  text-align:left;
  overflow: visible !important;
  white-space:normal !important;
  height: 41px !important;
}

Might try "auto" instead of "41px" height.

You could even add the widget number so it doesn't affect other pages.
.sm-page-widget-2081362 .sm-tiles-ve.....

Darter02 · September 9, 2013

That did the trick! And thanks for the tip on using "auto." It looks much better over all.

I did notice something odd though. It doesn't bother me, just thought I'd point it out. This CSS trick causes any gallery description to fill up the "Recent Galleries" block if you set it to Collage Landscape.

Allen · September 9, 2013

Darter02 wrote: »

That did the trick! And thanks for the tip on using "auto." It looks much better over all.

I did notice something odd though. It doesn't bother me, just thought I'd point it out. This CSS trick causes any gallery description to fill up the "Recent Galleries" block if you set it to Collage Landscape.

Did you put in the specific widget number?
.sm-page-widget-2081362 .sm-tiles-ve.....

Darter02 · September 9, 2013

Actually, I noticed before I made this recent change. When I had just the ".sm-tiles-row-organic." I didn't add the specific widget as I may format other galleries like this one, so I want it to work all across the board. The recent galleries block is on the tail end of my search page, so I'm not concerned about it. Others may notice it if they have it on their front page though.

starrynight · September 12, 2013

Yay! the code at the top worked for me and my gallery names now appear in a useable form. Thanks Allen! I'm still not sure how I finally got it to work, but I think 1) customize 2) homepage 3) theme 4) toolbar 5) advanced pasting in the code 6) naming theme 7) done 8) publish worked
(still not unveiled).

southeasternphotography · September 17, 2013

BUMP - Not Fixed
BUMP - I still have the original problem in Preview. So, normal folks cannot see my problem. Is SmugMug going to help here? OR is the answer - and it should be stated or a warning given - that you are limited to the number of characters that will be presented. Legacy does not have this problem with the SmugMug Theme.

southeasternphotography · September 19, 2013

Showing Example - Legacy
Here is how Legacy treated longer names:

southeasternphotography · September 19, 2013

Showing Example - New System
Here is how the New system SmugMug Theme cuts off the names (and my dates!)

basflt · September 19, 2013

i checked Darter02 site ;http://www.dgrin.com/showpost.php?p=1908883&postcount=10
looks like " white-space:normal !important; " does the trick on the wrapping bit

guy · September 20, 2013

Allen wrote: »
This seems to get it. Got everything up the line, probably don't need all of them.
  /* titles on thumbs in folders */
[COLOR=Red].sm-tiles-vertical .sm-tile-album .sm-tile .sm-tile-content .sm-tile-info .sm-tile-title,[/COLOR]
.sm-tiles-row-organic ul li a p {
  font-size: 100%!important;
  padding-left: 0!important;
  padding-right: 0!important;
  color: #f3f3b2!important;
  text-align:left;
  overflow: visible !important;
  white-space:normal !important;
  height: 41px !important;
}
Might try "auto" instead of "41px" height.

You could even add the widget number so it doesn't affect other pages.
.sm-page-widget-2081362 .sm-tiles-ve.....

Allen just came across this, thanks very much just added to my site & really like it. Hated those cut off titles.

Also used your bit of css to get rid of the icon so the text does not have to wrap around it & even made the text a bit bigger.

Gallery names cutoff in SmugMug Theme

Comments