• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization how to make galleries 3 across with text below?

Need some help with your New SmugMug Site?

Dgrin Challenges

They're back! Our latest series of Dgrin Challenges, the OOYCZ Challenges (Out of Your Comfort Zone), is a series of challenges to help you improve your photography by stepping out of your comfort zone and trying something new. Our challenge leader says "Consider it like a photography class with no diplomas.". Get started with OOYCZ by reading the Challenge Guide.

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
Old Jun-01-2010, 05:00 AM
#1
lunarphile is offline lunarphile OP
Big grins
how to make galleries 3 across with text below?
Hello,

I saw this helpfun fourm bit on making 4 gallery thumbs per row, but can't figure out to modify these instructions for 3 thumbnail rows... with text below. Perhaps it is the fact that its 5am and I'm still trying to modify my site but could use some help.
http://www.dgrin.com/showpost.php?p=300387&postcount=8

i was looking for variable that indicate how many per line, but it looks like maybe i need to do calcuations on how wide i want the miniboxes to be to fit in the frame size? but dawn has broke and the brids are chirping so its time for me to sleep on this.

My site is:
http://www.lunarphile.com

Thanks

Jason
Old Jun-01-2010, 11:19 AM
#2
jfriend is offline jfriend
Scripting dude-volunteer
You are correct. Put the 4-across code in and then you can tweak a few widths to change it to only 3-across if you want. If you need help, then put the 4-across code in first and post back after that's in.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jun-01-2010, 12:26 PM
#3
lunarphile is offline lunarphile OP
Big grins
by jove i think i've done it!

here is my modified CSS code, would appreciate other taking a gander to see if there are any newb errors or oversights. basically took the famous #10 here answer and changed:
122->180
112->170
192->250

my lingering question is what is the difference between "minibox" and "albumLarge", or maybe i should ask where can i see the differences in them? are miniboxes what I see on the homepage?

/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* i am trying to make 3 column wide galleries */
/* ================================================== == */
.miniBox {width:180px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:180px; height:auto; _height:1px;}
.miniBox .albumTitle {width:180px;}
.miniBox .description {width:180px;}
.miniBox .updated {width:180px;}
.loggedIn .miniBox {height:auto; min-height:250px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:180px;}
.loggedIn .miniBox input {width:180px;}
.loggedIn .miniBox textarea {width:170px;}
.boxBottom .albumLarge {width:250px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:250px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:250px;}
.albumLarge .description {width:250px;}
.albumLarge .updated {width:250px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:250px;}
.loggedIn .albumLarge input {width:250px;}
.loggedIn .albumLarge textarea {width:222px;}
Old Jun-01-2010, 12:33 PM
#4
jfriend is offline jfriend
Scripting dude-volunteer
Quote:
Originally Posted by lunarphile View Post
by jove i think i've done it!

here is my modified CSS code, would appreciate other taking a gander to see if there are any newb errors or oversights. basically took the famous #10 here answer and changed:
122->180
112->170
192->250

my lingering question is what is the difference between "minibox" and "albumLarge", or maybe i should ask where can i see the differences in them? are miniboxes what I see on the homepage?

/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* i am trying to make 3 column wide galleries */
/* ================================================== == */
.miniBox {width:180px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:180px; height:auto; _height:1px;}
.miniBox .albumTitle {width:180px;}
.miniBox .description {width:180px;}
.miniBox .updated {width:180px;}
.loggedIn .miniBox {height:auto; min-height:250px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:180px;}
.loggedIn .miniBox input {width:180px;}
.loggedIn .miniBox textarea {width:170px;}
.boxBottom .albumLarge {width:250px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:250px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:250px;}
.albumLarge .description {width:250px;}
.albumLarge .updated {width:250px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:250px;}
.loggedIn .albumLarge input {width:250px;}
.loggedIn .albumLarge textarea {width:222px;}
If you have a category with 5 or less galleries in it like this one, then Smugmug makes a larger size thumbnail. .albumLarge is a class on the miniBox when the thumbnail is the larger size.

.miniBox is a container div for the thumbnail and it's associated text.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jun-01-2010, 12:34 PM
#5
lunarphile is offline lunarphile OP
Big grins
ok i spoke a little too soon.
trobule shooting site on IE and FF I am having trouble getting the EVENTS gallery to display 3 columns.

http://www.lunarphile.com/EVENT-FUN

Plus the text spills out wider than the thumbnail. The text spill is ok even though I would like a carriage return of some sort so that it shows:

DreamMachines
2009 MINI

instead of

DreamMachines 2009 MINI

but more imporantly i've stil got 2 columns on the EVENTS page

I have a hunch that the long gallery names might actually be what is causing an issue for the # of columns shown. should I be fudging the "textarea" more?
Old Jun-01-2010, 12:44 PM
#6
jfriend is offline jfriend
Scripting dude-volunteer
Quote:
Originally Posted by lunarphile View Post
ok i spoke a little too soon.
trobule shooting site on IE and FF I am having trouble getting the EVENTS gallery to display 3 columns.

http://www.lunarphile.com/EVENT-FUN

Plus the text spills out wider than the thumbnail. The text spill is ok even though I would like a carriage return of some sort so that it shows:

DreamMachines
2009 MINI

instead of

DreamMachines 2009 MINI

but more imporantly i've stil got 2 columns on the EVENTS page

I have a hunch that the long gallery names might actually be what is causing an issue for the # of columns shown. should I be fudging the "textarea" more?
As I explained in my previous post, 5 or fewer galleries in a category uses the albumLarge and photoLarge rules. Change the third section of your CSS to this to get the events page to go three across:

Code:
.boxBottom .albumLarge {width:200px; height:350px; text-align:center; margin:0 12px;}
  .albumLarge .photoLarge {float:none; width:200px; height:auto; _height:1px;}
  .albumLarge .albumTitle {width:200px;}
  .albumLarge .description {width:200px;}
  .albumLarge .updated {width:200px;}
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Jun-01-2010, 01:13 PM
#7
lunarphile is offline lunarphile OP
Big grins
thanks jfriend, i will keep that in mind. your previous response did answer my question and makes it less of a concern since i will be adding 2 more galleries to that category later today.
Old Oct-08-2010, 02:20 PM
#8
jskwarek is offline jskwarek
Major grins
Not to fire up an old post but I've applied this code and the galleries are justified to the left, what do I need to add to center the galleries?
Jason
Old Oct-08-2010, 02:45 PM
#9
jfriend is offline jfriend
Scripting dude-volunteer
Quote:
Originally Posted by jskwarek View Post
Not to fire up an old post but I've applied this code and the galleries are justified to the left, what do I need to add to center the galleries?
Jason
It's hard for anyone to help without a link to your site. Please put it in your dgrin signature so it's always there.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Oct-08-2010, 02:50 PM
#10
jskwarek is offline jskwarek
Major grins
Quote:
Originally Posted by jfriend View Post
It's hard for anyone to help without a link to your site. Please put it in your dgrin signature so it's always there.

My bad, the site was locking up on me and I didn't realize the post actually went through.

skwareks.smugmug.com
Old Oct-08-2010, 02:53 PM
#11
jfriend is offline jfriend
Scripting dude-volunteer
Quote:
Originally Posted by jskwarek View Post
My bad, the site was locking up on me and I didn't realize the post actually went through.

skwareks.smugmug.com
Already answered you here: http://www.dgrin.com/showthread.php?t=180269.

Please don't double post the same question as it just makes more work for those helping. If you aren't getting an answer where you first asked, just post again in that same thread pointing to the question that hasn't yet been answered.
__________________
--John
Homepage Popular
JFriend's javascript customizations Secrets for getting fast answers on Dgrin
Always include a link to your site when posting a question
Old Oct-08-2010, 02:55 PM
#12
jskwarek is offline jskwarek
Major grins
Quote:
Originally Posted by jfriend View Post
Already answered you here: http://www.dgrin.com/showthread.php?t=180269.

Please don't double post the same question as it just makes more work for those helping. If you aren't getting an answer where you first asked, just post again in that same thread pointing to the question that hasn't yet been answered.
Once again, my bad, the site kept locking up on me and I wasn't aware it actually posted as my browser timed out. You can remove one or the other. Wasn't my intention to double post.

Jason
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
Nav Bar Function parkermyers Legacy SmugMug Customization 26 Apr-28-2008 06:30 AM
Self Contained Text Box? kriyababaji Legacy SmugMug Customization 42 Jan-16-2008 07:46 PM
Customization FAQ List - Start Here! Andy Legacy SmugMug Customization 2 Dec-21-2006 08:01 PM


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