Smugmug style - move caption up

Allen · August 18, 2013

I played with moving the captions up to closer to the main photos in Smugmug Style gallery.
Moved photo number indicator out of way to left. Added the z-index's so share & right tools
are clickable.

Any thoughts? Does it work for everyone? Needs testing across platforms and browsers. Had to
move share down so photo indicator doesn't overlap it on small window.

I added this to "entire site CSS". Yellow, I had already in there.

   /* move caption up */
.sm-gallery-image-pagination {
   position: relative;
   float: left;
   z-index: 10; 
}

    /* caption center */
#sm-gallery .sm-tile-info {
[COLOR="Yellow"]  max-width: none;
  text-align: center;
  color: #000!important;[/COLOR]
  position: relative;
  top: -40px;
}

.sm-button-image-share {
   position: relative;
   z-index: 99;
   top: 30px; 
   left: -85px;
}

.sm-gallery-image-tools {
   position:relative;
   z-index:99;
}
   /* END move caption up */

pbandj · August 19, 2013

Didn't quite work for me; some of my captions are rather wordy and they overlapped the page numbers and "share" icons.

James_F · August 20, 2013

pbandj wrote: »

Didn't quite work for me; some of my captions are rather wordy and they overlapped the page numbers and "share" icons.

Hi: Saw you response above. I too have many long captions and had the same issue as you when I tried Allen's code. After reading through some CSS 'how to" web sites and using his code as a starting point, I tried this:

/* caption center */
#sm-gallery .sm-tile-info {
max-width: 80%;
text-align: justify;
color: ffffcc;
position: relative;
top: -45px;
left: 135px

The "top" negative number moves the caption closer to the image (the more the negative number, the closer it gets). The "left" number prevents overlapping the image numbers, adjust according to your taste. The text align of justify and the percentage of width control how wide the caption gets and how word wrap behaves.

I really don't know what I am doing with CSS code. It's just trial, and pot luck. That said, I think it vastly improved the caption situation that we both have. Check out http://jamesfarrell.smugmug.com/Site-Pages/The-West-and-Southwest-Parks/GrandTetonNP http://jamesfarrell.smugmug.com/Site-Pages/The-West-and-Southwest-Parks/GrandTetonNP look at some of the images with bigger captions and see if this looks like it might work for you.

It's not perfect by far. I want to try to figure out how to move the page indicator to the left a bit so I can move the caption to the left as well. And one small glitch ... if you shrink the browser window too much, the photo info icon overlaps with the caption. Don't know how to fix that. But that doesn't upset me too much. What I really like to do is to figure out how to put the photo info icon under the image number (to the left of the caption).

If any one has a better way to do all of this, please chime in.

VNemeth · August 20, 2013

Allen wrote: »
I played with moving the captions up to closer to the main photos in Smugmug Style gallery.
Moved photo number indicator out of way to left. Added the z-index's so share & right tools
are clickable.

Any thoughts? Does it work for everyone? Needs testing across platforms and browsers. Had to
move share down so photo indicator doesn't overlap it on small window.

I added this to "entire site CSS". Yellow, I had already in there.
   /* move caption up */
.sm-gallery-image-pagination {
   position: relative;
   float: left;
   z-index: 10; 
}
 
    /* caption center */
#sm-gallery .sm-tile-info {
[COLOR=yellow] max-width: none;[/COLOR]
[COLOR=yellow] text-align: center;[/COLOR]
[COLOR=yellow] color: #000!important;[/COLOR]
  position: relative;
  top: -40px;
}
 
.sm-button-image-share {
   position: relative;
   z-index: 99;
   top: 30px; 
   left: -85px;
}
 
.sm-gallery-image-tools {
   position:relative;
   z-index:99;
}
   /* END move caption up */

Allen
This works fine on my desktop pc, ipad and MAC book pro.
I like the looks of it.
I just added font-size: 20px to the caption center part to bump up the size of my caption.
My captions are usually only a few words so no overlap

Vic

rustyblades · August 22, 2013

James_F wrote: »

Hi: Saw you response above. I too have many long captions and had the same issue as you when I tried Allen's code. After reading through some CSS 'how to" web sites and using his code as a starting point, I tried this:

/* caption center */
#sm-gallery .sm-tile-info {
max-width: 80%;
text-align: justify;
color: ffffcc;
position: relative;
top: -45px;
left: 135px

If any one has a better way to do all of this, please chime in.

Hi James and Allen

I combined your two posts and did a version. A caveat is that I know very little HTML and knew absolutely nothing about it a week ago.

Anyway this is it,

/* move caption up */
.sm-gallery-image-pagination {
position: relative;
float: right;
z-index: 10;
}

.sm-gallery-smugmug .sm-gallery-image-totals
{
min-width:0px !important;
}

/* caption center */
#sm-gallery .sm-tile-info {
max-width: 70%;
text-align: justify;
color: ffffcc;
position: relative;
top: -45px;
left: 0px
}

.sm-button-image-share {
position: relative;
z-index: 99;
top: 30px;
left:940px
}

.sm-gallery-image-tools {
position:relative;
z-index:99;
}
/* END move caption up */

You can see the results in any of my galleries

Thank you both for sharing your code.

Paul

http://paultavares.smugmug.com/Wildlife/Birds/MyBirds

rustyblades · August 22, 2013

I edited the previous post and tweaked a few numbers that set the position of the caption. Very small change 10 px down and 10 px left. Also the share button 10 px less

Paul

Allen · August 22, 2013

rustyblades wrote: »

I edited the previous post and tweaked a few numbers that set the position of the caption. Very small change 10 px down and 10 px left. Also the share button 10 px less

Paul

The share button is not seen on smaller screens, have to go to about 1800 px wide screen to see it.

rustyblades · August 22, 2013

Allen wrote: »

The share button is not seen on smaller screens, have to go to about 1800 px wide screen to see it.

Yeah I noticed that too on a netbook. I'll leave it like that for now.

thanks
Paul

rustyblades · August 23, 2013

Allen wrote: »

The share button is not seen on smaller screens, have to go to about 1800 px wide screen to see it.

Hi Allen

I moved the button to under the tiles. Not ideal. It would be better anchored under the tools at the extreme right but I don't know how do do that and still have it show up on smaller screens like the tools do. There is enough space do this and it should have been with the other tools as a default.

Anyway I'm pretty happy with the end product. I also increased the line spacing for the bold link in the caption. The bold font was coming too close to the line above. All I need now is for the Title to recognize HTML tags so that I can put the Latin names in italics and in a smaller font size.

Paul

krashedmykarch · August 23, 2013

Allen, that's brilliant. Is it workable also on Collage mode?

Allen · August 23, 2013

krashedmykarch wrote: »

Allen, that's brilliant. Is it workable also on Collage mode?

There's lot of work to do on it so it works everywhere. I removed mine temporarily because of much
bigger issues, lost about 90 pages of customized html out of the blue.

krashedmykarch · August 23, 2013

I hope it returns to you soon-this is getting upsetting. I'm hoping that SM is doing a lot of upgrades and tweaks which are making changes on the fly and that that is what we are experiencing. My site is getting worse instead of better. (Not my published site but when I try to customize anything) I'll follow this thread and watch for answers from SM. I can't even find my 'galleries' in customize -only 'entire site' and 'homepage' although my published site has escaped the mess.
Good luck and know that your intelligent work is appreciated by many,
Thanks!

Smugmug style - move caption up

Comments