MK's Thread

[mk12345]

I would like the thumbs for each gallery to be sqaure, like in http://www.moonriverphotography.com/Now%20Showing. How is this done?

I would like to make my gallery thumbs be 4 per row, lilke in http://www.moonriverphotography.com/Now%20Showing. How is that done?


I would like to add some stylized border to the gallery thumbs, like in http://wellman.smugmug.com/. How is this done?


I would like to add borders to the enlarged photos, like in http://www.moonriverphotography.com/gallery/1022944. Is this done on a per-photo basis, or can I do this via code on smugmug?


I would like control over the font family, style, size, and color for
Featured Gallery, Gallery Categories, and all the Galleries. I can't not find the correct css code to do so.

[Andy]

Hi Mark,
I've put all of your threads into one thread here. It's way easier for us to deal with one thread than five. We also need to know your smugmug website name, in order to be able to help you.

:wave welcome to Dgrin! Have a start with the sticky threads in this forum:
http://www.dgrin.com/forumdisplay.php?f=31


I would like the thumbs for each gallery to be sqaure, like in http://www.moonriverphotography.com/Now%20Showing. How is this done?

The bulk zoom thumbnailer is the way to go!
http://www.dgrin.com/showthread.php?t=26959
I would like to make my gallery thumbs be 4 per row, lilke in http://www.moonriverphotography.com/Now%20Showing. How is that done?


I would like to add some stylized border to the gallery thumbs, like in http://wellman.smugmug.com/. How is this done?

Sure, what, exactly, to you have in mind? :ear

I would like to add borders to the enlarged photos, like in http://www.moonriverphotography.com/gallery/1022944. Is this done on a per-photo basis, or can I do this via code on smugmug? That's traditional view, you do that in Gallery Customization, it's a setting there.


I would like control over the font family, style, size, and color for
Featured Gallery, Gallery Categories, and all the Galleries. I can't not find the correct css code to do so.
Sure - you'll want to have Firefox, and the Firefox Web Dev tool, there's links in my sig, and very short tutorial sticky in this forum, on how to use it. This way, when we give you the codes / instructions, you can easily see what it looks like :D

[Andy]

I would like to add borders to the enlarged photos, like in http://www.moonriverphotography.com/gallery/1022944. Is this done on a per-photo basis, or can I do this via code on smugmug?

The borders you see in that gallery were added photoshop. A different way, is to do it now in LightBox. Put this gallery in SmugMug style and then click on the main photo:

http://www.moonriverphotography.com/gallery/575501

:)

[ramdisk]

Andy
I’ve noticed Now%20Showing in your url what if any significance does it have, I've been seeing this alot on other sites. Did you make a special gallery?

[Andy]

Andy
I’ve noticed Now%20Showing in your url what if any significance does it have, I've been seeing this alot on other sites. Did you make a special gallery?
It's a custom category, called "Now Showing"
http://www.smugmug.com/help/upload-photo

I hope this helps!

[mk12345]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark





Hi Mark,
I've put all of your threads into one thread here. It's way easier for us to deal with one thread than five. We also need to know your smugmug website name, in order to be able to help you.

:wave welcome to Dgrin! Have a start with the sticky threads in this forum:
http://www.dgrin.com/forumdisplay.php?f=31



The bulk zoom thumbnailer is the way to go!
http://www.dgrin.com/showthread.php?t=26959
I would like to make my gallery thumbs be 4 per row, lilke in http://www.moonriverphotography.com/Now%20Showing. How is that done?



Sure, what, exactly, to you have in mind? :ear
That's traditional view, you do that in Gallery Customization, it's a setting there.


Sure - you'll want to have Firefox, and the Firefox Web Dev tool, there's links in my sig, and very short tutorial sticky in this forum, on how to use it. This way, when we give you the codes / instructions, you can easily see what it looks like :D

[mk12345]

What exactly is lightbox? I know how to add borders to each photo in Photoshop, but was hoping to avoid that.

The borders you see in that gallery were added photoshop. A different way, is to do it now in LightBox. Put this gallery in SmugMug style and then click on the main photo:

http://www.moonriverphotography.com/gallery/575501

:)

[Andy]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[Andy]

What exactly is lightbox? I know how to add borders to each photo in Photoshop, but was hoping to avoid that.

Click on the main photo in the gallery I linked you. Did you see a new overlay come up, with a customized border? :ear

[mk12345]

Not sure where to get FireFox WevDev tool, and how that will help me. Shouldn't changing fonts be as simple as css? I found a link that shows all the css classes/ids for the gallery pages, but none for the homepage. Does such a page exist that shows all the classes and ids on the homepage? That would greatly reduce my questions.

Thanks,
Mark

Hi Mark,
I've put all of your threads into one thread here. It's way easier for us to deal with one thread than five. We also need to know your smugmug website name, in order to be able to help you.

:wave welcome to Dgrin! Have a start with the sticky threads in this forum:
http://www.dgrin.com/forumdisplay.php?f=31



The bulk zoom thumbnailer is the way to go!
http://www.dgrin.com/showthread.php?t=26959
I would like to make my gallery thumbs be 4 per row, lilke in http://www.moonriverphotography.com/Now%20Showing. How is that done?



Sure, what, exactly, to you have in mind? :ear
That's traditional view, you do that in Gallery Customization, it's a setting there.


Sure - you'll want to have Firefox, and the Firefox Web Dev tool, there's links in my sig, and very short tutorial sticky in this forum, on how to use it. This way, when we give you the codes / instructions, you can easily see what it looks like :D

[Andy]

Not sure where to get FireFox WevDev tool, and how that will help me. Shouldn't changing fonts be as simple as css? I found a link that shows all the css classes/ids for the gallery pages, but none for the homepage. Does such a page exist that shows all the classes and ids on the homepage? That would greatly reduce my questions.

Thanks,
Mark

Sure. You don't HAVE to get them. It just makes your life, and ours, easier. Why not? They're free, simple to install, and the web dev tool takes about five minutes to learn. Using the web dev tool, you can change fonts, colors, sizes, etc, to your heart's content, and see the changes INSTANTLY without affecting your site. Then when you're ready, you can paste the new code in to your customization panel.

Yes, such a page exists. It's called "display element information" in the FF web dev tool, and it shows you EVERYTHING on the page :D

Holler if you have more questions.

[Mike Lane]

Not sure where to get FireFox WevDev tool, and how that will help me. Shouldn't changing fonts be as simple as css? I found a link that shows all the css classes/ids for the gallery pages, but none for the homepage. Does such a page exist that shows all the classes and ids on the homepage? That would greatly reduce my questions.

Thanks,
Mark

firefox (http://www.mozilla.com/)
webdev (http://www.chrispederick.com/)

You're going to have major problems if you do all your page design in IE.

[mk12345]

OK, I'm starting to feel very stupid... I installed the FireFox WebDev tool, but it doesn't seem to be what I was imagining based on your description. It looks like I can view source and css. Is there a GUI to design the page? Where do I go from here to learn how to do things like the following:

1. Put four thumbs across in the Featured Gallery section and in the category pages. I already have them four across in the Gallery Categories section.
2. Make all gallery thumbs on the homepage and category pages be square
3. Change all forn attributes for most fonts
4. Limit the choices in the Style picklist
5. Add more sections like Featured Galleries and Gallery Categories to the homepage.

Thanks,
Mark



Sure. You don't HAVE to get them. It just makes your life, and ours, easier. Why not? They're free, simple to install, and the web dev tool takes about five minutes to learn. Using the web dev tool, you can change fonts, colors, sizes, etc, to your heart's content, and see the changes INSTANTLY without affecting your site. Then when you're ready, you can paste the new code in to your customization panel.

Yes, such a page exists. It's called "display element information" in the FF web dev tool, and it shows you EVERYTHING on the page :D

Holler if you have more questions.

[Andy]

OK, I'm starting to feel very stupid... I installed the FireFox WebDev tool, but it doesn't seem to be what I was imagining based on your description. It looks like I can view source and css. Is there a GUI to design the page? Where do I go from here to learn how to do things like the following:

1. Put four thumbs across in the Featured Gallery section and in the category pages. I already have them four across in the Gallery Categories section.
2. Make all gallery thumbs on the homepage and category pages be square
3. Change all forn attributes for most fonts
4. Limit the choices in the Style picklist
5. Add more sections like Featured Galleries and Gallery Categories to the homepage.

Thanks,
Mark


Did you use the tutorial? http://www.dgrin.com/showthread.php?t=31784

you use Display element infomation, and it gives you the class names that you style. So, to put four across in featured gallries, you'd want to copy the code you already have, but do it for #ffBox..

Square Thumbs? Re-read, please, my very first response to you, I gave you the answer for that earlier today

Change fonts? Again, you use the EDIT CSS function with Webdev, play around with the font CSS for various elements, until you get what you want. Use Display Element info to understand what tag is where. You can also just ask e.g., "I'd like my breadcrumb to be red, and my nav links to be yellow - how do I do that?" We'll give you the code no problemo :)

Limit the choices in the view style picklist? You can't. You can force one style, or have all 8 available - that's in gallery customization.

Add to your homepage? Click control panel, if things can be added to your homepage, they are there near the bottom, click "show on homepage."

I hope this helps!

[mk12345]

Thanks Andy,

I think where I am struggling is know what data in the element information do I use in the css. There are classes, divs, and multiple ids for each, and i can't figure out what value to put in the css. For example, I want to change the font family, color, and size for the words "Featured Galleries" and "Gallery Categories". Perhaps seeing how that is done will help me come to the epiphany that i so much desire.

Thanks,
Mark

Did you use the tutorial? http://www.dgrin.com/showthread.php?t=31784

you use Display element infomation, and it gives you the class names that you style. So, to put four across in featured gallries, you'd want to copy the code you already have, but do it for #ffBox..

Square Thumbs? Re-read, please, my very first response to you, I gave you the answer for that earlier today

Change fonts? Again, you use the EDIT CSS function with Webdev, play around with the font CSS for various elements, until you get what you want. Use Display Element info to understand what tag is where. You can also just ask e.g., "I'd like my breadcrumb to be red, and my nav links to be yellow - how do I do that?" We'll give you the code no problemo :)

Limit the choices in the view style picklist? You can't. You can force one style, or have all 8 available - that's in gallery customization.

Add to your homepage? Click control panel, if things can be added to your homepage, they are there near the bottom, click "show on homepage."

I hope this helps!

[Mike Lane]

Thanks Andy,

I think where I am struggling is know what data in the element information do I use in the css. There are classes, divs, and multiple ids for each, and i can't figure out what value to put in the css. For example, I want to change the font family, color, and size for the words "Featured Galleries" and "Gallery Categories". Perhaps seeing how that is done will help me come to the epiphany that i so much desire.

Thanks,
Mark

Already been done (http://www.dgrin.com/showthread.php?t=24920):thumb

[mk12345]

Thank you. I'm finally catching on a bit.

I'm still confused on interpreting the element information and using that for css. For instance, I am trying to modify/add to the css code you gave me yesterday that displays four thumbs across the Gallery Category section, so that it will also apply to the Featured Categories and to within the actual Category page displaying gallery thumbs. The css you gave me applies to gelleriesBox, but I never see that in the element information, and therefor am unable to pattern-match how to apply these styles in these other places.

Mark

Did you use the tutorial? http://www.dgrin.com/showthread.php?t=31784

you use Display element infomation, and it gives you the class names that you style. So, to put four across in featured gallries, you'd want to copy the code you already have, but do it for #ffBox..

Square Thumbs? Re-read, please, my very first response to you, I gave you the answer for that earlier today

Change fonts? Again, you use the EDIT CSS function with Webdev, play around with the font CSS for various elements, until you get what you want. Use Display Element info to understand what tag is where. You can also just ask e.g., "I'd like my breadcrumb to be red, and my nav links to be yellow - how do I do that?" We'll give you the code no problemo :)

Limit the choices in the view style picklist? You can't. You can force one style, or have all 8 available - that's in gallery customization.

Add to your homepage? Click control panel, if things can be added to your homepage, they are there near the bottom, click "show on homepage."

I hope this helps!

[Andy]

Thank you. I'm finally catching on a bit.

I'm still confused on interpreting the element information and using that for css. For instance, I am trying to modify/add to the css code you gave me yesterday that displays four thumbs across the Gallery Category section, so that it will also apply to the Featured Categories and to within the actual Category page displaying gallery thumbs. The css you gave me applies to gelleriesBox, but I never see that in the element information, and therefor am unable to pattern-match how to apply these styles in these other places.

Mark

Mark, please put your site name in your profile, we have to look it up each time we want to help you :deal

OK it's pretty basic, see this screen grab:

http://www.smugmug.com/photos/67439097-L.jpg

http://www.smugmug.com/photos/67439097-O.jpg

So, you'd simply copy and paste the code for the other boxes, and then replace the word "galleriesBox" with "featuredBox" and voila, presto, 4-across. Just try it, you won't break the internets, we promise :D

[Mike Lane]

Know what can help you with that? Firefox (http://www.mozilla.com/) and the webdeveloper plugin (http://www.chrispederick.com/).

[mk12345]

Thank you!
Mark



Mark, please put your site name in your profile, we have to look it up each time we want to help you :deal

OK it's pretty basic, see this screen grab:

http://www.smugmug.com/photos/67439097-L.jpg

http://www.smugmug.com/photos/67439097-O.jpg

So, you'd simply copy and paste the code for the other boxes, and then replace the word "galleriesBox" with "featuredBox" and voila, presto, 4-across. Just try it, you won't break the internets, we promise :D

[mk12345]

Thank you again.

Using element information, it appears that the grouping of gallery thumbs on a category page would now be four across, as it too is "galleriesBox", but that is not happeng. Also, the fonts on the thumb captions in the category pages are not following my css. Can you please take a look?

Thanks.
www.ourlife.sumgmug.com


Mark, please put your site name in your profile, we have to look it up each time we want to help you :deal

OK it's pretty basic, see this screen grab:

http://www.smugmug.com/photos/67439097-L.jpg

http://www.smugmug.com/photos/67439097-O.jpg

So, you'd simply copy and paste the code for the other boxes, and then replace the word "galleriesBox" with "featuredBox" and voila, presto, 4-across. Just try it, you won't break the internets, we promise :D

[Andy]

Thanks.
www.ourlife.sumgmug.com

I'm looking, but you should know this, your website is addressed like this:

http://ourlife.smugmug.com/

and only that.

[Andy]

Thank you again.

Using element information, it appears that the grouping of gallery thumbs on a category page would now be four across, as it too is "galleriesBox", but that is not happeng. Also, the fonts on the thumb captions in the category pages are not following my css. Can you please take a look?

Thanks.
www.ourlife.sumgmug.com

We'll need Mike or Ivar or BWG to sort this one out, stand by, Mark.

[mk12345]

Any update on this?
http://ourlife.smugmug.com


We'll need Mike or Ivar or BWG to sort this one out, stand by, Mark.

[Andy]

Any update on this?
http://ourlife.smugmug.com

Well, Ivar's asleep (he's in Europe), Mike Lane just got off of work (Seattle) and he'll be by shortly I'm sure. Or Lee if he notices...

Stay tuned! :D

[Mike Lane]

You mean like on http://ourlife.smugmug.com/Wedding?

It's not the galleriesBox class that is making your homepage galleries line up 4 in a row, it's the miniBox class (well the CSS that uses the miniBox class anyhow). On category pages that don't have many sub-categories or galleries the boxes are classed with miniBox and albumLarge. If you want to adjust the number of boxes that are in a row look for the .albumLarge in your CSS and adjust the width, padding, and margins of that.

The following CSS is styling all the links on your homepage:

a:link, /* access all the links on your smugmug site */
.nav a:link,.albumTitle a:link,
#homepage a:link
{
font-family: verdana, arial;
font-size: small;
font-style: normal;
font-weight: normal;
color: #222222;
}

You can do this:

#homepage .albumTitle a:link,
#homepage .albumTitle a:visited {
font:25px/30px "times new roman", serif;
color:#f0f;
}


You'll want to change that font and color probably.

[Andy]

You mean like on

Speak of the devil, here's Mike :thumb
Thanks Mike!

[mk12345]

http://ourlife.smugmug.com

The bizarre black backcolor is due to this image set in the css. How can I get rid of this image? I've tried modifying the css block below, but my changes are ignored. Is there a setting somewhere to say "get rid of this background image"?

#smugmug #photos, #smugmug_small #photos
{
margin-top: 0px;
padding: 10px 5px;
border-top: solid 1px #666666;
border-right: solid 1px #2d2d2d;
border-left: solid 1px #2d2d2d;
border-bottom: solid 1px #2d2d2d;
background: transparent url(/img/gradients/large.gif) repeat-x;
}


Got the bulk thumbs working. Thank you!!

Now I have to figure out what is going wrong with my gallery pages backcolor - that is bizarre.

[Andy]

http://ourlife.smugmug.com

The bizarre black backcolor is due to this image set in the css. How can I get rid of this image? I've tried modifying the css block below, but my changes are ignored. Is there a setting somewhere to say "get rid of this background image"?

#smugmug #photos, #smugmug_small #photos
{
margin-top: 0px;
padding: 10px 5px;
border-top: solid 1px #666666;
border-right: solid 1px #2d2d2d;
border-left: solid 1px #2d2d2d;
border-bottom: solid 1px #2d2d2d;
background: transparent url(/img/gradients/large.gif) repeat-x;
}

Go to each gallery, and set the theme for each gallery to "default." You do this in gallery tools>customize gallery.

I did it for you here:
http://ourlife.smugmug.com/gallery/1405885

[mk12345]

Thank you

Go to each gallery, and set the theme for each gallery to "default." You do this in gallery tools>customize gallery.

I did it for you here:
http://ourlife.smugmug.com/gallery/1405885

[mk12345]

http://ourlife.smugmug.com

I uploaded two photos to my Other->Supporting images gallery, but they are not showing up. They are thin gif files that I want to use for my overall background image.

I also am wanting to change the caption of the Style picklist, along with teh descriptions of each choice in the Styles picklist. Is any of this possible? If so, can you please guide me.

Thank you for all your help!!
Mark


Thank you

[Andy]

I also am wanting to change the caption of the Style picklist, along with teh descriptions of each choice in the Styles picklist. Is any of this possible? If so, can you please guide me.

Thank you for all your help!!
Mark

Mark, you really need to get Firefox and the Web Dev tool, and take the 10mins to learn it with our little tutorial. It will make your life soooo much easier.

Stylebar - I made the colors obnoxious so you could see what's what. Change as appropriate. You can't change the names of what appears there, sorry.

/* change the colors etc in the style chooser */
#stylebar select {
background: blue;
color: red;
font-family: Verdana;
}

[Andy]

http://ourlife.smugmug.com

I uploaded two photos to my Other->Supporting images gallery, but they are not showing up. They are thin gif files that I want to use for my overall background image.

What did you upload? That gallery is empty. Try again...?

[mk12345]

http://ourlife.smugmug.com/
I have been using Firefox Web Dev - a lot. I know how to change the style of all the text, etc, but not how to change the actual text. "Style" is not meaningful to the average user, so I would like to reword it. You're saying that is not possible?

Also, I have tried five times to upload a .gif image to Other->Supporting Images and once to Other->Slideshow. I've done so from two different PCs. THe upload looks like it worked, but the image never appears. All I'm wanting to do is upload a 1x1600 pixle gif gradient for my background - to replace the blue one that I found on http://wellman.smugmug.com.


What did you upload? That gallery is empty. Try again...?

[Mike Lane]

http://ourlife.smugmug.com/
I have been using Firefox Web Dev - a lot. I know how to change the style of all the text, etc, but not how to change the actual text. "Style" is not meaningful to the average user, so I would like to reword it. You're saying that is not possible?

The only way you can change that with CSS is by using a background image. It would take some CSS rules that are a bit complex but I think I could make it work. If I get a chance later today or tomorrow I'll see what I can do. You can help by creating the image. If you want it to be actual html text, you'll have to use javascript. I can't help you there.

Also, I have tried five times to upload a .gif image to Other->Supporting Images and once to Other->Slideshow. I've done so from two different PCs. THe upload looks like it worked, but the image never appears. All I'm wanting to do is upload a 1x1600 pixle gif gradient for my background - to replace the blue one that I found on http://wellman.smugmug.com.

Yeah, I had problems uploading 1px tall or wide images too. Just use 10px as your minimum width or height and it'll work fine.

[mk12345]

http://ourlife.smugmug.com

I appreciate offer, Mike, but it's not worth all that effort just to change that one label. But is it possible to remove the picklist that is below the Style picklist - it is labeled "&" and choices are "Black" and "white". This appears to do nothing but take up space.

As for the loading of the thin image, I was able to load a 10x1600 gif. I then used it to be my background-image. Problem with that to get the link to that photo, it becomes a jpg which greatly degrades the gradient. How did they do that on http://wellman.smugmug.com - to link to a gif file? Also, on that site, the image extends infinitly to the bottom of the page, whereas when I load mine that is 1600 tall, it does not. What's the trick that I am missing?

You guys rock! I aprreciate the help and patience. I'm to the point where I am VERY happy with my sight and am just making tweaks now.

Mark




The only way you can change that with CSS is by using a background image. It would take some CSS rules that are a bit complex but I think I could make it work. If I get a chance later today or tomorrow I'll see what I can do. You can help by creating the image. If you want it to be actual html text, you'll have to use javascript. I can't help you there.



Yeah, I had problems uploading 1px tall or wide images too. Just use 10px as your minimum width or height and it'll work fine.

[bwg]

http://ourlife.smugmug.com

I appreciate offer, Mike, but it's not worth all that effort just to change that one label. But is it possible to remove the picklist that is below the Style picklist - it is labeled "&" and choices are "Black" and "white". This appears to do nothing but take up space.

As for the loading of the thin image, I was able to load a 10x1600 gif. I then used it to be my background-image. Problem with that to get the link to that photo, it becomes a jpg which greatly degrades the gradient. How did they do that on http://wellman.smugmug.com - to link to a gif file? Also, on that site, the image extends infinitly to the bottom of the page, whereas when I load mine that is 1600 tall, it does not. What's the trick that I am missing?

You guys rock! I aprreciate the help and patience. I'm to the point where I am VERY happy with my sight and am just making tweaks now.

Markdid you contact Wellman about using his design? You should contact him out of courtesy because you've got a pretty blantant rip-off of his site goin on.

[Andy]

http://ourlife.smugmug.com

I appreciate offer, Mike, but it's not worth all that effort just to change that one label. But is it possible to remove the picklist that is below the Style picklist - it is labeled "&" and choices are "Black" and "white". This appears to do nothing but take up space.

Control Panel>Customize>choose a background color (light or dark) choose dark first, see if it's ok. If not, choose light.

Then the picker goes away.

You'll want to work on your background image. Those folks who visit on large screens get this:

[mk12345]

Agreed. I need to contact him. I hope to make more changes so that it is not AS similar, but either way, that site has been a source of inspiration.

did you contact Wellman about using his design? You should contact him out of courtesy because you've got a pretty blantant rip-off of his site goin on.

[mk12345]

Thank you for the advice.

I am working on that background image and can't figure it out. I uploaded my own image that was 1600 tall, but it still doesn't cover all vertically. What's the trick here? Also, how can I use a gif image for this? I uploaded a gif, but when I get it's link to put in my css, it is a jpg, and therefor degreaded the gradient.

Control Panel>Customize>choose a background color (light or dark) choose dark first, see if it's ok. If not, choose light.

Then the picker goes away.

You'll want to work on your background image. Those folks who visit on large screens get this:

[Mike Lane]

Thank you for the advice.

I am working on that background image and can't figure it out. I uploaded my own image that was 1600 tall, but it still doesn't cover all vertically. What's the trick here? Also, how can I use a gif image for this? I uploaded a gif, but when I get it's link to put in my css, it is a jpg, and therefor degreaded the gradient.

The secret my friend is to use a background color in addition to your background image.

So let's say you've got an image that is a gradient that goes from white to pure red (#ff0000) from top to bottom. You can do something like this:

body {background:#ff0000 url(/photos/XXXXXXX-O.gif) top repeat-x;}

That way you have the background fading from white to red that is overlapping a red background color. Works like a charm.

[mk12345]

Slick! Thanks

The secret my friend is to use a background color in addition to your background image.

So let's say you've got an image that is a gradient that goes from white to pure red (#ff0000) from top to bottom. You can do something like this:

body {background:#ff0000 url(/photos/XXXXXXX-O.gif) top repeat-x;}

That way you have the background fading from white to red that is overlapping a red background color. Works like a charm.

[mk12345]

http://ourlife.smugmug.com

But what about the "gif file link is a jpg" issue?

How can I use a gif image for this? I uploaded a gif, but when I get it's link to put in my css, it is a jpg, and therefor degreaded the gradient.

Slick! Thanks

[Mike Lane]

But what about the "gif file link is a jpg" issue?

What "gif file link is a jpg" issue? First off if you upload a gif to smugmug and you use an original sized image, then you'll be using a gif. Second off, it doesn't matter what file type you use anyhow*.







* Okay there's one caveat, pngs don't play well with IE and Safari because of gamma issues. That is to say that png colors almost always display darker than html or CSS generated colors in IE and Safari. (How frustrating is that?) So practically, don't use pngs (even though you should be able to theoretically).

[mk12345]

Jpgs are not good with gradients.. Look at my site. http://ourlife.smugmug.com

So I uploaded a gif, how do I get access to that gif file? I usually go to the link page to find a link url, which are all jpgs. How do I know the name that smugmug gives to that uploaded gif? I need to reference that in my css.


What "gif file link is a jpg" issue? First off if you upload a gif to smugmug and you use an original sized image, then you'll be using a gif. Second off, it doesn't matter what file type you use anyhow*.







* Okay there's one caveat, pngs don't play well with IE and Safari because of gamma issues. That is to say that png colors almost always display darker than html or CSS generated colors in IE and Safari. (How frustrating is that?) So practically, don't use pngs (even though you should be able to theoretically).

[Andy]

Jpgs are not good with gradients.. Look at my site. http://ourlife.smugmug.com

So I uploaded a gif, how do I get access to that gif file? I usually go to the link page to find a link url, which are all jpgs. How do I know the name that smugmug gives to that uploaded gif? I need to reference that in my css.
Change the name of the file in your css to http://ourlife.smugmug.com/photos/XXXXXXX-O.gif

If you uploaded a gif, it's still a gif.

[Mike Lane]

Jpgs are not good with gradients.. Look at my site. http://ourlife.smugmug.com

So I uploaded a gif, how do I get access to that gif file? I usually go to the link page to find a link url, which are all jpgs. How do I know the name that smugmug gives to that uploaded gif? I need to reference that in my css.

Like I said, if you upload a gif, you get a gif. Make sure that you have allowed originals to be viewed in the gallery where you store the graphics. Make sure to only use the original sized images and you will get what you uploaded.

Make sense?

[Mike Lane]

You've got this:


/* Gradient Background */
body {
/* background-color: #ECECD2;*/
/* background-image: url(/photos/58054147-O.gif);*/
background-color: #cdc8c5; /* same as bottom gradient color */
background-image: url(http://OurLife.smugmug.com/photos/67776367-L.jpg);
background-position: top;
background-repeat: repeat-x;
background-attachment: fixed;
}

Make the changes in red below:


/* Gradient Background */
body {
/* background-color: #ECECD2;*/
/* background-image: url(/photos/58054147-O.gif);*/
background-color: #cdc8c5; /* same as bottom gradient color */
background-image: url(http://OurLife.smugmug.com/photos/67776367-O.gif);
background-position: top;
background-repeat: repeat-x;
background-attachment: fixed;
}



:lol3 and I'd say you took a little more than inspiration from wellman's site. Looks like you dumped his CSS straight into your CSS.

:lol4 You still even have this at the top:

/* ============================================
CSS Styling modified from wellman.smugmug.com
Copyright Greg Wellman
gawellman@gmail.com
Last update: 4/2/2006
============================================ */

[mk12345]

Beautiful! Thank you once again.

Change the name of the file in your css to http://ourlife.smugmug.com/photos/XXXXXXX-O.gif

If you uploaded a gif, it's still a gif.

[bwg]

:lol3 and I'd say you took a little more than inspiration from wellman's site. Looks like you dumped his CSS straight into your CSS.

:lol4 You still even have this at the top:

/* ============================================
CSS Styling modified from wellman.smugmug.com
Copyright Greg Wellman
gawellman@gmail.com
Last update: 4/2/2006
============================================ */

yeesh. :rolleyes

Mark, you sent Greg that email yet?

[mk12345]

Yes sir, and receieved a polite response back from Greg. Thank you for the "nudge".

yeesh. :rolleyes

Mark, you sent Greg that email yet?

[mk12345]

Here's some extra features that I would like to add:

Per gallery, I would like to add a specific header - that header could include not only an image, but also some text, some links to other websites, and some links to videos for this gallery.

I've read how to add a different header image per gallery, but not sure how to extend it more generically. Any advice/examples?

Thank you,
Mark
http://ourlife.smugmug.com



Yes sir, and receieved a polite response back from Greg. Thank you for the "nudge".

[Andy]

Here's some extra features that I would like to add:

Per gallery, I would like to add a specific header - that header could include not only an image, but also some text, some links to other websites, and some links to videos for this gallery.

I've read how to add a different header image per gallery, but not sure how to extend it more generically. Any advice/examples?

Thank you,
Mark
http://ourlife.smugmug.com

you'd make a div for each new header, which goes in your header html section:

<div id="myalternateheader1">blah blah some text, some code, an image, whatever</div>

in your css:

#myalternateheader1 {display: none}
.gallery_XXXXXX #myalternateheader1 {display: block}

mkay?

[mk12345]

Works great, but I'm having a tough time figuring out what to put in place of ".gallery_XXXXXX" if I want to put a unique header on a category page, like Adoption.

http://ourlife.smugmug.com

you'd make a div for each new header, which goes in your header html section:

<div id="myalternateheader1">blah blah some text, some code, an image, whatever</div>

in your css:

#myalternateheader1 {display: none}
.gallery_XXXXXX #myalternateheader1 {display: block}

mkay?

[Mike Lane]

Works great, but I'm having a tough time figuring out what to put in place of ".gallery_XXXXXX" if I want to put a unique header on a category page, like Adoption.

http://ourlife.smugmug.com

.category_Adoption

Look at the source and find the body tag. The classes for the body tag are what you're looking for.

[mk12345]

Thanks

.category_Adoption

Look at the source and find the body tag. The classes for the body tag are what you're looking for.

[Dunker]

4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)


/*=================================*/
/*==galleries, categories layout===*/
/*=================================*/

/* Line up the boxes properly */
#galleriesBox .miniBox {
margin:0 20px;
padding:0;
height:260px;
width:142px;}
#galleriesBox .miniBox .nav, #galleriesBox .miniBox .private, #galleriesBox .miniBox p.updated, #galleriesBox .miniBox p.description, #galleriesBox .miniBox p.albumTitle {display:block; text-align:center;}
#galleriesBox .miniBox .photo {
width:142px;
height:auto;
_height:1%;}


/* the above, just for logged-in user */

.loggedIn #galleriesBox .miniBox {
margin:0 20px;
padding:0;
height:340px;
width:142px;}
#galleriesBox .miniBox .nav, #galleriesBox .miniBox .private, #galleriesBox .miniBox p.updated, #galleriesBox .miniBox p.description, #galleriesBox .miniBox p.albumTitle {display:block; text-align:center;}
#galleriesBox .miniBox .photo {
width:142px;
height:auto;
_height:1%;}

.editDescription textarea {
width: 142px;
}

#category #galleriesBox .albumLarge {
width:342px;
height:260px;
margin:20px 11px;
padding:0;}
#category #galleriesBox .albumLarge .photoLarge {
width:342px;
height:auto;
_height:1%;}
#category #galleriesBox .albumLarge .albumTitle {
clear:both;
text-align:center;}

/* the above, just for logged-in user */

.loggedIn #category #galleriesBox .albumLarge {
width:342px;
height:390px;
margin:20px 11px;
padding:0;}
#category #galleriesBox .albumLarge .photoLarge {
width:342px;
height:auto;
_height:1%;}
#category #galleriesBox .albumLarge .albumTitle {
clear:both;
text-align:center;}

#category .editDescription textarea {
width: 322px;
}


#category #galleriesBox .albumLarge .smbuttons {
width: 154px;
margin-left: 94px;
}

#category #galleriesBox .smbuttons {
width: 104px;
margin-left: 19px;
}

.homepage #galleriesBox .smbuttons {
width: 104px;
margin-left: 19px;
}

#homepage #categoriesBox .miniBox {
margin:0;
padding:0;
height:160px;
width:182px;}
#homepage #categoriesBox .miniBox .nav, #homepage #categoriesBox .miniBox .private {display:block; text-align:center;}
#homepage #categoriesBox .miniBox .photo {
width:182px;
height:auto;
_height:1%;}

That is exactly what I wanted it to do, thank you, but mostly I'm looking to have the 4 wide in my "featured galleries"...

[Andy]

That is exactly what I wanted it to do, thank you, but mostly I'm looking to have the 4 wide in my "featured galleries"...

Do you have Firefox and the Web Dev tool? 2minutes with that and you get this, just based on copying and modifying your exisiting CSS. May need some final tweaking but put this in:


#homepage #featuredBox .miniBox {
margin:0;
padding:0;
height:260px;
width:182px;}
#homepage #featuredBox .miniBox .nav, #homepage #categoriesBox .miniBox .private {display:block; text-align:center;}
#homepage #featuredBox .miniBox .photo {
width:182px;
height:auto;
_height:1%;}

#featuredBox .boxBottom {
height: 300px;
}

#featuredBox .smbuttons {
width: 102px;
margin-left: 40px;
}

[mk12345]

http://ourlife.smugmug.com
It's really cool how much customization can be done! I now have a table of links on top of my Adoption category page. Here's a few issues I still have, however, that I can't figure out:

1. How to put the breadcrumbs - Home > Adoption - above my customer header. So on top it says "Our Life in Photos...". Below that is the breadcrumbs, and below that is my customer header with adoption links

2. How to get some extra vertical space between the top of the boxes and the text "Adoption Galleries". How to do this on the homepage and in the category pages?

3. How can I get the font below each thumb in the cateory pages to be the same as on the homepage? They are both .nav. Not sure what is missing?

Thank you once again!
Mark


.category_Adoption

Look at the source and find the body tag. The classes for the body tag are what you're looking for.

[Mike Lane]

http://ourlife.smugmug.com
It's really cool how much customization can be done! I now have a table of links on top of my Adoption category page. Here's a few issues I still have, however, that I can't figure out:

1. How to put the breadcrumbs - Home > Adoption - above my customer header. So on top it says "Our Life in Photos...". Below that is the breadcrumbs, and below that is my customer header with adoption links

That's going to be a lot more trouble than it's worth.

2. How to get some extra vertical space between the top of the boxes and the text "Adoption Galleries". How to do this on the homepage and in the category pages?

margin-top: and margin:bottom are your friends here.

3. How can I get the font below each thumb in the cateory pages to be the same as on the homepage? They are both .nav. Not sure what is missing?

It's just a specificity thing. Remember you have to be at leaset as specific as those CSS declarations that come before yours. You can use the DOM inspector to figure out what is overriding your fonts.

[mk12345]

Is there a way to put a link (href) within the caption of an individual photo?

That's going to be a lot more trouble than it's worth.



margin-top: and margin:bottom are your friends here.



It's just a specificity thing. Remember you have to be at leaset as specific as those CSS declarations that come before yours. You can use the DOM inspector to figure out what is overriding your fonts.

[bwg]

Is there a way to put a link (href) within the caption of an individual photo?yes

just put <html><a href="http://url.whatever.com">Link text</a></html>

[mk12345]

Thanks!!

How can I attach a style to it (via css)?

Alos, I see strange behavoir when viewing the gallery as Journal. Please see http://ourlife.smugmug.com. The Medjugorje gallery.


yes

just put <html><a href="http://url.whatever.com">Link text</a></html>

[Andy]

Thanks!!

How can I attach a style to it (via css)?

<html><div id="mycaptionstyle"><a href="http://url.whatever.com">Link text</a></div></html>

Then, in CSS, you can do

#mycaptionstyle {
color: red
font-size: 10px;
}

etc

[mk12345]

That was working... But I am getting some bizzarre behavior in my http:ourlife.smugmug.com Medjugorje page. See the first two photos in journal mode. Trying to edit photo 1 caption brings up an error page, trying to edit photo 2 caption brings up photo 3... Not sure how to revert this??

The behavior with the photo 2 caption editing is most likely due to my failing to put the </div> tag at the end. But how can I get back in to edit?

Not sure what is up with the photo 1 caption editing...

<html><div id="mycaptionstyle"><a href="http://url.whatever.com">Link text</a></div></html>

Then, in CSS, you can do

#mycaptionstyle {
color: red
font-size: 10px;
}

etc

[Andy]

That was working... But I am getting some bizzarre behavior in my http:ourlife.smugmug.com Medjugorje page. See the first two photos in journal mode. Trying to edit photo 1 caption brings up an error page, trying to edit photo 2 caption brings up photo 3... Not sure how to revert this??

The behavior with the photo 2 caption editing is most likely due to my failing to put the </div> tag at the end. But how can I get back in to edit?

Not sure what is up with the photo 1 caption editing...
Mark,

Lee, and I, and everyone who helps is very careful to give you all the right bits of code - you must not ignore any of it. It's all important.

In this case, you ignored several things we told you about, above:

<html> at the beginning. </html> at the end.. ALWAYS :D

</a> to close out an <a href> tag
" " around links.

I fixed all of there for you, please please be careful out there.

[mk12345]

http://ourlife.smugmug.com

Few more questions:

1. In http://wellman.smugmug.com/gallery/1368110, the smugmug footer is on top of the site_wrapper (blue background). I can't figure out how to make it display there.
2. Also in http://wellman.smugmug.com/gallery/1368110, he has the blue background showing in horizontally between sections (like photos and comments). How is this done? I would like to do the same on my Adoption Category page, so that my added links at the bottom are seperated that way.
3. In my adoption category page I have added a custom footer. Right now, it only displays in the Adoption category page, and all the Adoption galleries. I would like to have it display in JUST the category page. Is this possible?
4. I would like to create a link to an external website, and have that link be behind a category thumb. Is this possible?

thanks

Mark,

Lee, and I, and everyone who helps is very careful to give you all the right bits of code - you must not ignore any of it. It's all important.

In this case, you ignored several things we told you about, above:

<html> at the beginning. </html> at the end.. ALWAYS :D

</a> to close out an <a href> tag
" " around links.

I fixed all of there for you, please please be careful out there.

[Andy]

http://ourlife.smugmug.com

Few more questions:

1. In http://wellman.smugmug.com/gallery/1368110, the smugmug footer is on top of the site_wrapper (blue background). I can't figure out how to make it display there.
2. Also in http://wellman.smugmug.com/gallery/1368110, he has the blue background showing in horizontally between sections (like photos and comments). How is this done? I would like to do the same on my Adoption Category page, so that my added links at the bottom are seperated that way.
3. In my adoption category page I have added a custom footer. Right now, it only displays in the Adoption category page, and all the Adoption galleries. I would like to have it display in JUST the category page. Is this possible?
4. I would like to create a link to an external website, and have that link be behind a category thumb. Is this possible?

thanks

You might want to wait a couple days and see the Fresh Air theme, it's based on wellman's site...

Sure category links are fine - see my site, and the "galleries" link.

:)

[mk12345]

Not sure if your "Galleries" link is the same as what I am looking to do, I would like to click a thumb of a category on my homepage, and have that open a new browser with a different website. How can I get accces to the href of a category thumb on my homepage?

You might want to wait a couple days and see the Fresh Air theme, it's based on wellman's site...

Sure category links are fine - see my site, and the "galleries" link.

:)

[Andy]

Not sure if your "Galleries" link is the same as what I am looking to do, I would like to click a thumb of a category on my homepage, and have that open a new browser with a different website. How can I get accces to the href of a category thumb on my homepage?
You can't change the thumb link (maybe with javascript you can) but you can put a link in the gallery title :thumb

[mk12345]

Is there a way to show more page number links at the top/bottom of a journal page. The default is 1-6, plus next and end. Can I adjust that to show all page numbers, or 1-10, 1-20?

You can't change the thumb link (maybe with javascript you can) but you can put a link in the gallery title :thumb

[ExposeTheMoment]

Notice the bottom the CODE you told be to add.

CSS - http://www.exposethemoment.com/

http://www.exposethemoment.com/ (http://www.exposethemoment.com/)

Embedded Styles from http://www.exposethemoment.com/

.stctb{width:auto;height:auto;border-style:none;background-color:transparent;background-image:none;}.stctr{width:auto;height:auto;border-style:none;background-color:transparent;background-image:none;}.stctd{height:auto;border-style:none;background-color:transparent;background-image:none;}.stcdv{width:auto;height:auto;margin:0 px;padding:0px;background-color:transparent;background-image:none;font-size:1px;}.stca{width:auto;height:auto;border-style:none;margin:0px;padding:0px;background-color:transparent;background-image:none;}<!--.style4 {font-size: x-small}-->http://www.exposethemoment.com/expose.css (http://www.exposethemoment.com/expose.css)

BODY {margin: 0px; background:#4B565F;width=100%padding: 0;margin: 0;font-family:Verdana; font-size:8pt; color:#000000;}td {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt;color: #000000}a:link {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt;text-decoration: underline;color: #336666;}a:visited {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 8pt;text-decoration: underline;color: #336666;}a:active {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: pt;text-decoration: none;color: #339999;}a:hover {text-decoration: none;color: #FFFFFF;}.img {padding:5px;background:gold;border:1px solid black;}.bthead {font-weight: bold; color: #FFFFFF}.btnav {background-color: #375281;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; font-weight: bold; border: 1px solid #554F2D }.btnavbk {background-color: #C57FEB; color: #FFFFFF; border-left-color:#FFFFFF; border-left-width:1px; border-right-color:#FFFFFF; border-right-width:1px; border-top-color:#FFFFFF; border-top-width:0px; border-bottom-color:#FFFFFF; border-bottom-width:0px}.btfoot {border-left:0px solid #000000; border-right:0px solid #000000; border-top:1px solid #000000; border-bottom:1px solid #000000; background-color: #5ea7d2; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #E4E4E4; text-align: center }.btcontent { color: #000000; font-family:Verdana; font-size:8pt}.btnews { background-color: #FFFFFF; border: #999999; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #115b63; text-decoration:underline}h3 { font-family: Verdana; font-size: 14pt }/*=================================*//*==galleries, categories layout===*//*=================================*/ #galleriesBox .miniBox {margin:0 20px; padding:0; height:240px; width:138px;}#galleriesBox .miniBox .nav, #galleriesBox .miniBox .private, #galleriesBox .miniBox p.updated, #galleriesBox .miniBox p.description, #galleriesBox .miniBox p.albumTitle {display:block; text-align:center;}#galleriesBox .miniBox .photo {width:132px; height:auto; _height:1%;} #category #galleriesBox .albumLarge {width:342px; height:260px;margin:20px 11px; padding:0;}#category #galleriesBox .albumLarge .photoLarge {width:342px; height:auto; _height:1%;}#category #galleriesBox .albumLarge .albumTitle {clear:both; text-align:center;} #homepage #categoriesBox .miniBox {margin:0; padding:0; height:160px; width:172px;}#homepage #categoriesBox .miniBox .nav, #homepage #categoriesBox .miniBox .private {display:block; text-align:center;}#homepage #categoriesBox .miniBox .photo {width:172px; height:auto; _height:1%;}#footer, #footer .nav {color: black;}

So this confirms the CODE is there. Now whats the issue

[Addman8]

ANdy,

I set mine up like this and like it on the homepage, but when I go inside each category the galleries are 2 across and overly spaced vertically. The 3rd, 4th and subsequent galleries get lost down the page.

I have experimented to get it changed to no avail...any suggestions?

thanks,
matt


4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)


/*=================================*/
/*==galleries, categories layout===*/
/*=================================*/

/* Line up the boxes properly */
#galleriesBox .miniBox {
margin:0 20px;
padding:0;
height:260px;
width:142px;}
#galleriesBox .miniBox .nav, #galleriesBox .miniBox .private, #galleriesBox .miniBox p.updated, #galleriesBox .miniBox p.description, #galleriesBox .miniBox p.albumTitle {display:block; text-align:center;}
#galleriesBox .miniBox .photo {
width:142px;
height:auto;
_height:1%;}


/* the above, just for logged-in user */

.loggedIn #galleriesBox .miniBox {
margin:0 20px;
padding:0;
height:340px;
width:142px;}
#galleriesBox .miniBox .nav, #galleriesBox .miniBox .private, #galleriesBox .miniBox p.updated, #galleriesBox .miniBox p.description, #galleriesBox .miniBox p.albumTitle {display:block; text-align:center;}
#galleriesBox .miniBox .photo {
width:142px;
height:auto;
_height:1%;}

.editDescription textarea {
width: 142px;
}

#category #galleriesBox .albumLarge {
width:342px;
height:260px;
margin:20px 11px;
padding:0;}
#category #galleriesBox .albumLarge .photoLarge {
width:342px;
height:auto;
_height:1%;}
#category #galleriesBox .albumLarge .albumTitle {
clear:both;
text-align:center;}

/* the above, just for logged-in user */

.loggedIn #category #galleriesBox .albumLarge {
width:342px;
height:390px;
margin:20px 11px;
padding:0;}
#category #galleriesBox .albumLarge .photoLarge {
width:342px;
height:auto;
_height:1%;}
#category #galleriesBox .albumLarge .albumTitle {
clear:both;
text-align:center;}

#category .editDescription textarea {
width: 322px;
}


#category #galleriesBox .albumLarge .smbuttons {
width: 154px;
margin-left: 94px;
}

#category #galleriesBox .smbuttons {
width: 104px;
margin-left: 19px;
}

.homepage #galleriesBox .smbuttons {
width: 104px;
margin-left: 19px;
}

#homepage #categoriesBox .miniBox {
margin:0;
padding:0;
height:160px;
width:182px;}
#homepage #categoriesBox .miniBox .nav, #homepage #categoriesBox .miniBox .private {display:block; text-align:center;}
#homepage #categoriesBox .miniBox .photo {
width:182px;
height:auto;
_height:1%;}

[Andy]

I have experimented to get it changed to no avail...any suggestions?

thanks,
matt

Link me :D

[Addman8]

Link me :D


mattaddington.smugmug.com

Thanks Andy!

[Andy]

mattaddington.smugmug.com

Thanks Andy!
You're fine - need 6 or more for the thumbs to go small and then 4-across :D

http://mattaddington.smugmug.com/People

[Addman8]

You're fine - need 6 or more for the thumbs to go small and then 4-across :D

http://mattaddington.smugmug.com/People


Gotcha! You're the man...I really appreciate it!:thumb

ma

[raptorcaptor]

I got this working in most of my galleries. For some reason in my "raptors" category the galleries are displayed 4 across when I'm logged in, but otherwise it displays two across. :dunno

http://www.raptorcaptor.com/Raptors

Okay just saw the previous post about needing 6 galleries for it to go 4 across!

[dcyphert]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

Hi Andy,

What part of this CSS will tighten up the vertical space between rows?

Update:...I'm starting to make progress with this...Thanks.

[felix.reichardt]

Update: figured it out I believe ..

Hi,

I am using the coding below for my pages but for whatever reason the size of the gallery thumbs is different for some pages:

This one is fine:

http://felix-reichardt.smugmug.com/People/333723

while the thumbs on this page are much bigger:

http://felix-reichardt.smugmug.com/People/333727

Any idea why??? I have checked and it seems that the settings are the same.

Any help is appreciated! Thanks, Felix


Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[richW]

Update: figured it out I believe ..

Hi,

I am using the coding below for my pages but for whatever reason the size of the gallery thumbs is different for some pages:

This one is fine:

http://felix-reichardt.smugmug.com/People/333723

while the thumbs on this page are much bigger:

http://felix-reichardt.smugmug.com/People/333727

Any idea why??? I have checked and it seems that the settings are the same.

It looks like you did..Six galleries will return smaller thumbnails....

[felix.reichardt]

It looks like you did..Six galleries will return smaller thumbnails....

Mhh .. is there a way to force all thumbs of galleries to be the same size no matter how many galleries exists? I'm no expert at all so if anybody could help ...

ANYBODY???

[Mike Lane]

I suppose there may be a way of doing this with CSS. It'll take some work to make sure I've got all the various parts and pieces accounted for. Also anyone who is using the 4 across thumbnails or any other thumbnail display hack will have to have a special version just for that - which I may or may not have time to do. And I can't promise that whatever I come up with would work in every browser.

I guess what I'm saying is that the code I'd come up with would be sort of fragile and would take me some time to figure out. I'm going on vacation for a while so I'll see if I can work something out when I get back. No promises though.

For now, try not to worry about it too much. You can customize those larger boxes in much the same way that you can customize the smaller boxes. If you need help on that, ask away.

[Cecilia]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}


Hi, Andy,
I had pasted your code into my website, its work great. Thanks for the guide. However, the big thumbnail only show on my gallery page but not on category page. Which mean how should i do if i wan to show big thumbnail on category page as well? as like moonriverphotography.com style.

[Allen]

...
Hi, Andy,
I had pasted your code into my website, its work great. Thanks for the guide. However, the big thumbnail only show on my gallery page but not on category page. Which mean how should i do if i wan to show big thumbnail on category page as well? as like moonriverphotography.com style.
There are only two sizes of thumbs 150x150 and 100x100. If there are six or
more on the page they'll change to 100x100. That can not be changed. About
the only thing you can do is resize your thumbs square and they'll look bigger.

[Cecilia]

There are only two sizes of thumbs 150x150 and 100x100. If there are six or
more on the page they'll change to 100x100. That can not be changed. About
the only thing you can do is resize your thumbs square and they'll look bigger.


I had alredy set the Thumbnail size to 1*1 ratio. However, on the listing of category page, it still display small but when i click on the category and move into the gallery listing page, the listing box become big, while in category listing page the category box is small. any idea? If i would like to make all the display listing like this http://www.moonriverphotography.com/Galleries, is it posibble?:dunno

[Allen]

I had alredy set the Thumbnail size to 1*1 ratio. However, on the listing of category page, it still display small but when i click on the category and move into the gallery listing page, the listing box become big, while in category listing page the category box is small. any idea? If i would like to make all the display listing like this http://www.moonriverphotography.com/Galleries, is it posibble?:dunno
Andy's page is an html page with all that defined in the album description. I
though together an example of how to do that here (http://allen-steve.smugmug.com/gallery/3539056). You could create a new
private gallery for those two.

[Cecilia]

Andy's page is an html page with all that defined in the album description. I
though together an example of how to do that here (http://allen-steve.smugmug.com/gallery/3539056). You could create a new
private gallery for those two.

ohh. thanks alot. that help.
By the way, if i would like to put some image on the left side of my page as what andy did for his page, any guideline? http://www.moonriverphotography.com/Galleries ( Andy photo on the bottom left side) thanks thanks for help.:clap

[Legacy]

I would like to add some stylized border to the gallery thumbs, like in http://wellman.smugmug.com/. How is this done?

Was there an answer to this question? If there was I missed it!

[Legacy]

Was there an answer to this question? If there was I missed it!

This is how to change the colors - but not the "style".

http://blogs.smugmug.com/web-tricks/2005/08/23/green-borders/

[melanieruth]

I used the code you supplied for four gallery thumbs per row - looks great! I would like to decrease the space between the rows to approximately half the space there is now. Is this possible?

Thanks for your help!

[Allen]

I used the code you supplied for four gallery thumbs per row - looks great! I would like to decrease the space between the rows to approximately half the space there is now. Is this possible?

Thanks for your help!
In that CSS look for the height parts and tweak them.

[Skyes Art]

Hi,
I put this code in here (http://katwalkstudios.smugmug.com/Photography ) but it doesn't work for me.
I want the galleries to line up like you have them here: http://www.moonriverphotography.com/Services

Any help on what I am doing wrong?
Thanks so much




Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[johnnabrynn]

*this is great. i used the code. but i only want 3 gallery thumbs, so how can i center these three now? thanks,
johnna

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[Mike Lane]

*this is great. i used the code. but i only want 3 gallery thumbs, so how can i center these three now? thanks,
johnnaYou'll have to play around with the margin values. So when you see margin:0 28px; change the 28px to be something greater. Eventually you'll find the right number that gives you 3 across. You'll have to do the same for the margin:0 24px; (which will be a different, smaller number than the previous one).

Make sense?

[johnnabrynn]

thanks a bunch, mike. by the way, you are one of my faves on smugmug.
i have another question about margins: how can i make the top of my page not so fat? ---it needs less space on the top. my header image isnt that wide (vertically).
johnnabrynn.smugmug.com

You'll have to play around with the margin values. So when you see margin:0 28px; change the 28px to be something greater. Eventually you'll find the right number that gives you 3 across. You'll have to do the same for the margin:0 24px; (which will be a different, smaller number than the previous one).

Make sense?

[Mike Lane]

thanks a bunch, mike. by the way, you are one of my faves on smugmug. :lust aw shucks...
i have another question about margins: how can i make the top of my page not so fat? ---it needs less space on the top. my header image isnt that wide (vertically).
johnnabrynn.smugmug.comDid you fix this in the time it took me to respond? Your page looks fine to me. Maybe I'm missing something? :ear

[johnnabrynn]

:lust aw shucks...
Did you fix this in the time it took me to respond? Your page looks fine to me. Maybe I'm missing something? :ear

Ya i fixed the top (banner) margin, but viewers still must scroll a tiny bit. i want to eliminate that --so how can i take off some of the space around the "powered by smugmug" at the footer?
thanks mike,
johnnabrynn.smugmug.com

[Mike Lane]

Ya i fixed the top (banner) margin, but viewers still must scroll a tiny bit. i want to eliminate that --so how can i take off some of the space around the "powered by smugmug" at the footer?
thanks mike,
johnnabrynn.smugmug.comMy answer is, don't worry about it. It will depend greatly on the size and resolution of each individual's monitor, how many browser toolbars they have open, if their browser is maximized or not, etc, etc, etc. These variables will be out of your control so you should only focus on how it looks in general. :thumb

[johnnabrynn]

My answer is, don't worry about it. It will depend greatly on the size and resolution of each individual's monitor, how many browser toolbars they have open, if their browser is maximized or not, etc, etc, etc. These variables will be out of your control so you should only focus on how it looks in general. :thumb

ok, i'll take the pro's advice.
gracias
*i have a couple unrelated questions, maybe u can ever so graciously answer for me :) :
1. how do i get my banner to be on ALL the pages in my site (like in the gallery, etc)
2. how do i remove the clustr map (on bottom) from ALL other pages except the hompage?
3. how do i make all the thumbnails the same size -on the different pages?
THANK YOU
jb

[denisegoldberg]

1. how do i get my banner to be on ALL the pages in my site (like in the gallery, etc)
I already answered this question for you in this thread - http://www.dgrin.com/showthread.php?t=82844.

2. how do i remove the clustr map (on bottom) from ALL other pages except the hompage?
Put it inside of a div, and display that div only on the homepage.
3. how do i make all the thumbnails the same size -on the different pages?
jb
You currently can't do this without rolling your own category and subcategory pages. The thumbs are 150x150 if there are 5 or fewer galleries, and 100x100 if there are more than 5 galleries. This is something that has bothered me for a long time too, and I recently switched to using html-only pages for all of my category and subcategory pages instead of using the default smugmug pages. (I was actually driven by the desire for even larger thumbs...) This is not something that you should do lightly; it requires that when you add new galleries that you also must change the underlying structure (and yes, it requires that you be comfortable with html). It was important to me, but I suspect that most folks won't want to take on that kind of effort.

I'd highly recommend that if you have additional chunks of questions that you start your own thread to be the home of all of your questions. There's nothing wrong with adding to existing threads - but please don't post the same question in multiple threads. Many of us who help here are volunteers, and it really isn't helpful if multiple people end up answering the same question for a single individual.

--- Denise

[johnnabrynn]

I already answered this question for you in this thread - http://www.dgrin.com/showthread.php?t=82844.


Put it inside of a div, and display that div only on the homepage.

You currently can't do this without rolling your own category and subcategory pages. The thumbs are 150x150 if there are 5 or fewer galleries, and 100x100 if there are more than 5 galleries. This is something that has bothered me for a long time too, and I recently switched to using html-only pages for all of my category and subcategory pages instead of using the default smugmug pages. (I was actually driven by the desire for even larger thumbs...) This is not something that you should do lightly; it requires that when you add new galleries that you also must change the underlying structure (and yes, it requires that you be comfortable with html). It was important to me, but I suspect that most folks won't want to take on that kind of effort.

I'd highly recommend that if you have additional chunks of questions that you start your own thread to be the home of all of your questions. There's nothing wrong with adding to existing threads - but please don't post the same question in multiple threads. Many of us who help here are volunteers, and it really isn't helpful if multiple people end up answering the same question for a single individual.

--- Denise

ok, thanks. and totally understand. sorry to ask same questions in mult. threads. i'm a newbie and learning the etiquette here. now i know. again, thanks a million for all your support.
jb

[johnnabrynn]

I already answered this question for you in this thread - http://www.dgrin.com/showthread.php?t=82844.


Put it inside of a div, and display that div only on the homepage.

You currently can't do this without rolling your own category and subcategory pages. The thumbs are 150x150 if there are 5 or fewer galleries, and 100x100 if there are more than 5 galleries. This is something that has bothered me for a long time too, and I recently switched to using html-only pages for all of my category and subcategory pages instead of using the default smugmug pages. (I was actually driven by the desire for even larger thumbs...) This is not something that you should do lightly; it requires that when you add new galleries that you also must change the underlying structure (and yes, it requires that you be comfortable with html). It was important to me, but I suspect that most folks won't want to take on that kind of effort.

I'd highly recommend that if you have additional chunks of questions that you start your own thread to be the home of all of your questions. There's nothing wrong with adding to existing threads - but please don't post the same question in multiple threads. Many of us who help here are volunteers, and it really isn't helpful if multiple people end up answering the same question for a single individual.

--- Denise

**sorry, i tried to figure out your advice about displaying my clustr map only homepage... but to no success. can u help? how would i write the display on homepage only? the div's are already around it i believe. i have this now:
<div></div> <div align="center"> <a href="http://www4.clustrmaps.com/counter/maps.php?url=http://johnnabrynn.smugmug.com" id="clustrMapsLink"><img src="http://www4.clustrmaps.com/counter/index2.php?url=http://johnnabrynn.smugmug.com" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" /> </a> ******** type="text/javascript"> function cantload() { img = document.getElementById("clustrMapsImg"); img.x_x_onError = null; img.src = "http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg"; document.getElementById("clustrMapsLink").href = "http://www2.clustrmaps.com"; } img = document.getElementById("clustrMapsImg"); img.x_x_onError = cantload; </******** </div>

[johnnabrynn]

I already answered this question for you in this thread - http://www.dgrin.com/showthread.php?t=82844.


Put it inside of a div, and display that div only on the homepage.

You currently can't do this without rolling your own category and subcategory pages. The thumbs are 150x150 if there are 5 or fewer galleries, and 100x100 if there are more than 5 galleries. This is something that has bothered me for a long time too, and I recently switched to using html-only pages for all of my category and subcategory pages instead of using the default smugmug pages. (I was actually driven by the desire for even larger thumbs...) This is not something that you should do lightly; it requires that when you add new galleries that you also must change the underlying structure (and yes, it requires that you be comfortable with html). It was important to me, but I suspect that most folks won't want to take on that kind of effort.

I'd highly recommend that if you have additional chunks of questions that you start your own thread to be the home of all of your questions. There's nothing wrong with adding to existing threads - but please don't post the same question in multiple threads. Many of us who help here are volunteers, and it really isn't helpful if multiple people end up answering the same question for a single individual.

--- Denise

**sorry, i tried to figure out your advice about displaying my clustr map only homepage... but to no success. can u help? how would i write the display on homepage only? the div's are already around it i believe. i have this now:
<div></div> <div align="center"> <a href="http://www4.clustrmaps.com/counter/maps.php?url=http://johnnabrynn.smugmug.com" id="clustrMapsLink"><img src="http://www4.clustrmaps.com/counter/index2.php?url=http://johnnabrynn.smugmug.com" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" /> </a> ******** type="text/javascript"> function cantload() { img = document.getElementById("clustrMapsImg"); img.x_x_onError = null; img.src = "http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg"; document.getElementById("clustrMapsLink").href = "http://www2.clustrmaps.com"; } img = document.getElementById("clustrMapsImg"); img.x_x_onError = cantload; </******** </div>

[spurry05]

thanks for this

[ashepp]

Hi Andy, I've been trying to get a similar layout to your gallery on my own site at : http://ashepp.smugmug.com/galleries

Ideally I'd like to flow the galleries across the entire page as opposed to just a set of 4 in the middle of the page, much as you've got setup at
http://www.moonriverphotography.com/Galleries

Would you mind sharing the code to achieve this layout ?

Thanks!
Adam.

[denisegoldberg]

Ideally I'd like to flow the galleries across the entire page as opposed to just a set of 4 in the middle of the page.
See this thread for the code to stretch your galleries across the browser window - http://www.dgrin.com/showthread.php?t=93221.

--- Denise

[ashepp]

Thanks Denise, that worked a treat! Do you know of any way to keep the title text of the galleries on a consistent horizontal line as opposed to offset from the bottom of each thumbnail ? Looks a little messy when they're not lined up ?

Thanks again!


See this thread for the code to stretch your galleries across the browser window - http://www.dgrin.com/showthread.php?t=93221.

--- Denise

[denisegoldberg]

Thanks Denise, that worked a treat! Do you know of any way to keep the title text of the galleries on a consistent horizontal line as opposed to offset from the bottom of each thumbnail ? Looks a little messy when they're not lined up ?
The only way I know to do that is to set all of your galleries to use square thumbs.

--- Denise

[Peamoony]

Hello,

I have pasted the 4 across CSS code into my customization page and it works great in all but one gallery. How can I fix this? The gallery in question is: http://morningdewphotography.smugmug.com/Travel/509891


The titles are centered, but the thumbnails are only one across...:scratch

Thanks for the help,

Amanda

[bazancik]

argh.... I played with all the settings BUT the galleries would just do whatever they want to!

how can I make sure that in each gallery [my fotos / :D Space / Friends ] there are:
- max 4 galleries / categories per row
- centrered rather than aligned to the left
- the size of each gallery / subcategory being more-less like in :D Space at the moment

also atthe moment when navigating to FRIENDS the navbar "moves" slightly - any way to stop that from happening?

the 4x4 code does not seem to be working here - and I think it made the page much slower...

Thanks!!!

www.franeksiedlok.com (http://www.franeksiedlok.com/my%20fotos)

[Allen]

argh.... I played with all the settings BUT the galleries would just do whatever they want to!

how can I make sure that in each gallery [my fotos / :D Space / Friends ] there are:
- max 4 galleries / categories per row
- centrered rather than aligned to the left
- the size of each gallery / subcategory being more-less like in :D Space at the moment

also atthe moment when navigating to FRIENDS the navbar "moves" slightly - any way to stop that from happening?

the 4x4 code does not seem to be working here - and I think it made the page much slower...

Thanks!!!

www.franeksiedlok.com (http://www.franeksiedlok.com/my%20fotos)
Answered in your other post/thread.:thumb
http://www.dgrin.com/showthread.php?t=112218

[Allen]

Hello,

I have pasted the 4 across CSS code into my customization page and it works great in all but one gallery. How can I fix this? The gallery in question is: http://morningdewphotography.smugmug.com/Travel/509891


The titles are centered, but the thumbnails are only one across...:scratch

Thanks for the help,

Amanda
Change the red in this to override the Sand theme. You didn't modify the
theme did you?

.miniBox {width:122px !important; text-align:center; height:210px; margin:0 27px;}

[JosephLinaschke]

Super cool, thank you! Very clever too how if there's only three Galleries in a Category, they get larger and go three across.

Which of course begs the question; how can I make them ALWAYS go three across? I find I like the look of that best; getting a larger thumb, but with the title underneath, is grand.

Also… there is a LOT of space between rows of categories or galleries. What part of the code controls that?

see what I mean on http://gallery.josephlinaschke.com/galleries

thanks!
-joseph

[denisegoldberg]

Super cool, thank you! Very clever too how if there's only three Galleries in a Category, they get larger and go three across. Which of course begs the question; how can I make them ALWAYS go three across? I find I like the look of that best; getting a larger thumb, but with the title underneath, is grand.

Also… there is a LOT of space between rows of categories or galleries. What part of the code controls that?
Unfortunately you can't change the size of the thumbs. They are 150x150 if there are 5 or fewer galleries, and 100x100 if there are more than 5.

As far as the spacing goes, change the height values in this CSS -

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}
.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}
.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

.miniBox is used for the smaller thumbs and .albumLarge is used for the larger thumbs.

--- Denise

[JosephLinaschke]

oh I didn't even realize there were unique heights if you're logged in or not. So the not-logged-in height is just fine. Great, thanks for the education!

[cElements]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

>
>
>

My site is www.candidelements.com

I put this code in my CSS and it worked great for 3 galleries, but when I added my 4th it put is on a new row, I would like to have four or five accross a row like on moonriver.com...

Please help, thank you.

[Allen]

...
My site is www.candidelements.com (http://www.candidelements.com)

I put this code in my CSS and it worked great for 3 galleries, but when I added my 4th it put is on a new row, I would like to have four or five accross a row like on moonriver.com...

Please help, thank you.
See if this in CSS gets what you want.

#category,
.category_Photography #galleriesBox{
margin: 0 auto;
width: 990px;
}

[My3Sons]

I did the "4 galleries across" trick and it looks great in all of my categories except for the "Portfolio". Here there are only 3 across. Since there are only 4 galleries in this category, I think it would be better if just this page is 2 across instead. Is it possible to have just this category be 2x2? How do I do it?

Also, in Firfox, the galleries in my "Family" category are showing up as 3 across instead of 4. Any way to fix this?

My website is www.naturalphotography.smugmug.com (http://www.naturalphotography.smugmug.com)

Thanks, Melissa

[My3Sons]

Ok, I have another question: my "Details" category is also messed up. There are only 2 galleries in it, and after using the 4 across code, the 2 galleries are now stacked on top of each other (1 across). Can I get them back to 2 across without effecting the other galleries that are 4 across. (Sorry I didn't catch this until after my last post)

www.naturalphotography.smugmug.com (http://www.naturalphotography.smugmug.com)

-Melissa

[Ibster]

thanks for the info on creating a 4-column gallery display.

I implemented it - looks good, but one question. I now see a "customize" button under each gallery - is there a way to remove this?

[apbyj]

This is my first post so I'm hoping I'm doing this right. I had my site set up with 4 galleries across, but I decided to change my theme and now my galleries are all in a vertical line. Help!!

btw: I had no idea what-so-ever about how to do all of this stuff and I managed to put together a website with all of your great tutorials - thank you!

www.angoldphotography.smugmug.com (http://www.angoldphotography.smugmug.com)

[apbyj]

thanks for the info on creating a 4-column gallery display.

I implemented it - looks good, but one question. I now see a "customize" button under each gallery - is there a way to remove this?
This is only when you are logged in. Your visitor's will not see the customize button

[apbyj]

This is my first post so I'm hoping I'm doing this right. I had my site set up with 4 galleries across, but I decided to change my theme and now my galleries are all in a vertical line. Help!!

btw: I had no idea what-so-ever about how to do all of this stuff and I managed to put together a website with all of your great tutorials - thank you!

www.angoldphotography.smugmug.com (http://www.angoldphotography.smugmug.com)

oops, I must have missed it before...found post from Allen to fix for sand theme, woo hoo, now it works, thank you!:barb

[nightowlphotography]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

Hi Andy, just wanted to say thanks for the snippet. Added it to my site and it's working great. Just what I was looking for.

[mattlehmanphoto]

Thanks, works great!

http://photos.mattlehmanphoto.com/

[robertj]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

Hi there,

I tried this code in my site, and there is still a lot of dead space in it. Also, it puts three on one line, and one below. So, I am hoping to clean this up a bit. Either four in one row or two in two rows.

One more... is it possible to make this gallery page stretchy?

I have used this code for my "nature galleries" page:

http://robertjirucha.smugmug.com/Nature

[themonman]

This works great!
Now, how do I get the galleries to align center on the page?
thanks
themonman
site: http://cuestaPhoto.com

[133photo.com]

How can I make my categories and galleries 5x5? I'm about to pull my hair out.

www.133photo.com


:hang

[shielamarie]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}







If you dont mind,I can't figure out how to remove the dead space inbetween the rows,any ideas.Please and thank you.

[JFro]

I hope you notice this reply to a really old post...
Works perfectly! But is it possible to change this code to be 2 across rather than 4 across?

[Allen]

I hope you notice this reply to a really old post...
Works perfectly! But is it possible to change this code to be 2 across rather than 4 across?
Play with the r/l margin by increasing it until only two thumbs are centered.

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}

[morgan20]

Can anyone tell me then what to change to increase the amount of galleries across the page to say 6 or 8 please?

***** Never mind got it.

[squirl033]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}



Andy... is there a way to display gallery thumbs 3 across instead of 4? Also, I tried putting this in my CSS, but nothing happened when I saved it... the home page looked the same. My site is www.northwestnaturalimagery.com ....

[Sujoy]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[Sujoy]

Thks Andy.
My home page now has categories four across but unfortunately the space between the categories is very large. How do I reduce this space so that it looks like moonriver's gallery page?
Thks
Sujoy

[Sujoy]

my site is www.sujoydas.com (http://www.sujoydas.com)

Thks Andy.
My home page now has categories four across but unfortunately the space between the categories is very large. How do I reduce this space so that it looks like moonriver's gallery page?
Thks
Sujoy

[TaylorVerde]

Is there a way to change the spacing between rows in galleries? I like how its spaced horizontally but vertically theres tons of room (www.taylorverdephotography.smugmug.com (http://www.taylorverdephotography.smugmug.com)) check out the portfolio you will see what I mean.

Thanks

[Allen]

Is there a way to change the spacing between rows in galleries? I like how its spaced horizontally but vertically theres tons of room (www.taylorverdephotography.smugmug.com (http://www.taylorverdephotography.smugmug.com)) check out the portfolio you will see what I mean.

Thanks
Change the height in this.

.boxBottom .albumLarge {width:192px; height:220px; text-align:center; margin:0 24px;}

[tubay]

how do you make it 5 across? i wish i understand the numbers in the CSS.

is it possible to have 4 across in one gallery and 5 in another?




Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[Allen]

how do you make it 5 across? i wish i understand the numbers in the CSS.

is it possible to have 4 across in one gallery and 5 in another?


It's all about the r/l margin, 28px in this. Post a link to your site and we can help.

margin:0 28px;

You can add specific CSS to cover different pages. These are gallery/category/sub-cat
boxes on category/sub-cat pages that these thumbs show on, not gallery pages.

[taylowa]

Thank you for the code but I have a problem... For some reason, on some of my categories it is correct and all the pictures are all small and the rectangle (http://pictures.warnertaylor.com/Sports (http://pictures.warnertaylor.com/Sports)) but on some they are small and square (http://pictures.warnertaylor.com/Parties-and-Events (http://pictures.warnertaylor.com/Parties-and-Events)) then on some subcategories they are both square and rectangle (http://pictures.warnertaylor.com/Parties-and-Events/2010-Parties-and-Events (http://pictures.warnertaylor.com/Parties-and-Events/2010-Parties-and-Events)). Can you help explain this? I did add the following lines before the block of code on this thread to remove the updated date and the gallery description.
#category .miniBox p.description,
#subcategory .miniBox p.description{display:none;}
.boxBottom p.updated {display:none}
Thanks

[HKAnimal]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}




I tried dropping this into CSS box however it does nto seemed to have changed it I only want to feature 3 galleries so I can display them all across the bottom of the screen. site is www.iannye-photography.smugmug.com (http://www.iannye-photography.smugmug.com)

[Allen]

...


I tried dropping this into CSS box however it does nto seemed to have changed it I only want to feature 3 galleries so I can display them all across the bottom of the screen. site is www.iannye-photography.smugmug.com (http://www.iannye-photography.smugmug.com)
Add this to your CSS to specifically apply to the featured box. The 60px R/L margin
spreads out the thumbs. Also added some top margin, 20px, for a little top space.
margin: top R/L bottom;

#featuredBox .miniBox {width:122px; text-align:center; height:210px; margin:20px 60px 0;}

[Shop Dude]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

This worked great, but on this page http://www.digital-revelations.com/Travel/Hong-Kong it seems that the space isn't wide enough. Could you point me in the right direction to fix this?
Thanks,
Brad

[Allen]

...
This worked great, but on this page http://www.digital-revelations.com/Travel/Hong-Kong it seems that the space isn't wide enough. Could you point me in the right direction to fix this?
Thanks,
Brad
This section controls the large thumbs. Decrease the red R/L margin.

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 15px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

[loonyce]

Hi

I have 2 row of galery. What value should i change to make the space betwen the first row and the second row smaller
Thanks

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[Allen]

Hi

I have 2 row of galery. What value should i change to make the space betwen the first row and the second row smaller
Thanks


Adjust the height in this
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}

[joycewaltersphotoes]

Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[joycewaltersphotoes]

I have tried posting the above code several times in my CSS. I can't get it to work. I want my Galleries page to look like Moon River's where there are rows and the thumbnails are not spread apart like mine are now. Thanks. joycewaltersphotoes.smugmug

[Allen]

I have tried posting the above code several times in my CSS. I can't get it to work. I want my Galleries page to look like Moon River's where there are rows and the thumbnails are not spread apart like mine are now. Thanks. joycewaltersphotoes.smugmug
Remove the red extra }

#homepage, #bioBox, #bioBox .boxBottom, #userBio {padding-top: 0; margin-top: 0;}
.homepage #breadcrumb {display: none;}
}

/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */

[joycewaltersphotoes]

I can't believe removing the one little character fixed it! You guys are great. Thank you very much!

[tubay]

how do you arrange the albums in a 4-gallery-per-row setup? thanks

[Allen]

how do you arrange the albums in a 4-gallery-per-row setup? thanks
Mini-box hack
See >>> CUSTOMIZATION: Start here <<< at top of this forum.
Mini-box hack #10 in the ADVANCED Customization FAQ:
http://www.dgrin.com/showthread.php?t=52811
http://www.dgrin.com/showpost.php?p=300387&postcount=8

[tubay]

i copied the code shown in the second link below, but there it doesn't give me an arrange gallery button.


Mini-box hack
See >>> CUSTOMIZATION: Start here <<< at top of this forum.
Mini-box hack #10 in the ADVANCED Customization FAQ:
http://www.dgrin.com/showthread.php?t=52811
http://www.dgrin.com/showpost.php?p=300387&postcount=8

[Allen]

i copied the code shown in the second link below, but there it doesn't give me an arrange gallery button.
There is no arrange button. The spacing is handled by the R/L margins. Got a link to your site so we can help?

[tubay]

Allen, i got 2 sites. here's the problematic one: http://www.foldedpaperphotography.com/ClientAccess

here's my first site with the ability to sort galleries: http://www.tubayyabut.com/architecture



There is no arrange button. The spacing is handled by the R/L margins. Got a link to your site so we can help?

[tubay]

Allen, please see attached photo. that's from my first website. thanks.


Allen, i got 2 sites. here's the problematic one: http://www.foldedpaperphotography.com/ClientAccess

here's my first site with the ability to sort galleries: http://www.tubayyabut.com/architecture

[Allen]

Allen, i got 2 sites. here's the problematic one: http://www.foldedpaperphotography.com/ClientAccess

here's my first site with the ability to sort galleries: http://www.tubayyabut.com/architecture
What is problematic? How many wide do you want them?

[tubay]

Allen, i don't have a problem with how wide the gallery is. i want the ability to sort or arrange my galleries. you told me that there is no arrange button, but please see attached photo. the photo is from my first website tubayyabut.com . now i want the ability arrange galleries in my second site foldedpaperphotography.com.


What is problematic? How many wide do you want them?

[Allen]

Allen, i don't have a problem with how wide the gallery is. i want the ability to sort or arrange my galleries. you told me that there is no arrange button, but please see attached photo. the photo is from my first website tubayyabut.com . now i want the ability arrange galleries in my second site foldedpaperphotography.com.
Oh! That! Click it for the arrange page. On the main category/gallery box the sort has to be set to "position" instead of "recent".
Then the "arrange" will show.
You do not have your main category/gallery box active so look in your control panel under the homepage tab and do it there.
http://help.smugmug.com/customer/portal/articles/93317
http://cdn.smugmug.com/img/help/arrange-albums/host-photos-2.gif

[One Moment One Shot]

How do I make the all the Gallery pictures "square" after adding this below?


Thank you, Andy.

First off, my website is ourlife.smugmug.com.

As for 4 gallery thumbs per row on the homepage, like in moonriver, i can not find a setting in the Gallery->Customize page. What setting is it?

Thank you,
Mark
4-across is not a gallery customization setting. It's done by CSS. Put this in your CSS and see how you like it :)

EDIT by Mike Lane: I'm not sure why I made this code so long and drawn out. The old code has now been updated. Bear in mind that this code depends heavily on what the theme does, if your galleries have the clean option selected etc etc. For that reason it is impossible to give one solution to this. Use this code as a starting point and then if you have trouble making it look like you want, post a new thread asking for help.
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[Allen]

How do I make the all the Gallery pictures "square" after adding this below?


I'm assuming you are referring to the thumbs. In each gallery you can set the thumbnails to square.

Under gallery settings check square.

Look & Feel

Thumbnails: Square: Original: Changes will take a few minutes to appear...

[One Moment One Shot]

I can get it to change within each gallery but when viewing my gallery page prior to that step some of my portraits images show up and doesn't keep it square.

On this page: http://onemomentoneshot.smugmug.com/galleries


I'm assuming you are referring to the thumbs. In each gallery you can set the thumbnails to square.

Under gallery settings check square.

Look & Feel

Thumbnails: Square: Original: Changes will take a few minutes to appear...

[Allen]

I can get it to change within each gallery but when viewing my gallery page prior to that step some of my portraits images show up and doesn't keep it square.

On this page: http://onemomentoneshot.smugmug.com/galleries
That will center each square, for portraits you'll most likely have to adjust the corp, probably slide them
up one at a time. Sure wish Smug would sense a portrait and apply the crop in the upper third.

Look under tools > more > crop photo

btw, I'm not seeing any square crops on your site, have you done any?

[One Moment One Shot]

The portraits don't show everytime because of the random image rotation but when they do it throws off the format.

That will center each square, for portraits you'll most likely have to adjust the corp, probably slide them
up one at a time. Sure wish Smug would sense a portrait and apply the crop in the upper third.

Look under tools > more > crop photo

btw, I'm not seeing any square crops on your site, have you done any?

[JayP]

Hi. I've used the code to get the 4 across which is great - how can I make the thumbnails larger with less space in between? I am not sure which values to change in the code. I also have ??s about the nav bar I set up but will do a separate post on that. Thanks.

Jay
www.bluewaterprism.com

[denisegoldberg]

Hi. I've used the code to get the 4 across which is great - how can I make the thumbnails larger with less space in between?
To make the thumbs larger, see Now you can force gallery thumbnails to be larger (http://www.dgrin.com/showthread.php?t=207570).

In the future I'd recommend not tacking unrelated questions onto existing threads; you'll get an answer faster posting a new thread. And if a thread is titled "name's customization thread", that type of thread is usually intended to answer questions for that person only, to keep an individual's questions in a single thread.

--- Denise

[JayP]

Thanks

Jay