how to make four galleries in a category show up 2 by 2?

[Andy]

could someone tell me how to make this category (http://www.moonriverphotography.com/Galleries) show up in two columns e.g. now it would ideally be 2 by 2...

EDIT 11/14/10: Use Advanced Customizing #10 here
http://www.dgrin.com/showthread.php?t=52811

[Mike Lane]

could someone tell me how to make this gallery (http://www.moonriverphotography.com/Now%20Showing) show up in two columns e.g. now it would ideally be 2 by 2...

and, does the code go in the stylesheet or does it go in the gallery itself?

thank you in advance.
Of course :wink

#galleriesBox .albumLarge {
width:343px;
}

That is the maximum width that worked in firefox 1.0.6. You might have to hack IE, I'm not sure how it'll react.

[Andy]

Of course :wink

#galleriesBox .albumLarge {
width:343px;
}

That is the maximum width that worked in firefox 1.0.6. You might have to hack IE, I'm not sure how it'll react.

brilliant, mike - thanks so much :bow

[Andy]

could anyone tell me how to center these galleries (http://www.moonriverphotography.com/Now%20Showing) now?

[Mike Lane]

could anyone tell me how to center these galleries (http://www.moonriverphotography.com/Now%20Showing) now?
The thing is that they are in fact centered. If you add the border to the .miniBox you'll see that you'll have 4 perfectly centered boxes. The problem is centering the elements inside the boxes. Why this isn't as easy as it sounds is beyond me (I think it has something to do with the fact that the .albumTitle is in a <p> element, but I'm not sure).

After much wailing and gnashing of teeth I came up with this:

#galleriesBox .miniBox img {
padding:0 97px;
}

#galleriesBox .albumLarge .albumTitle {
position:absolute;
width:343px;
text-align:center;
top:120px;
margin:0 auto;
}

Put that after the #galleriesBox .albumLarge declaration. As always IE may not do it correctly so you may have to hack it. If you need help with that let me know.

[Andy]

The thing is that they are in fact centered. If you add the border to the .miniBox you'll see that you'll have 4 perfectly centered boxes. The problem is centering the elements inside the boxes. Why this isn't as easy as it sounds is beyond me (I think it has something to do with the fact that the .albumTitle is in a <p> element, but I'm not sure).

After much wailing and gnashing of teeth I came up with this:

#galleriesBox .miniBox img {
padding:0 97px;
}

#galleriesBox .albumLarge .albumTitle {
position:absolute;
width:343px;
text-align:center;
top:120px;
margin:0 auto;
}

Put that after the #galleriesBox .albumLarge declaration. As always IE may not do it correctly so you may have to hack it. If you need help with that let me know.

mike, thanks - that works for the "Now Showing" gallery category i created but it breaks everything on my homepage...lookie:

http://williams.smugmug.com/photos/34612699-L.jpg

:scratch

[Mike Lane]

mike, thanks - that works for the "Now Showing" gallery category i created but it breaks everything on my homepage...lookie:

http://williams.smugmug.com/photos/34612699-Ti.jpg

:scratch Whoopse, sorry, forgot something:

#category #galleriesBox .miniBox img {
padding:0 97px;
}

#category #galleriesBox .albumLarge .albumTitle {
position:absolute;
width:343px;
text-align:center;
top:120px;
margin:0 auto;
}

I just noticed something too. If an image is taller than 120px (i.e. it has a portrait orientation), it will hide some of the text. I'll work on seeing what I can do about that.

EDIT: I just noticed that it does not put portrait thumbs in the exact center either. I should have expected that since the positioning is done with padding.

[Mike Lane]

Whoopse, sorry, forgot something:

#category #galleriesBox .miniBox img {
padding:0 97px;
}

#category #galleriesBox .albumLarge .albumTitle {
position:absolute;
width:343px;
text-align:center;
top:120px;
margin:0 auto;
}

I just noticed something too. If an image is taller than 120px (i.e. it has a portrait orientation), it will hide some of the text. I'll work on seeing what I can do about that.

EDIT: I just noticed that it does not put portrait thumbs in the exact center either. I should have expected that since the positioning is done with padding.
:wxwax In order to make this work, I'd have to have a container for the image. What would REALLY be handy is an empty class for the .miniBox that changes dependent on the size of the thumbnail. Currently in the code they have:

<div class=".miniBox .albumLarge">

It'd be great if they could make it like this:

<div class=".miniBox .albumLarge .landscapeThumb"> (if the minibox has a landscape thumb)
<div class=".miniBox .albumLarge .portraitThumb"> (same for portrait thumbs)
<div class=".miniBox .albumLarge .squareThumb"> (you get the idea)

I think there should only be 3 thumbnail versions and sizes right? Anyhow, with these and a thumbnail contained within it's own classed layer I could make it look like I'm thinking you want it to look.

I'm pretty sure I could anyhow.

[Andy]

:wxwax In order to make this work, I'd have to have a container for the image. What would REALLY be handy is an empty class for the .miniBox that changes dependent on the size of the thumbnail. Currently in the code they have:

<div class=".miniBox .albumLarge">

It'd be great if they could make it like this:

<div class=".miniBox .albumLarge .landscapeThumb"> (if the minibox has a landscape thumb)
<div class=".miniBox .albumLarge .portraitThumb"> (same for portrait thumbs)
<div class=".miniBox .albumLarge .squareThumb"> (you get the idea)

I think there should only be 3 thumbnail versions and sizes right? Anyhow, with these and a thumbnail contained within it's own classed layer I could make it look like I'm thinking you want it to look.

I'm pretty sure I could anyhow.

i'm not going to do anything with this last request - would you put it on your list to discuss with jt? thanks man... you are awesome.

[Mike Lane]

i'm not going to do anything with this last request - would you put it on your list to discuss with jt? thanks man... you are awesome.
Yup, and I've got one other thing for them too:D

[Mike Lane]

i'm not going to do anything with this last request - would you put it on your list to discuss with jt? thanks man... you are awesome.
Well as JT pointed out, it turns out there is in fact a container for the thumbnail already. They're not so interested in giving the minibox a class dependent on the image height / orientation so this is the best that I can do for you:

#galleriesBox .albumLarge {
width:343px;
}

#category #galleriesBox .miniBox {
padding:0;
margin:0 0 40px 0; /* Adjust vertical spacing */
}

#category #galleriesBox .miniBox .photoLarge {
height:150px; /* Set photo div to max height of photo */
width:343px; /* Set width = .albumLarge for centering purposes */
}

#category #galleriesBox .albumLarge .albumTitle {
width:343px; /* Width = .albumLarge for centering purposes */
text-align:center; /* Center that darn text */
top:155px; /* Push the text down below the largest possible thumbnail */
}

Of course I'm using webdeveloper so I don't know what'll happen in IE. Hopefully nothing, but it is IE after all. I'll take a look at it in IE after you implement it (if you choose to that is).

[{JT}]

If you add this:

.miniBox .photoLarge {
height: auto;
}


Then use this code I modified from Mike:

#galleriesBox .albumLarge {
width:343px;
}

#category #galleriesBox .miniBox {
padding:0;
margin:0 0 40px 0; /* Adjust vertical spacing */
}

#category #galleriesBox .miniBox .photoLarge {
width:343px; /* Set width = .albumLarge for centering purposes */
}

#category #galleriesBox .albumLarge .albumTitle {
width:343px; /* Width = .albumLarge for centering purposes */
text-align:center; /* Center that darn text */
top:155px; /* Push the text down below the largest possible thumbnail */
}


It will all work out :)

Andy, you may want to consider using this code to make your box background transparent so that they won't cover up your background image:

.box {
background-color: transparent;
}

[Mike Lane]

If you add this:...
I found a hack that will make IE behave properly as well.

/* Use IE's improper handling of overflow to our advantage */
.miniBox .photoLarge {
min-height:100px;
height:100px;
}

/* Set things right for non sucky browsers */
.miniBox .photoLarge[class] {
height:auto;
}

#galleriesBox .albumLarge {
width:343px;
}

#category #galleriesBox .miniBox {
padding:0;
margin:0 0 40px 0; /* Adjust vertical spacing */
}

#category #galleriesBox .miniBox .photoLarge {
width:343px; /* Set width = .albumLarge for centering purposes */
}

#category #galleriesBox .albumLarge .albumTitle {
width:343px; /* Width = .albumLarge for centering purposes */
text-align:center; /* Center that darn text */
}

Anyhow, it just goes to show you that I can fake my way through this stuff pretty well, but when it comes right down to it, JT is the man.

[Jamoke]

I had some titles being cut off in IE - Mozilla and Safari - when portrait photos appeared. So I added two lines, and it fixed the problem for me.

/* Use IE's improper handling of overflow to our advantage */
.miniBox .photoLarge {
min-height:100px;
height:100px;
}

/* Set things right for non sucky browsers */
.miniBox .photoLarge[class] {
height:auto;
}

#galleriesBox .albumLarge {
width:343px;
min-height:190px;
height: 190px;
}

#category #galleriesBox .miniBox {
padding:0;
margin:0 0 40px 0; /* Adjust vertical spacing */
}

#category #galleriesBox .miniBox .photoLarge {
width:343px; /* Set width = .albumLarge for centering purposes */
}

#category #galleriesBox .albumLarge .albumTitle {
width:343px; /* Width = .albumLarge for centering purposes */
text-align:center; /* Center that darn text */
}
http://smugmug.stickspics.com/Scouts/131888

[Mike Lane]

Actually here's my new fangled version of this code. You'll have to adjust any margin px values to your liking.

.miniBox {
width:106px;
padding:0 0 5em 0;
margin:0 129px 0;
}

.miniBox .photo {
height:auto;
_height:1px;
}

.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}

.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 104px 40px;
}

.albumLarge .photoLarge {
height:auto;
_height:1px;
}

.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}

[Earle]

Following the directions, and my categories are all now close together horizo
but vertically they are spaced very far apart. Not exactly sure how to correct this.

In my sub-categories, nothing has changed, and I tryed to come up with some css codes myself, but I couldn't get anything to work.
Is there a way to place the Pictures together closer in the sub-cats as well?
:wink Things are always looking better and better thanks to you guys!

[Mike Lane]

Following the directions, and my categories are all now close together horizo
but vertically they are spaced very far apart. Not exactly sure how to correct this.

In my sub-categories, nothing has changed, and I tryed to come up with some css codes myself, but I couldn't get anything to work.
Is there a way to place the Pictures together closer in the sub-cats as well?
:wink Things are always looking better and better thanks to you guys!

Did you put in the latest version of the code? The post right above your last one?

[Earle]

Did you put in the latest version of the code? The post right above your last one?

Yes indeed sir, :nod
(congratulations on your um...jr :roflIn for so many adventures now)

[Mike Lane]

Yes indeed sir, :nod
(congratulations on your um...jr :roflIn for so many adventures now)

Thanks:)

Okay you need to clean up your css. Keep in mind that things that come lower in your CSS page will override things that come higher in your CSS page. I counted that you have the CSS code that will align your boxes in your CSS 3 different times, twice using the new code, once using the old. Here is your CSS, remove the red.

body {
background:#816D55;
color:#ffffff;
}


#navcontainer {
color: #000000;
}

.title,
*.title,
* .title,
.box .title {
color:#000000;
}

.spacer {
clear: both;
}

#caption_top {
display: none;
}#caption_bottom {
display: block;
}
h2,
h3 { /* access any heading level 2 or heading level 3 text (i.e. <h3>heading level 3</h3>) you can find these in the bio */
margin:0; /* change the margin and padding to 0 so there isn’t so much space around it */
padding:0;
}

.box { /* access any box element – mostly on home page but also comments */
border:8px solid #FFFFFF; /* put a light border around it 2 pixels wide */
}

.box { background-color: FFFFF; }


.boxTop { /* access the box top element */
background:#FFFFFF; /* make the background a dark brown color */
border-bottom:35px solid #FFFFFF; /* make the border 2 pixel wide solid light color */
}

.boxBottom { /* access the bottom boxes */
background:#FFFFFF; /* set the background to a light brown */
}


.top_border, /* access all the borders at once */
.bottom_border, /* useful if you don’t want the dotted borders that you find all over */
.left_border,
.right_border {
border:0; /* set the border width to zero, no unit or border type or color required */
}

a:link, /* access all the links on your smugmug site */
.nav a:link,
.albumTitle a:link,
#homepage a:link {
color:#000000; /* change the color to light yellow */
text-decoration:underline; /* set the text decoration to underline */
}

a:visited, /* access all the visited states in the smugmug site */
.nav a:visited,
.albumTitle a:visited,
#homepage a:visited {
color:#000000; /* change the color to light yellow */
text-decoration:underline; /* set the text to be underlined */
}

a:hover, /* select all the link hover states on the whole site */
.nav a:hover,
#homepage a:hover,
.albumTitle a:hover {
color:#ffffff; /* set the color to dark yellow */
text-decoration:underline; /* underline them */
}

a:active, /* select all the link active states – when the mouse button is down */
.nav a:active,
.albumTitle a:active,
#homepage a:active {
color:#FFFFFF; /* set the color to blue */
text-decoration:underline; /* underline them */
}

/* you must go in this order ...
a:link
a:visited
a:hover
a:active

just remember LoVe / HAte – Link Visited Hover Active */

.box .nav, /* select all the nav elements */
div.nav {
color:#4D4D4D; /* set the text color to light gray */
}

.miniBox p.description { /* select the album description on the homepage */
color:#ffffff; /* make it white */
}

.miniBox p.updated { /* select the last updated text */
color:#000000; /* color it yellow */
}

.miniBox p.private { /* select the private text (only seen when logged in) */
color:#000000; /* color it dark orange */
}

.imgBorder { /* select the dynamic image borders – site wide */
border:200px outset #4D4D4D; /* color them light yellow */
}

.imgBorderOn { /* select the selected and/or hover state for the image borders – site wide */
border:200px solid #ffffff; /* set them to dark yellow */
}

.buttons { /* select the user interface buttons */
border:2px outset #ffffff; /* set a 2 pixel outset border to make it look raised */
background:#ffffff; /* set a lighter background */
color:#000000; /* set the text color to yellow */
}

.boxBottom .buttons, /* select the smaller buttons and the buttons that are in the bottom boxes */
.smbuttons {
border:2px outset #4D4D4D; /* make them look raised with outset */
background:#ffffff; /* set the background to be darker */
color:#000000; /* set the color to yellow */
}


#userHome {
display: none;
}
.possess {
display: none;
}
#userName {
display: none;
}

#categoriesBox .boxTop { display: none; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #000000;
background-color: #fff;
}

#navcontainer ul li a:hover
{
color: #4D4D4D;
background-color: #fff;
}

#ssControl {
padding: 5px;
text-align: center;
}
.ssBtn {
outline: none;
}
.ssBtn img {
height: 20px;
width: 25px;
}
#ssPlay {
display: none;
}
#ssPrev img {
background-image: url(http://momentful.smugmug.com/photos/prevButton.png);
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=scale, src='http://momentful.smugmug.com/photos/prevButton.png');
}
#ssNext img {
background-image: url(http://momentful.smugmug.com/photos/nextButton.png);
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=scale, src='http://momentful.smugmug.com/photos/nextButton.png');
}
#ssPlay img {
background-image: url(http://momentful.smugmug.com/photos/playButton.png);
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=scale, src='http://momentful.smugmug.com/photos/playButton.png');
}
#ssPause img {
background-image: url(http://momentful.smugmug.com/photos/pauseButton.png);
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=scale, src='http://momentful.smugmug.com/photos/pauseButton.png');
}

.homepage .photo img, .category .photo img, .homepage .photoLarge img, .category .photoLarge img {
display: block;
position: relative;
background-color: #ffffff;
margin: -6px 6px 6px -6px;
padding: 3px 3px 0px 0px;
}

#imageInfo {visibility:collapse;}
#imageCommentSummary {visibility: visible;}
.comment_header, .boxTop {border: solid grey 1px;}

.journal .title {
color: #ffffff;
}

.box {
background-color: transparent;}

#galleriesBox .miniBox {margin:0 20px; padding:0; height:260px; width:175px;}

.category .box {
background-color:#ffffff;
}

.galleryPage #thumbnails {
background-color:#ffffff;
}

.miniBox {
width:106px;
padding:0 0 5em 0;
margin:0 129px 0;
}

.miniBox .photo {
height:auto;
_height:1px;
}

.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}

.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 104px 40px;
}

.albumLarge .photoLarge {
height:auto;
_height:1px;
}

.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}

#galleriesBox {display:none;}
.loggedIn #galleriesBox {display:block;}
#categoriesBox {display:none;}
.loggedIn #galleriesBox {display:block;}

.gallery_1344206 #breadcrumb,
.gallery_1344206 #albumNav_top,
.gallery_1344206 #albumNav_bottom,
.gallery_1344435 #breadcrumb,
.gallery_1344435 #albumNav_top,
.gallery_1344435 #albumNav_bottom,
display: none;
}

#navcontainer {
color: #000000;
}

/* Use IE's improper handling of overflow to our advantage */
.miniBox .photoLarge {
min-height:10px;
height:100px;
}

/* Set things right for non sucky browsers */
.miniBox .photoLarge[class] {
height:auto;
}

#galleriesBox .albumLarge {
width:343px;
min-height:190px;
height: 190px;
}

#category #galleriesBox .miniBox {
padding:0;
margin:0 0 40px 0; /* Adjust vertical spacing */
}

#category #galleriesBox .miniBox .photoLarge {
height:150px; /* Set photo div to max height of photo */
width:343px; /* Set width = .albumLarge for centering purposes */
}

#category #galleriesBox .albumLarge .albumTitle {
width:343px; /* Width = .albumLarge for centering purposes */
text-align:center; /* Center that darn text */
top:155px; /* Push the text down below the largest possible thumbnail */
}

#galleriesBox {
background-color: white;
}

#copy_right {
font-size: 8pt;
font-family: "Times New Roman", Times, serif;
color: #000000;
}

#my_name {
font-size: 27pt;
font-family: "Times New Roman", Times, serif;
color: #000000;
}

.miniBox {
width:106px;
padding:0 0 5em 0;
margin:0 129px 0;
}

.miniBox .photo {
height:auto;
_height:1px;
}

.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}

.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 104px 40px;
}

.albumLarge .photoLarge {
height:auto;
_height:1px;
}

.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}

I only looked for the code that we're discussing here. You'll need to go through and find all the code that is trying to customize the same element and either merge them or delete them. I didnt' look closely enough to figure out if there was any more code that conflicted in there so there may not be any.

Now as a general tip, whenever you find new code that you want to use, you need to look through your existing code to see if you've already got something like it. If you do, either overwrite your existing code or merge the code you found into your existing code.

Delete the red above and once you do let me know and I'll check your CSS again for you.

[Earle]

Thanks:)
Okay you need to clean up your css.
Delete the red above and once you do let me know and I'll check your CSS again for you.

Ok, all set.
Everything is understandable, why I hadn't done it before...:rolleyes
But good to go now :1drink

[Mike Lane]

Okay now. What exactly is it that you want to do with your galleries? 2 across? 4 across? more?

[Earle]

Okay now. What exactly is it that you want to do with your galleries? 2 across? 4 across? more?

On my Homepage, when you click on the gallery link,
What shows up is four albums, two on top and the other two on the bottom. Can I get just that page to show up with the four all side by side?

[Earle]

I have a question for the smart intelligent computer persons,
I am wondering if there is a way to make my sub-catagories go, one on top of each other...instead of standing next to each other, stack up up each other.

Why? Ok, to have this work, I am wondering if that page where my sub-catagories are, if I can add any html I want, and I think that I can.
So, if I can figure it out (with help from home-where I live, right now) then I would put NEXT to the stacked up sub-gallories a big box where I would put something else, like text.

So, to make this work, I need to deal with Css, and the padding, is that correct? The padding around each thumbnail in the sub-catagory box.
Sounds interesting eh? And like a bunch of work on my part...
I just need to be pointed in the right direction.
Thanks guys

[mmrphoto]

On my Homepage, when you click on the gallery link,
What shows up is four albums, two on top and the other two on the bottom. Can I get just that page to show up with the four all side by side?


I just want to say thanks to you and Andy! That was the easiest fix I have done yet! I just put the code in the right spot.... and BAM... it worked. You guys rock!:bow

[mmrphoto]

On my Homepage, when you click on the gallery link,
What shows up is four albums, two on top and the other two on the bottom. Can I get just that page to show up with the four all side by side?

I just want to say thanks to you and Andy! That was the easiest fix I have done yet! I just put the code in the right spot.... and BAM... it worked. You guys rock!:bow

[greendoor imaging]

could someone tell me how to make this gallery (http://www.moonriverphotography.com/Now%20Showing) show up in two columns e.g. now it would ideally be 2 by 2...

and, does the code go in the stylesheet or does it go in the gallery itself?

thank you in advance.

EDITED BY MIKE: I'm putting in the end result of all this up in the first post because reading is hard...


.miniBox {
width:106px;
padding:0 0 5em 0;
margin:0 129px 0;
}

.miniBox .photo {
height:auto;
_height:1px;
}

.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}

.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 104px 40px;
}

.albumLarge .photoLarge {
height:auto;
_height:1px;
}

.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}




Hello,
So after digging and reading CSS for dummies.... Dummie lost here..:dunno

Last Nov. or Dec. I read about changing the css to "arrange" my home page -- How can I have three across with the gallery title under the gallery on my "home page" only.

Thanks for the direction.

[richW]

How can I have three across with the gallery title under the gallery on my "home page" only. Start with this:
.homepage .miniBox {width:242px; text-align:center; height:160px; _height:180px; margin: 10px auto;}
.homepage .miniBox .photo {float:none; width:242px; height:auto; _height:1px;}
.homepage .miniBox .albumTitle {width:242px;}
.homepage .miniBox .description {width:242px;}
.homepage .miniBox .updated {width:242px;}

adjust as needed.....

[greendoor imaging]

Start with this:
.homepage .miniBox {width:242px; text-align:center; height:160px; _height:180px; margin: 10px auto;}
.homepage .miniBox .photo {float:none; width:242px; height:auto; _height:1px;}
.homepage .miniBox .albumTitle {width:242px;}
.homepage .miniBox .description {width:242px;}
.homepage .miniBox .updated {width:242px;}

adjust as needed.....


Thank you this is great. :wave
Erin

[dididaniellephoto]

Okay, someone's going to have to help me with this. There are three pages of codes.. What am I supposed to use and where am I supposed to put it and what am I supposed to replace in the code so that it works for ME?

I see the big long code on the first page, but where do I put that? And do I have to replace anything in there with the names of MY albums??

TIA!

: ) Didi

[richW]

I see the big long code on the first page, but where do I put that? And do I have to replace anything in there with the names of MY albums?? Take the code from post one (http://www.dgrin.com/showpost.php?p=158480&postcount=1) and place it into the css box on the customization page (http://www.smugmug.com/homepage/cobrand.mg). See how it looks....

[dididaniellephoto]

it works! much more easy and clear. thank you.

: ) Didi

[richW]

it works! much more easy and clear. thank you.

: ) Didi

Your Welcome...:thumb

[Stormdancing]

I tried c&p the code in the 1st post and I now have every one in one big long row.
I've got a lot of bits of c&p code in my CSS and so far so good until this.

Can someone please take a look?
http://heartsfire.smugmug.com/

I want

2x2 with larger thumbnail and description below each

Thanks!

[Allen]

I tried c&p the code in the 1st post and I now have every one in one big long row.
I've got a lot of bits of c&p code in my CSS and so far so good until this.

Can someone please take a look?
http://heartsfire.smugmug.com/

I want

2x2 with larger thumbnail and description below each

Thanks!
Not sure but play with the margins in bold. I think the thumb sizes are set.
1-5 150 and 6+ 100

/* Line up Galleries 2x2 */
.miniBox {
width:106px;
padding:0 0 5em 0;
margin:0 50px 0 140px;
}

[Stormdancing]

Thanks Allen!

On the Titles of my Sub-Categories the line breaks. Does part of this code set the line width for the titles also or do I need to look elsewhere?

http://heartsfire.smugmug.com/Weddings

Diana and
Jeff

Needs to be

Diana and Jeff


All one line

[Allen]

Thanks Allen!

On the Titles of my Sub-Categories the line breaks. Does part of this code set the line width for the titles also or do I need to look elsewhere?

http://heartsfire.smugmug.com/Weddings

Diana and
Jeff

Needs to be

Diana and Jeff


All one line
Tinkering with it in FirefoxI came up with this. See bold for changes.
If you do it, check other pages and IE.

#subcategoriesBox a.nav {
font-size: .9em;
}

/* Line up Galleries 2x2 */
.miniBox {
width:130px;
padding:0 0 5em 0;
margin:0 50px 0 140px;
}

.miniBox .albumTitle,
.miniBox .private {
text-align:left;
}

[Stormdancing]

Ahhhh didn't think about font size. I had tried the "left" with no results.

I'll have to tinker later, boss is calling.

Thanks again for your help.

[thepinkangel]

Actually here's my new fangled version of this code. You'll have to adjust any margin px values to your liking.

.miniBox {
width:106px;
padding:0 0 5em 0;
margin:0 129px 0;
}

.miniBox .photo {
height:auto;
_height:1px;
}

.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}

.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 104px 40px;
}

.albumLarge .photoLarge {
height:auto;
_height:1px;
}

.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}

I pasted this and it works great! BUT, how do I get rid of the info (ie: 1 gallery, 80 photos, updated 5/1/07??) :scratch

thanks in advance!

[richW]

I pasted this and it works great! BUT, how do I get rid of the info (ie: 1 gallery, 80 photos, updated 5/1/07??) :scratch

thanks in advance!Try this:
p.updated, p.description {
display: none;}

[thepinkangel]

Try this:
p.updated, p.description {
display: none;}

PERFECT!! thank you! :bow

[Mike Lane]

You could of course go into your gallery settings, scroll down to the look & feel box and then look for the "clean" option and set it to yes. :wink

[siobhanta]

I wanted to get my gallery thumbs in columns of two: so I started with the code from the beginning of the thread. It didn't work for firefox, though it seemed to work for ie. Now I've tried some of the other scripts from the thread, and the gallery thumbs are now in the right format, but the text is jumbled and unreadable.

help?

www.siobhanmeadowsphotography.com

[Mike Lane]

I wanted to get my gallery thumbs in columns of two: so I started with the code from the beginning of the thread. It didn't work for firefox, though it seemed to work for ie. Now I've tried some of the other scripts from the thread, and the gallery thumbs are now in the right format, but the text is jumbled and unreadable.

help?

www.siobhanmeadowsphotography.com (http://www.siobhanmeadowsphotography.com):wave can you link to exactly which pages are causing you troubles? The link you gave, to your hompage, doesn't help since there are no galleries displayed and when I clicked on the galleries link there wasn't any problems as far as I could tell...

[siobhanta]

:wave can you link to exactly which pages are causing you troubles?

Yes, http://siobhanm.smugmug.com/Photography

my gallery page in IE is now not including any of my gallery titles at all (I do want them to display!) and Firefox is showing the titles underneath the gallery thumbnails, but the text is unreadable and looks really messy.

[siobhanta]

http://siobhanm.smugmug.com/Photography

Okay, I'm giving this one last bump before I give up entirely on having a 2 x 2 gallery!

I really like the formatting and look of this gallery, but I also really want the gallery titles to show! Please help and tell me what's wrong with my script, or what is missing from it? Thanks!

[Mike Lane]

So here's what I see in IE6:

http://img.skitch.com/20080506-1y8ke6yx9x2b4hdku7ma7i842e.jpg

And here's what I see in firefox:

http://img.skitch.com/20080506-j5aqyhru5qbg4bfhdnctcie2b6.jpg

I'm guessing you see the problem when you're logged in?

[johnnabrynn]

i'd like my thumbnails to be 3x3. mike, you've helped me out on this before... but i'm confused at what i have in my CSS. cuz now, some pages have small thumbnails, while other pages have the larger thumbnails. I just want all one size please and 3x3. HELP anyone.
-johnnabrynn

[nervra]

I copied and pasted the following code:

.miniBox {
width:106px;
padding:0 0 5em 0;
margin:0 129px 0;
}

.miniBox .photo {
height:auto;
_height:1px;
}

.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}

.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 104px 40px;
}

.albumLarge .photoLarge {
height:auto;
_height:1px;
}

.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}

but my galleries are STILL aligned in a single column. here is a link, http://radcaptures.com/Events/577051 .

Please tell me what I am doing wrong.

[Allen]

I copied and pasted the following code:
...

but my galleries are STILL aligned in a single column. here is a link, http://radcaptures.com/Events/577051 .

Please tell me what I am doing wrong. Last time I looked the code looked like this.
http://www.dgrin.com/showpost.php?p=300387&postcount=8

/* ================================================== == */
/* == 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;}
But with this missing } nothing below it will work.

/* html only page for gallery Sample Works */
.gallery_5854119 .nophotos,
.gallery_5854119 .pageNav,
.gallery_5854119 #categoriesBox,
.gallery_5854119 #galleriesBox,
.gallery_5854119 #breadcrumb {
display: none;
}

[nervra]

Thanks for pointing out that mistake! My gallery now looks like how I want it to.


Last time I looked the code looked like this.
http://www.dgrin.com/showpost.php?p=300387&postcount=8

/* ================================================== == */
/* == 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;} But with this missing } nothing below it will work.

/* html only page for gallery Sample Works */
.gallery_5854119 .nophotos,
.gallery_5854119 .pageNav,
.gallery_5854119 #categoriesBox,
.gallery_5854119 #galleriesBox,
.gallery_5854119 #breadcrumb {
display: none;
}

[nervra]

Thanks for pointing out that mistake. Now, its starting to look like how I want it to.

One more question, which part of that code do I edit to decrease the space between rows and columns?

[Precision]

My domain is http://precision.smugmug.com

I have a few galleries. How or where to i place this code to only affect one gallery. In this case only the gallery i called "Galleries".

I want this gallery to have 2 thumbnails per line

And also larger thumbnails, NO gray background and loose the "Galleries Galleries" in green

Any Suggestions?







could someone tell me how to make this category (http://www.moonriverphotography.com/Galleries) show up in two columns e.g. now it would ideally be 2 by 2...

and, does the code go in the stylesheet or does it go in the gallery itself?

thank you in advance.

EDITED BY MIKE: I'm putting in the end result of all this up in the first post because reading is hard...


.miniBox {
width:106px;
padding:0 0 5em 0;
margin:0 129px 0;
}

.miniBox .photo {
height:auto;
_height:1px;
}

.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}

.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 104px 40px;
}

.albumLarge .photoLarge {
height:auto;
_height:1px;
}

.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}

[BChat]

Hello folks!

Wonderful info on gallery formatting. I'm new here and trying to arrange my gallary 6-across "moon river" style (http://www.moonriverphotography.com/Galleries).

What's the code for that?

Thanks much!

Bertram
bchat.smugmug.com

[Allen]

Hello folks!

Wonderful info on gallery formatting. I'm new here and trying to arrange my gallary 6-across "moon river" style (http://www.moonriverphotography.com/Galleries).

What's the code for that?

Thanks much!

Bertram
bchat.smugmug.com
His page stretches and it's a matter of how wide the browser is for the
number of thumbs across. This below will set a static page width with
six across.

Add this to your CSS and see it it works. Might take some additional
tweaking. Log off and look. Not sure what it looks like logged in.

.galleries #homepage,
.galleries #galleriesBox {
margin: 0 auto;
width: 900px;
}

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

.miniBox {width:122px; text-align:center; height:210px; 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;}

[RuSu]

How can I make the thumbnails here 4 across instead of 3?

http://rusu.smugmug.com/galleries

I want to do this same thing for this category's - http://rusu.smugmug.com/Business%20Travel%20-%20Rustem page but didn't work based on what I thought should be the right code:

. category.category_business_travel_-_rustem .miniBox {width:242px; text-align:center; height:160px; _height:180px; margin: 10px auto;}
. category.category_business_travel_-_rustem .miniBox .photo {float:none; width:242px; height:auto; _height:1px;}
. category.category_business_travel_-_rustem .miniBox .albumTitle {width:242px;}
. category.category_business_travel_-_rustem .miniBox .description {width:242px;}
. category.category_business_travel_-_rustem .miniBox .updated {width:242px;}

Help appreciated.

[Allen]

How can I make the thumbnails here 4 across instead of 3?

http://rusu.smugmug.com/galleries

I want to do this same thing for this category's - http://rusu.smugmug.com/Business%20Travel%20-%20Rustem page but didn't work based on what I thought should be the right code:

. category.category_business_travel_-_rustem .miniBox {width:242px; text-align:center; height:160px; _height:180px; margin: 10px auto;}
. category.category_business_travel_-_rustem .miniBox .photo {float:none; width:242px; height:auto; _height:1px;}
. category.category_business_travel_-_rustem .miniBox .albumTitle {width:242px;}
. category.category_business_travel_-_rustem .miniBox .description {width:242px;}
. category.category_business_travel_-_rustem .miniBox .updated {width:242px;}

Help appreciated.

If you change to the original CSS in the first post here, doesn't it do all this?
http://www.dgrin.com/showpost.php?p=300387&postcount=8

[RuSu]

got that code to work for my main "galleries" page, but couldn't get it work on on this category:
http://rusu.smugmug.com/Business%20Travel%20-%20Rustem

The code I tried is:

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

What did I do wrong?

[Allen]

got that code to work for my main "galleries" page, but couldn't get it work on on this category:
http://rusu.smugmug.com/Business%20Travel%20-%20Rustem

The code I tried is:
...
Why are you adding specificity? Doesn't the generic set work?

.galleries .miniBox {wid...

.category_business_travel_-_rustem .miniBox {widt....

[RuSu]

that changing the galleries to 4 across got rid of my galery descriptions when I click to open a category. I would like them back...

[Allen]

that changing the galleries to 4 across got rid of my galery descriptions when I click to open a category. I would like them back...
Using only this I see 4 across and descriptions.:scratch

/* ================================================== == */
/* == 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 .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;}

[RuSu]

Why are you adding specificity? Doesn't the generic set work?

.galleries .miniBox {wid...

.category_business_travel_-_rustem .miniBox {widt....

Am adding specificity because I don't want 4 across site-wide. Only for my main gallery/categories & Busines Travel-Rustem where there are a bunch of galleries & I don't want people to have to scroll down.

Also, I do not see descriptions when I click on Business Travel - Rustem Galleries, for example...

[rouxster]

Actually here's my new fangled version of this code. You'll have to adjust any margin px values to your liking.

.miniBox {
width:106px;
padding:0 0 5em 0;
margin:0 129px 0;
}

.miniBox .photo {
height:auto;
_height:1px;
}

.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}

.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 104px 40px;
}

.albumLarge .photoLarge {
height:auto;
_height:1px;
}

.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}

I am using this code and it works great. Currently, it is displaying two columns. If I want to pull the colums in a little closer and add a third column, which values would be modified?

[mudhouse]

I am using this code and it works great. Currently, it is displaying two columns. If I want to pull the colums in a little closer and add a third column, which values would be modified?

Hi All -

This is my first post - I'm two days into my trial pro membership, and I'm trying to see whether I can produce a site that will meet my criteria: as minimal as possible.

I have pretty much the same question, except that I'd like to use four columns with about a 50 pixel spacing between images. I'd also like to make the vertical spacing tighter, about the same as the horizontal spacing. I've only got five galleries in this category, but I've just started uploading files, and I could wind up with a dozen or more galleries on this page. I'm using gallery names, but I have no intention of adding descriptions or any other text.

http://davereichert.smugmug.com/Ongoing%20Projects

Thanks in advance,
Dave Reichert

[BillU]

His page stretches and it's a matter of how wide the browser is for the
number of thumbs across. This below will set a static page width with
six across.


Can someone answer the original question: How do you use this CSS code to put titles underneath gallery photos, yet make them dynamic. I added the code at the top of this thread and have a static 4 galleries across. I would like to do what Allen mentions: make the number of galleries across change depending on what the width of the browser is (like Moon River Photography).

Thank you.

[jfriend]

Can someone answer the original question: How do you use this CSS code to put titles underneath gallery photos, yet make them dynamic. I added the code at the top of this thread and have a static 4 galleries across. I would like to do what Allen mentions: make the number of galleries across change depending on what the width of the browser is (like Moon River Photography).

Thank you. Search dgrin for "stretchy categoriies". It's a small amount of CSS you add to the 4-across to allow the thumbs to fill the space rather than be a fixed width.

[BillU]

Great - that worked! Thanks!!

[Zibby]

Last time I looked the code looked like this.
http://www.dgrin.com/showpost.php?p=300387&postcount=8

/* ================================================== == */
/* == 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;}
But with this missing } nothing below it will work.

/* html only page for gallery Sample Works */
.gallery_5854119 .nophotos,
.gallery_5854119 .pageNav,
.gallery_5854119 #categoriesBox,
.gallery_5854119 #galleriesBox,
.gallery_5854119 #breadcrumb {
display: none;
}


Hi Allen,
I used this code but I have troubles removing the background box around the galleries.
I tried to use this one:

.box {
background-color: transparent;
}

but it not working. Any ideas?

www.zibbykwiatekphotography.ca (http://www.zibbykwiatekphotography.ca)

[Allen]

Hi Allen,
I used this code but I have troubles removing the background box around the galleries.
I tried to use this one:

.box {
background-color: transparent;
}

but it not working. Any ideas?

www.zibbykwiatekphotography.ca (http://www.zibbykwiatekphotography.ca)
Try this in CSS
.galleries #galleriesBox,
.galleries #galleriesBox .boxTop,
.galleries #galleriesBox .boxBottom {
background: none;
border: none;
}

[Zibby]

Try this in CSS
.galleries #galleriesBox,
.galleries #galleriesBox .boxTop,
.galleries #galleriesBox .boxBottom {
background: none;
border: none;
}

Excellent! It worked like a charm. Thanks.
www.zibbykwiatekphotography.ca

[dipphoto]

It maybe best to number this after I just read it my self:

1. What is it called to have the galleries floating (not in boxes) so I can search for it...
2. Also in my banner I want to move that back ground to the full page
3. If I have 1 main gallery with 4 sub galleries in it... how do you use the above code to effect that one main categories and its sub categories leaving all the others galleries alone?

[pcm228]

Hello, i wanted to get my gallery thumbs in columns of 5, i tried all codes i found here to have at least 2 columns but my gallery still have one column http://www.patriciachavez-fotografia.com/PATRICIACHAVEZ-FOTO-clientes

Can you tell me what to do?

Thanks

[jfriend]

Hello, i wanted to get my gallery thumbs in columns of 5, i tried all codes i found here to have at least 2 columns but my gallery still have one column http://www.patriciachavez-fotografia.com/PATRICIACHAVEZ-FOTO-clientes

Can you tell me what to do?

ThanksAdd this CSS and you will get as many across as will fit in the window size:

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

.miniBox {width:122px; text-align:center; height:210px; margin:0 14px;}
.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 12px;}
.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;}

#category {width: auto; margin-left: 15px; margin-right: 15px;}

[pcm228]

Thanks jfriend , it works now :D

[LiquidElephant]

Add this CSS and you will get as many across as will fit in the window size:

Hi J,
I've used the code you posted and I'm getting 4-across, but it seems to be slightly off-set to the left? I thought also that this code would 'fill across' as wide as the page allowed?

This is what I'm getting:
http://www.aperturefire.co.uk/Other/SmugShots/i-x5LNHwk/1/S/4across-S.jpg (http://www.aperturefire.co.uk/Other/SmugShots/10390677_VWcKn#1307247050_x5LNHwk-A-LB)

[Allen]

Hi J,
I've used the code you posted and I'm getting 4-across, but it seems to be slightly off-set to the left? I thought also that this code would 'fill across' as wide as the page allowed?

This is what I'm getting:

Add red

.miniBox {width:122px; text-align:center; height:210px; margin:0 14px;}
.galleries #galleriesBox {padding-left:60px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}

[LiquidElephant]

Add red

.miniBox {width:122px; text-align:center; height:210px; margin:0 14px;}
.galleries #galleriesBox {padding-left:60px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}


Bang on, thank you very much :D

[rlphoto]

hey guys having some trouble with the bottom text showing up on my gallery thumbs. take a look

http://rlphoto.smugmug.com/Portfolio

any thoughts?

[rlphoto]

the footer is going across the gallery thumbs only in IE.

any thoughts?

http://rlphoto.smugmug.com/Portfolio

[trbnfl8]

I installed the new JFriend's new slide show as well as the "as many galleries as will fit across the page" code from this post.

The spacing works great except that images are not centered if the slideshow is above them (see here...http://nhallphoto.smugmug.com/Events).

I'd also like to get rid of the Category title and have the ability to adjust the relative vertical position of the gallery thumbnails to the slide show.

Can anyone help???

[trbnfl8]

I installed the new JFriend's new slide show as well as the "as many galleries as will fit across the page" code from this post.

The spacing works great except that images are not centered if the slideshow is above them (see here...http://nhallphoto.smugmug.com/Events).

I'd also like to get rid of the Category title and have the ability to adjust the relative vertical position of the gallery thumbnails to the slide show.

Can anyone help???


This problem was solved by Jfriend here....

http://www.dgrin.com/showthread.php?p=1684652#post1684652

(Oct-12-2011 01:19 AM post New - JFriend HTML5 Slideshow beta release!)

[Viffer06]

I've updated my css codes with the provided code. It works. However, the galleries are off to the left and the spacing from the 2nd level gallery is too far.

Note: I also added this : .galleries #galleriesBox {padding-left:60px;} to resolve the left alignment but didn't seem to work for me. HELP.

my website: www.roysalcedo.com

[Allen]

I've updated my css codes with the provided code. It works. However, the galleries are off to the left and the spacing from the 2nd level gallery is too far.

Note: I also added this : .galleries #galleriesBox {padding-left:60px;} to resolve the left alignment but didn't seem to work for me. HELP.

my website: www.roysalcedo.com (http://www.roysalcedo.com)
The .galleries page will not work until you activate the galleries/category box under the "homepage layout" button.

[Viffer06]

The .galleries page will not work until you activate the galleries/category box under the "homepage layout" button.

Thanks for the reply Allen. I went to homepage layout and found the galleries but how do I activate them? :scratch

[Allen]

Thanks for the reply Allen. I went to homepage layout and found the galleries but how do I activate them? :scratch
From this tutor you are missing the CSS.
http://dgrin.smugmug.com/gallery/2160039
CSS

.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}

.galleries #bioBox {
display: none;
}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}

This will be the link to your galleries page.
http://www.roysalcedo.com/galleries

[One Moment One Shot]

I have added the galleries code and have the boxes showing up correctly but the code to make the background transparent on the gallery page is not working for me.

http://onemomentoneshot.smugmug.com/galleries


From this tutor you are missing the CSS.
http://dgrin.smugmug.com/gallery/2160039
CSS

.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}

.galleries #bioBox {
display: none;
}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}
This will be the link to your galleries page.
http://www.roysalcedo.com/galleries

[Allen]

I have added the galleries code and have the boxes showing up correctly but the code to make the background transparent on the gallery page is not working for me.

http://onemomentoneshot.smugmug.com/galleries
Add this to your CSS

#categoriesBox .boxTop {display: none;}
#categoriesBox {
background:none;
border:none;
margin-top: 40px;
}

Why is your slideshow showing on the galleries page? Do you want that?

[One Moment One Shot]

I would like the slideshow to show on my gallery page but I don't want the stroller thumbnails at the bottom. When I tried removing it took it off the homepage also. Any suggestions?

http://onemomentoneshot.smugmug.com

Add this to your CSS

#categoriesBox .boxTop {display: none;}
#categoriesBox {
background:none;
border:none;
margin-top: 40px;
}
Why is your slideshow showing on the galleries page? Do you want that?

[Allen]

I would like the slideshow to show on my gallery page but I don't want the stroller thumbnails at the bottom. When I tried removing it took it off the homepage also. Any suggestions?

http://onemomentoneshot.smugmug.com
Try this in CSS

.galleries .fl-gallery-grid {display: none;}

[One Moment One Shot]

AMAZING! That did it. You are awesome....

Just a few more tweaking...

Could you assist with the following:

1. I would like the gallery page boxes to show more than 4 across as I will be adding more.

2. How to get rid of the footer at the bottom?

3. How to move the Navbar flush with top of screen but keep my links to the right right at the bottom of the transparent header.

4. How to add a search bar similiar to http://www.richardsilverphoto.com/Portfolios on the gallery page?

Any help would be great...

Thank you.

Try this in CSS

.galleries .fl-gallery-grid {display: none;}

[lpphotography]

hey guys so many different codes going on here its hard to follow.
i currently have 4 across which is great, but theres 2 things i need.

1. have it all centerd on my page even when i add more galleries to it, so maybt like auto center when i go from 1 to 2 or 3.
2. The grey box around my galleries is too big and also i want it darker.

Here is a link to my site: http://lukepenfold.smugmug.com

Here is my current code:
.miniBox {width:122px; text-align:center; height:210px; margin:0 14px;}
.galleries #galleriesBox {padding-left:60px;}
.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:150px;}
.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 12px;}
.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:150px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}
#category {width: auto; margin-left: 15px; margin-right: 15px;}

Any help would be great :) thanks

[RyBu]

I used the code in my gallery page:

/* ================================================== == */
/* == 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;}

However, the titles of the galleries are way up top: please help. thanks!

http://ryanbuchanan.smugmug.com/Landscapes

[Allen]

I used the code in my gallery page:

/* ================================================== == */
/* == 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;}

However, the titles of the galleries are way up top: please help. thanks!

http://ryanbuchanan.smugmug.com/Landscapes
Remove these from your CSS. Both covered in the new CSS.

#galleriesBox .miniBox img {
padding:0 97px;
}

#galleriesBox .albumLarge .albumTitle {
position:absolute;
width:343px;
text-align:center;
top:120px;
margin:0 auto;
}

[Smugger1]

I've added code at the beginning of my css to make my portfolio gallery show up 2x2 instead of a single column AND increased the size of the thumbs to 343px. This ONLY works when you click on one of the galleries (Children/Couples/Families/Newborns) and then in the breadcrumbs, select Portfolio to go back. It does not, for some unknown reason, work if you select the Portfolio link in the header - the thumbs are sized much smaller yet it does retain the 2x2 column format.

Any suggestions on how I can make this work with the header Portfolio link?

Thanks!

[Smugger1]

Is there anyone who can help me figure out why the size of my gallery image boxes are smaller when you click the "Portfolio" link in the menu from the home page compared to when you click the word "Portfolio" in the bread crumbs? I'm confused why there's visible difference in size? I prefer the largest size possible.

Thanks!