Popular Photos Thumbs

[Barb]

Got this by Private Message:

Hi Barb
I was checking out your web site and I like the way you got your popular photos across the bottom. Can you give me some insite on how you did that?
may be a thread............
Thank You


Below is the code I used to format my popular photos thumbs on my home page. PLEASE NOTE: The shadowback I use is on my site. You are welcome to grab it and upload it to your site. But please do not just link to mine. Also, if you are not using Firefox and WebDeveloper (see my signature), you should be. This code can be easily found with those. Have fun!


.homepage #popularPhotos #categoriesBox #featuredBox .boxTop {
background: transparent;
}

.homepage #popularPhotosList {
background: transparent;
border: 1px solid #1E1E47;
width: 735px; height: 70px;
margin-left: 4px;
margin-bottom: 3px;
}

.homepage #popularPhotos .boxTop .title {
color: #999;
font-family: Georgia, "Verdana", Trebuchet MS ;
font-size: 14px;
font-weight: bold;
font-style: italic;
}

.homepage #popularPhotosList .photo {
margin: 7px 0px 0px 0px;
width: 61px;
height: 55px;
}

.homepage #popularPhotosList .photo img {
background-image: url(http://photoscapedesign.smugmug.com/photos/91349241-O.png);
_background-image: none;
background-position: bottom left;
padding: 0px 0px 5px 5px;
border: none;
width: 50px;
height: 50px;
}

.homepage #popularPhotosList .photo img:hover {
width: 60px;
height: 60px;
position: relative;
z-index: 999;
left: -6px;
top: -3px;
padding: 0px 0px 7px 7px;
}

[Allen]

Thanks Barb, worked like a charm. :clap:clap:clap
http://atsmith.smugmug.com/

Only issue is in IE the thumbs don't bloom.:scratch Any idea on this?

Thanks
Al

[Barb]

Thanks Barb, worked like a charm. :clap:clap:clap
http://atsmith.smugmug.com/

Only issue is in IE the thumbs don't bloom.:scratch Any idea on this?

Thanks
Al

Hi :)

That's an IE problem that I have never figured out, if there even is a way to fix it. I just live with it and use Firefox :rofl

[Mike Lane]

It's because IE doesn't understand the :hover pseudoclass on anything but anchor elements. So this:

.homepage #popularPhotosList .photo img:hover {
width: 60px;
height: 60px;
position: relative;
z-index: 999;
left: -6px;
top: -3px;
padding: 0px 0px 7px 7px;
}

Isn't understood by IE. Try this instead:

.homepage #popularPhotosList .photo a:hover img {
width: 60px;
height: 60px;
position: relative;
z-index: 999;
left: -6px;
top: -3px;
padding: 0px 0px 7px 7px;
}

[Allen]

Tried replacing. Does funny things with thumbs in IE.
Tried just adding without deleting original, didn't work in IE.
Al

[ramdisk]

Sure would like this to work in IE, does some funy things.........any help?

[AngelKatie413]

Sure would like this to work in IE, does some funy things.........any help?

So, I know this is an old thread and all but... it looks great, but I have the little "most popular photos" text above it. Is there a way to hide that? (I'm sure there is, just can't figure it out for myself!)

http://kaphotography.smugmug.com

Please pardon the dust while I'm working on the site :)

[scotte]

sure put this in you CSS
it will take the top of the box away and the title. it may move up a little after you get rid of it.

#popularPhotos .boxTop {display: none !important;}

[Allen]

So, I know this is an old thread and all but... it looks great, but I have the little "most popular photos" text above it. Is there a way to hide that? (I'm sure there is, just can't figure it out for myself!)

http://kaphotography.smugmug.com

Please pardon the dust while I'm working on the site :)
Add this to your CSS, which btw, I don't see any user CSS. You trying to do
everything in the theme?

#popularTitle {display: none;}

Also when you get time, the three gallery thumbs in your bio you need to edit
the links to your own photos and gallery pages.

[AngelKatie413]

Add this to your CSS, which btw, I don't see any user CSS. You trying to do
everything in the theme?

#popularTitle {display: none;}

Also when you get time, the three gallery thumbs in your bio you need to edit
the links to your own photos and gallery pages.

Thanks - I think they are my photos but I have to change the links...

Should I move all my CSS out of the theme?

*** When I add the code in, my galleries magically start appearing again after I hid them, too, so I'm kind of confused about that as well. :scratch *** Fixed this - who knows what I was doing :)