Sharegroup gallery titles gone after adding customization

[redshadow01]

I've added css to my site customization so that my galleries in my visible categories are listed horizontally, with titles only (works perfectly).

I just went to a share group and noticed that the thumbs are smaller than the galleries in the visible categories, and the gallery titles in the sharegroups are gone, making this hard to use.

I had no idea this code would affect sharegroups the same way, and having read through the posts here, I couldn't really find a way to fix this issue.

Your help is appreciated, here's the pertinent code:



#my_banner {
width: 800px;
height: 36px;
margin: 0 auto;
}

.gallery_8725283 #breadcrumb {display: none;}
.gallery_8725283 .nophotos {
display: none;
}
.gallery_8725283 .pageNav {
display: none;
}

.gallery_8942402 #breadcrumb {display: none;}
.gallery_8942402 .nophotos {
display: none;
}
.gallery_8942402 .pageNav {
display: none;
}

#homepage,#bioBox
{margin: 0 auto;width: 1100px;}

#bioBox {margin-top: -35px;}
.loggedIn #bioBox {margin-top: 0;}

#bioBox {background:none; border:none;}
#userBio {
text-align: center !important;
}
#biotext{display: none;}

.notLoggedIn #photoKeywords {display:none;}


.gallery_8876509 .nophotos { display: none;}
.gallery_8876509 .photos { display: none;}
.gallery_8829327 .nophotos { display: none;}
.gallery_8829327 .photos { display: none;}

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

.miniBox {width:122px; text-align:center; height:180px; margin:0 0px;}
.miniBox .photo {float:none; width:122px; height: 180px; _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:180px; height:195px; text-align:center; margin:0 0px;}
.albumLarge .photoLarge {float:none; width:180px; height:155px; _height:1px;}
.albumLarge .albumTitle {width:180px;}
.albumLarge .description {width:180px;}
.albumLarge .updated {width:180px;}

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

[jfriend]

It will be hard for us to help without seeing the actual sharegroup. Can you post a link to that?

[redshadow01]

Oops, my bad: http://alexeianikine.smugmug.com/share/wLr9VGQtFOkyE

It will be hard for us to help without seeing the actual sharegroup. Can you post a link to that?

[jfriend]

Oops, my bad: http://alexeianikine.smugmug.com/share/wLr9VGQtFOkyE There are two possible sizes of thumbs, small and large. You've modified the CSS for the 4-across in an incorrect way such that only the large thumbs work any more.

If you go back to the original 4-across CSS, you will find that both sizes work. If you want to modify the CSS for the larger thumbs, you need to modify the rules that have .albumLarge in them, not the other ones (which apply to the smaller thumbs).

Here's the original CSS that will work for both sizes. You can tweak it as desired, but you will need to make sure that your changes work for both size thumbs this time. The .albumLarge rules are explicitly aimed at the larger thumbs. The others may apply to only the smaller thumbs or may apply to both, depending upon the rule and whether there's an albumLarge rule after it that supercedes it.

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

Here are what the sharegroup thumbs look like with the normal 4-across CSS:
http://content.screencast.com/users/jfriend/folders/Jing/media/cef0f88a-b6b3-4dad-89b5-9813215ee25e/2009-07-20_2121.png

[redshadow01]

I reset the first four lines to the original code, and all is working perfectly now. Thank you for your quick response :)

There are two possible sizes of thumbs, small and large. You've modified the CSS for the 4-across in an incorrect way such that only the large thumbs work any more.

If you go back to the original 4-across CSS, you will find that both sizes work. If you want to modify the CSS for the larger thumbs, you need to modify the rules that have .albumLarge in them, not the other ones (which apply to the smaller thumbs).

Here's the original CSS that will work for both sizes. You can tweak it as desired, but you will need to make sure that your changes work for both size thumbs this time. The .albumLarge rules are explicitly aimed at the larger thumbs. The others may apply to only the smaller thumbs or may apply to both, depending upon the rule and whether there's an albumLarge rule after it that supercedes it.

.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;}
Here are what the sharegroup thumbs look like with the normal 4-across CSS:
http://content.screencast.com/users/jfriend/folders/Jing/media/cef0f88a-b6b3-4dad-89b5-9813215ee25e/2009-07-20_2121.png