Hello,

I recently created a subcategory for the my travel category. I am interested in finding out how I can center the gallery thumbnails Below is the linke to the travel subcategories:

http://www.jamesreiningerphotography.com/Travel

Any help would be greatly appreciated.

Thanks,

James

Originally Posted by Ogre Hello, I recently created a subcategory for the my travel category. I am interested in finding out how I can center the gallery thumbnails Below is the linke to the travel subcategories: http://www.jamesreiningerphotography.com/Travel Any help would be greatly appreciated. Thanks, James

Manually centering thumbs is done by playing mainly with the R/L margins in the CSS below.
.miniBox acts on thumbs 100x100 and .boxBottom .albumLarge acts on 150x150 size thumbs.

.miniBox {width:122px; text-align:center; height:210px; margin:0 26px;}
  .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;}
  .category_Travel .boxBottom .albumLarge {margin:20px 4px 0;}
  .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;}

BUT, your pages stretch so it would be impossible to center them because thumbs always fill from
the left. You'd have to set a static page width. Also every page might have a different number of
thumbs so each specific cat/sub-cat page would need to be specifically set.

Originally Posted by Allen Manually centering thumbs is done by playing mainly with the R/L margins in the CSS below. .miniBox acts on thumbs 100x100 and .boxBottom .albumLarge acts on 150x150 size thumbs. .miniBox {width:122px; text-align:center; height:210px; margin:0 26px;} .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;} .category_Travel .boxBottom .albumLarge {margin:20px 4px 0;} .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;} BUT, your pages stretch so it would be impossible to center them because thumbs always fill from the left. You'd have to set a static page width. Also every page might have a different number of thumbs so each specific cat/sub-cat page would need to be specifically set.

Hmmm.... So if I wanted to center the gallery thumbnails for each category and subcategory, I would need to do seperate coding for each cat/subcategory screen?

Does that slow down loading time?

I also assuming that if were to add a new gallery to any cat/subcategory, I would also need to redo the coding for that screen??

Thanks,


James

Originally Posted by Ogre Hmmm.... So if I wanted to center the gallery thumbnails for each category and subcategory, I would need to do seperate coding for each cat/subcategory screen? Does that slow down loading time? I also assuming that if were to add a new gallery to any cat/subcategory, I would also need to redo the coding for that screen?? Thanks, James

You would set one static width for all cat/subcats something like maybe between 800 > 900 then
adjust margins for a filled row. The last non-filled row will be left justified. See example here and click
the different months upper right.

I have the hack "make all thumbs 150x150" and it does slightly slow thumbs loading but it's well worth
not seeing any 100x100 thumbs on a page with less then six thumbs.

Originally Posted by Allen You would set one static width for all cat/subcats something like maybe between 800 > 900 then adjust margins for a filled row. The last non-filled row will be left justified. See example here and click the different months upper right. I have the hack "make all thumbs 150x150" and it does slightly slow thumbs loading but it's well worth not seeing any 100x100 thumbs on a page with less then six thumbs.

Ok, I am not a CSS expert. How do you set up static width? And if I were to do this, would it negatively effect how these screens load on my customers computers- ie appearing fine on some, but "goofy" on others.

James

Originally Posted by Ogre Ok, I am not a CSS expert. How do you set up static width? And if I were to do this, would it negatively effect how these screens load on my customers computers- ie appearing fine on some, but "goofy" on others. James

All computers should look the same. Some screens might require side scrolling if not wide enough.
These are all the rules in my CSS effecting the width of the thumbs boxes. It is fine tuned for my site.
It should give you an idea of the coding needed.

.boxBottom .albumLarge {width:172px !important; height:240px; text-align:center; margin:0 5px;}
    #content.shareHomepage .boxBottom .albumLarge {margin:0 5px;}
    #featuredBox           .boxBottom .albumLarge {margin:10px 1.5px 0;}
.boxBottom .albumLarge .albumTitle {width:172px;}
.albumLarge .photoLarge {float:none; width:172px !important; height:auto; _height:1px;}
.albumLarge .updated {width:172px !important;}


#category.category  {
    width: 990px !important;
    margin: 60px auto 0;
}

#category.subcategory #galleriesBox {
    width: 958px !important;
    margin: 0 auto;
    padding-top: 10px;
}

#category.subcategory  {
    width: 990px !important;
    margin: 60px auto 0;
}

#category.subcategory #galleriesBox .boxBottom {
    padding-top: 30px;
}

Originally Posted by Allen All computers should look the same. Some screens might require side scrolling if not wide enough. These are all the rules in my CSS effecting the width of the thumbs boxes. It is fine tuned for my site. It should give you an idea of the coding needed. .boxBottom .albumLarge {width:172px !important; height:240px; text-align:center; margin:0 5px;} #content.shareHomepage .boxBottom .albumLarge {margin:0 5px;} #featuredBox .boxBottom .albumLarge {margin:10px 1.5px 0;} .boxBottom .albumLarge .albumTitle {width:172px;} .albumLarge .photoLarge {float:none; width:172px !important; height:auto; _height:1px;} .albumLarge .updated {width:172px !important;} #category.category { width: 990px !important; margin: 60px auto 0; } #category.subcategory #galleriesBox { width: 958px !important; margin: 0 auto; padding-top: 10px; } #category.subcategory { width: 990px !important; margin: 60px auto 0; } #category.subcategory #galleriesBox .boxBottom { padding-top: 30px; }

Thanks Allen! Now, how do I get the text back underneath the thumbnails?

James

Originally Posted by Ogre Thanks Allen! Now, how do I get the text back underneath the thumbnails? James

You seem to have lost the rest of the CSS.

/* == 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:172px !important; height:240px; text-align:center; margin:0 5px;}
    #content.shareHomepage .boxBottom .albumLarge {margin:0 5px;}
    #featuredBox           .boxBottom .albumLarge {margin:10px 1.5px 0;}
.boxBottom .albumLarge .albumTitle {width:172px;}
.albumLarge .photoLarge {float:none; width:172px !important; height:auto; _height:1px;}
.albumLarge .updated {width:172px !important;}

.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;}

Check out this thread to make all thumbs 150x150.
http://www.dgrin.com/showthread.php?t=207570

Originally Posted by Allen You seem to have lost the rest of the CSS. /* == 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:172px !important; height:240px; text-align:center; margin:0 5px;} #content.shareHomepage .boxBottom .albumLarge {margin:0 5px;} #featuredBox .boxBottom .albumLarge {margin:10px 1.5px 0;} .boxBottom .albumLarge .albumTitle {width:172px;} .albumLarge .photoLarge {float:none; width:172px !important; height:auto; _height:1px;} .albumLarge .updated {width:172px !important;} .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;} Check out this thread to make all thumbs 150x150. http://www.dgrin.com/showthread.php?t=207570

Thanks again Allen! However, since each of cat/subcategories have different amount of galleries in them, it appears I need write a separate line of coding for each.

I am curious. Is there way to set up margins depending on the number galleries?

James

I don't think there is a way to code it to detect the number of galleries and have it adjust the width based on that.

Originally Posted by Smug Eric I don't think there is a way to code it to detect the number of galleries and have it adjust the width based on that.

Thank you Allen and Eric for your help. Cat/Subcategory screens look much better now. I have a few more issues I want to address. However, if I need help, I will generate a new thread.

James