Hi,

I've used inspect element on the gallery page, but for some reason I'm having a hard time with the albumTitle. I would like for the album title to be 105px wide and appear below the thumbnail. Can anyone take a look and see which css class/ID I need to add into the css box?

I also need to change the background-color on the gallery only page to match the bottom color gradient. #04090C

http://www.kevinhaysphotography.com

Thanks,

Kevin

Originally Posted by kshays Hi, I've used inspect element on the gallery page, but for some reason I'm having a hard time with the albumTitle. I would like for the album title to be 105px wide and appear below the thumbnail. Can anyone take a look and see which css class/ID I need to add into the css box? I also need to change the background-color on the gallery only page to match the bottom color gradient. #04090C http://www.kevinhaysphotography.com Thanks, Kevin

This is the CSS to format the miniboxes. See this page. Tweaks in red.

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

.miniBox {width:122px; text-align:center; height:140px; margin:0 29px 15px; padding-top: 5px;}
  .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 !important; 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;}

I've comment out the parts that would apply in the above CSS.

.miniBox {
  background-color: aliceblue;
  border: 1px solid #ccc;
  /* width: 105px; */
  /* height: 105px; */
  /* float:left; */
  /* padding: 5px; */
}

Add this to your CSS. The color matches the bottom on your gradient.

html {background:#000101;}

Hey Allen,

Gotta admit that was fast and accurate :) Exactly what I was needing.

Thanks for the assistance!

Kevin

Originally Posted by kshays Hi, I've used inspect element on the gallery page, but for some reason I'm having a hard time with the albumTitle. I would like for the album title to be 105px wide and appear below the thumbnail. Can anyone take a look and see which css class/ID I need to add into the css box? I also need to change the background-color on the gallery only page to match the bottom color gradient. #04090C http://www.kevinhaysphotography.com Thanks, Kevin

Tweaked for five across. Remove the lines in the .miniBox rule I posted in last post.

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

.miniBox {width:122px; text-align:center; height:140px; margin:0 10.5px 15px; padding-top: 5px;}
  .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 !important; 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;}

Yeah, I like 5 across much better. Actually I was thinking about that then saw your post.

:)

Still working on trying to get the site user friendly and adding more content in the process.

Originally Posted by kshays Yeah, I like 5 across much better. Actually I was thinking about that then saw your post. :) Still working on trying to get the site user friendly and adding more content in the process.

One suggestion, make the about gallery unlisted under gallery settings. No reason to show it on your
galleries page. The direct link in your navbar suffices.

Will do.

One other question, just made a drop down for Galleries. I'm not sure if I like it or not. If it stays then the last menu item is hid beneath the slideshow. Trying to think if I want to have the drop down on Galleries to a main category or revert it back.

What do you think?

Originally Posted by kshays Will do. One other question, just made a drop down for Galleries. I'm not sure if I like it or not. If it stays then the last menu item is hid beneath the slideshow. Trying to think if I want to have the drop down on Galleries to a main category or revert it back. What do you think?

Add the red in your CSS.

#nav {
  position:relative;
  z-index:99;
  text-align: center; 
}

Perfect Allen. Looks like I need to see what the z-index property does :)

ty!

Originally Posted by kshays Perfect Allen. Looks like I need to see what the z-index property does :) ty!

http://www.w3schools.com/cssref/pr_pos_z-index.asp