• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Page 1  of  2
1 2
Old Sep-28-2011, 07:38 PM
#1
kiwichap is offline kiwichap OP
Beginner grinner
kiwichap's Avatar
6 thumbs per row
I found a post on how to make thumbs go 4 across the page. Can I go full screen width?
What I would like to know is if I can go 6 thumbs per row or maybe eight? Is that possible? If so could you point me in the right direction, I would appreciate it.

http://chris-newman.smugmug.com/
Old Sep-29-2011, 02:33 AM
#2
rainforest1155 is offline rainforest1155
SmugMug Support Hero
rainforest1155's Avatar
Hi and welcome to Dgrin!

Take a look at step 3 from this post on making your homepage stretch:
http://www.dgrin.com/showthread.php?...etchy+homepage
I'm guessing that might stretch your galleries box as well to fit whatever width the browser window is set to.

Sebastian
__________________
Sebastian
SmugMug Support Hero

look on the bright side
http://www.SebastianHosche.com
Old Jan-17-2012, 03:29 AM
#3
colinpurrington is offline colinpurrington
Big grins
colinpurrington's Avatar
Any success on getting more than 4 galleries per row? I thought that selecting "stretchy" would allow galleries to fill the full dimension of the browser, but default seems to be just two. I found hack to make it 4, but that hack introduces too much white space in between rows. I'd love to find a hack that packs categories/galleries in a bit more tightly, with titles below each gallery.
__________________
Colin Purrington (Swarthmore, PA USA)
smugmug site | blog
Old Jan-17-2012, 07:53 AM
#4
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by kiwichap View Post
I found a post on how to make thumbs go 4 across the page. Can I go full screen width?
What I would like to know is if I can go 6 thumbs per row or maybe eight? Is that possible? If so could you point me in the right direction, I would appreciate it.

http://chris-newman.smugmug.com/
Need to increase the page and box width to show 6 across. Then reduce the R/L minibox margin so 6
fit. Also increase height so all text under thumb is seen. Add/change red.
Code:
.miniBox {width:122px; text-align:center; height:240px; margin:0 12px;}

#homepage,
#galleriesBox {
   width: 900px;
   margin: 0 auto;
}
     /* adds some space above thuimbs */
#galleriesBox .boxBottom { 
   padding-top: 20px;
}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-17-2012, 07:56 AM
#5
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by colinpurrington View Post
Any success on getting more than 4 galleries per row? I thought that selecting "stretchy" would allow galleries to fill the full dimension of the browser, but default seems to be just two. I found hack to make it 4, but that hack introduces too much white space in between rows. I'd love to find a hack that packs categories/galleries in a bit more tightly, with titles below each gallery.
See post #4, the height sets the space vertically between thumbs. That line is for 6 or more thumbs.
This line sets the 5 or less larger thumbs.
.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-17-2012, 10:00 AM
#6
colinpurrington is offline colinpurrington
Big grins
colinpurrington's Avatar
Oooh. Got the 6 to display, but no text underneath even when I increase height (tried 800px, eg).
__________________
Colin Purrington (Swarthmore, PA USA)
smugmug site | blog
Old Jan-17-2012, 10:05 AM
#7
colinpurrington is offline colinpurrington
Big grins
colinpurrington's Avatar
I'm assuming there's no way to display variable numbers of galleries in a window depending upon browser window size? I've seen some smugmug homepages do this, but I think they went to 3rd-party customizer. E.g., http://cleantth.smugmug.com/galleries. That would be ideal, of course.
__________________
Colin Purrington (Swarthmore, PA USA)
smugmug site | blog
Old Jan-17-2012, 10:25 AM
#8
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by colinpurrington View Post
Oooh. Got the 6 to display, but no text underneath even when I increase height (tried 800px, eg).
You are missing the 4 across CSS that was modified for 6 across.
Replace this part of your CSS with this. Had to add category box in there also.
Also change height to 180px to reduce vertical space.
Code:
/* show six galleries per row allen */
#homepage,
#categoriesBox,
#galleriesBox {
   width: 900px;
   margin: 0 auto;
}

/* adds some space above thumbs allen */
#categoriesBox .boxBottom,
#galleriesBox .boxBottom { 
   padding-top: 20px;
}

/* ==================================================== */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ==================================================== */

.miniBox {width:122px; text-align:center; height:180px; margin:0 12px;}
  .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;}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-17-2012, 10:33 AM
#9
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by colinpurrington View Post
I'm assuming there's no way to display variable numbers of galleries in a window depending upon browser window size? I've seen some smugmug homepages do this, but I think they went to 3rd-party customizer. E.g., http://cleantth.smugmug.com/galleries. That would be ideal, of course.
Change this
Code:
//* show six galleries per row allen */
#homepage,
#categoriesBox,
#galleriesBox {
  width: 900px;
  margin: 0 auto;
}

/* adds some space above thumbs allen */
#categoriesBox .boxBottom,
#galleriesBox .boxBottom { 
  padding-top: 20px;
}

/* ==================================================== */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ==================================================== */

.miniBox {width:122px; text-align:center; height:240px; margin:0 12px;}
 .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;}
to this
Code:
.galleries #homepage, #content.userKeywords,
#header_wrapper, #footer_wrapper, #cobrand_footer,
#category, #subcategory, #header,
#smugmug, .smugmug #header, .smugmug #footer 
{margin-left: 15px;margin-right: 15px;min-width: 755px;
width: auto;_width: expression
(document.documentElement.clientWidth < 790? "760px" : "auto");}

/* adds some space above thumbs allen */
#categoriesBox .boxBottom,
#galleriesBox .boxBottom { 
  padding-top: 20px;
}

/* ==================================================== */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ==================================================== */

.miniBox {width:122px; text-align:center; height:180px; margin:0 12px;}
 .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;}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-17-2012, 10:34 AM
#10
colinpurrington is offline colinpurrington
Big grins
colinpurrington's Avatar
re: "Also change height to 180px to reduce vertical space" I'm unclear which height I should reduce. I tried the 180px ht, but nothing changed.
__________________
Colin Purrington (Swarthmore, PA USA)
smugmug site | blog
Old Jan-17-2012, 10:38 AM
#11
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by colinpurrington View Post
re: "Also change height to 180px to reduce vertical space" I'm unclear which height I should reduce. I tried the 180px ht, but nothing changed.
See my last post above, 180px in red.
Edit the R/L 12px to spread them out.
margin:0 12px;
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-17-2012, 10:46 AM
#12
colinpurrington is offline colinpurrington
Big grins
colinpurrington's Avatar
OK, that caused galleries to wrap wrap when window made smaller (5 were retained, 2 went to next row). But changing 180px to smaller number doesn't seem to decrease space between rows.
__________________
Colin Purrington (Swarthmore, PA USA)
smugmug site | blog
Old Jan-17-2012, 10:55 AM
#13
colinpurrington is offline colinpurrington
Big grins
colinpurrington's Avatar
Ack. I figured out my problem. Owner view doesn't show ht changes, but switching to Visitor view does. So 150px for height might be OK for my needs. Now I need to fuss with getting the text a tad closer to image. I'm assuming there's a way to do that in the code you sent me.
__________________
Colin Purrington (Swarthmore, PA USA)
smugmug site | blog
Old Jan-17-2012, 11:03 AM
#14
colinpurrington is offline colinpurrington
Big grins
colinpurrington's Avatar
Actually, 180px is the best (as you probably knew). I forgot that some of my gallery names wrapped over to second line, so smaller height smooshed into image in lower row.
__________________
Colin Purrington (Swarthmore, PA USA)
smugmug site | blog
Old Jan-17-2012, 11:08 AM
#15
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by colinpurrington View Post
Ack. I figured out my problem. Owner view doesn't show ht changes, but switching to Visitor view does. So 150px for height might be OK for my needs. Now I need to fuss with getting the text a tad closer to image. I'm assuming there's a way to do that in the code you sent me.
Yal, the logged in page uses other lines of that code. I leave it alone, not worth the trouble.

Not sure how to get the text higher, don't see it in the code.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-17-2012, 11:10 AM
#16
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by colinpurrington View Post
..
Those thumbs go to 100x100 when 6 or more, might look at this thread, forces thumbs to 150x150.
http://www.dgrin.com/showthread.php?t=207570

I use it with good results here.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jan-17-2012, 11:11 AM
#17
colinpurrington is offline colinpurrington
Big grins
colinpurrington's Avatar
Thanks, Allen, as always. This should work great as long as I can keep my gallery titles to 2 lines of text or less.
__________________
Colin Purrington (Swarthmore, PA USA)
smugmug site | blog
Old Jan-17-2012, 11:13 AM
#18
colinpurrington is offline colinpurrington
Big grins
colinpurrington's Avatar
Oooh, that page looks great. 150x150px is so much better. Thanks -- I'll check that out.
__________________
Colin Purrington (Swarthmore, PA USA)
smugmug site | blog
Old Jan-17-2012, 11:14 AM
#19
colinpurrington is offline colinpurrington
Big grins
colinpurrington's Avatar
Of course, I'd probably have to delete all the changes I just made!
__________________
Colin Purrington (Swarthmore, PA USA)
smugmug site | blog
Old Jan-17-2012, 11:14 AM
#20
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by colinpurrington View Post
Oooh, that page looks great. 150x150px is so much better. Thanks -- I'll check that out.
If you switch the formatting is handle mainly by this line.

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

I also set a static page/box width.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Page 1  of  2
1 2
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
Combine thumbs from sub-categories and galleries into one list jfriend Legacy SmugMug Customization 76 Jul-10-2012 12:22 PM
Way to keep custom-cropped square thumbs from reverting? WinsomeWorks SmugMug Support 0 Oct-19-2009 06:32 PM
Making Gallery Category Thumbs have same look dcyphert Legacy SmugMug Customization 12 Jul-12-2007 08:37 AM
SMUGSEARCH and All Thumbs LateSky Legacy SmugMug Customization 0 Oct-23-2006 12:43 PM
smugmug vs. pbase - Does anyone use the smugmug "traditional" view? jfriend SmugMug Support 45 Feb-17-2006 08:48 AM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump