PDA

View Full Version : Spacing between thumbnails and displayed photo


b-grinner
Jan-26-2008, 05:12 AM
OK I am not that proficient in CSS.

Can anyone tell me what is required to increase the space(margin) surrounding the displayed picture in SmugMug mode?

I would like to see what that will do with respect to the number of thumbnails that appear in 'Stretchy' mode?

Thank you.

...Bruce

denisegoldberg
Jan-26-2008, 05:23 AM
OK I am not that proficient in CSS.

Can anyone tell me what is required to increase the space(margin) surrounding the displayed picture in SmugMug mode?

I would like to see what that will do with respect to the number of thumbnails that appear in 'Stretchy' mode?

Thank you.

...Bruce
Bruce -
I'm not sure that either of these things will do what you are looking for, but just in case...

When stretchy was first released, I didn't like the look because the thumbs and the photo were displayed up against the edges of the page. I was looking for some empty space. Andy helped with this CSS & message:
You can override and give more margin on the outsides

#smugmug, .smugmug #header, .smugmug #footer {
margin-left: 25px;
margin-right: 25px;
}

Or even more pixels, try different amounts till you get what you like. Put this at the end of your CSS.
You can look at one of my galleries to see the difference in spacing.

There's info in this thread - http://www.dgrin.com/showthread.php?t=66912 - on changing how stretchy pages stretch.

And you can set you images to display centered in smugmug mode by using the following CSS (found in this thread - http://www.dgrin.com/showthread.php?t=70253):
/* center photos (vertically oriented photos were left aligned, move to center */
#ajaxPhotoBox {text-align: center;}
--- Denise

b-grinner
Jan-26-2008, 08:42 AM
Bruce -
I'm not sure that either of these things will do what you are looking for, but just in case...

When stretchy was first released, I didn't like the look because the thumbs and the photo were displayed up against the edges of the page. I was looking for some empty space. Andy helped with this CSS & message:You can override and give more margin on the outsides

#smugmug, .smugmug #header, .smugmug #footer {
margin-left: 25px;
margin-right: 25px;
}

Or even more pixels, try different amounts till you get what you like. Put this at the end of your CSS.
You can look at one of my galleries to see the difference in spacing.

There's info in this thread - http://www.dgrin.com/showthread.php?t=66912 - on changing how stretchy pages stretch.

And you can set you images to display centered in smugmug mode by using the following CSS (found in this thread - http://www.dgrin.com/showthread.php?t=70253):/* center photos (vertically oriented photos were left aligned, move to center */
#ajaxPhotoBox {text-align: center;}
--- Denise

Thanks Denise.

Tried your CSS code but did not see any difference. My margins were not increasing on either side of the page no matter what I set the pixels to.

So I am at a loss here.

Someone. Please. Help!!!

denisegoldberg
Jan-26-2008, 10:05 AM
Thanks Denise.

Tried your CSS code but did not see any difference. My margins were not increasing on either side of the page no matter what I set the pixels to.

So I am at a loss here.

Someone. Please. Help!!!
Try adding !important.

Like this:
#smugmug, .smugmug #header, .smugmug #footer {
margin-left: 100px !important;
margin-right: 100px !important;
}
I just tried it in webdev on firefox (on your site), and it does work. You'll need to play with the numbers until you get to a margin that you like.

--- Denise

b-grinner
Jan-26-2008, 07:32 PM
Try adding !important.

Like this:#smugmug, .smugmug #header, .smugmug #footer {
margin-left: 100px !important;
margin-right: 100px !important;
}
I just tried it in webdev on firefox (on your site), and it does work. You'll need to play with the numbers until you get to a margin that you like.

--- Denise

Denise,

Thanks so much for this. It works!!! :barb This exactly what I was looking for. The trick was the amount of space on left and right sides.

You have been a big help. Appreciate all your help.

...Bruce