StopDesign, Bottom Thumbnails, Rounded Corners?

thetrainman

Hello!

I think I have the template sorted as I'd like but the last thing I would like to know is if it is possible to add to the CSS code something to make the bottom 6 thumbnail pictures have rounded corners?

This would complete my gallery and make it from good to great!

I had a look at some tutorials online but I'm not sure where to add the code and if it will work?

Thanks

sbillard

Look at the image_effects plugin. I am not sure what "the bottom 6 thumnail plugins" is since you did not mention a theme. But that plugin may do the job for you. It may impact more than those 6 thumbnails. If so you would have to look at the plugin inner workings and apply that specifically to those thumbnails

micheall

theme is mentioned in the thread title.

What you'll basically have to do trainman is figure out where in the theme files the thumbnails you're talking about are and add the proper css class/styling used from the code you found.

thetrainman

Yeah, I tried with some other code but then IE came up with the old "do you want to run scripts on this page" warning.

Do you know of any CSS that can make the rounded corners?
I can add it to the theme CSS I have but don't know what code to add.

I have found various CSS generators which are good, but most of them require you to have a background colour; which I don't want as I have the slide's for the background. I guess I could just leave that part out of the CSS and it would style them without a background maybe?

acrylian

`border-radius` and its propietary variants for (older) Mozilla and Webkit browsers is the only way to do rounded corners with CSS (CSS3 actually that is).
For example: http://www.the-art-of-web.com/css/border-radius/

I am not sure if IE9 already supportst that but older surely don't. The only way then would be using jQuery tools for this but those require also a background color.

thetrainman

Hmm.

That might be a route to take.

The other way I thought was to promote the slide set images at the bottom (in the middle) to overlay the thumbnail instead of the other way round. This way I could draw the image in such a way that it would appear the thumbnails have rounded corners.

However it's more complicated as the slides at the bottom have rounded edges but then the border round the actual thumbnail is partially transparent.

Here's an example:
http://img696.imageshack.us/img696/7231/royalegrass.png

So the whole blue bit in the middle would be where the generated thumbnail would appear. However due to the semi-transparent border then I would have to integrate the page background to the slide image otherwise you'd see the straight corners of the thumbnail behind it.
This is possible and a sneeky way round it but may look bad on some resolutions as the page background is a gradient in itself.

However saying all that, is there a way to promote the slide image to be on top of the randomly generated thumbnail instead of under it?

Thanks and sorry if this didn't really make sense!

acrylian

Well, you have to find and choose the method that fits your needs best. You never find anything that works the same in all browser. That is the nature of webdesign.

You can of course change the CSS to overlay an image on another using transparent images like gif or png (note if you use png24 older IEs need again special treatment).

Anyway, this all is a generel web technique problem and not a Zenphoto one. So I suggest to learn a little more about HTML and CSS.

thetrainman

Yeah, I'm sorting of learning while doing, you've been a great help.

I looked at a javascript version but could the Zenphoto code be ignoring the CSS as I have the thumbs wrapped in a paragraph tag which in the CSS file tells it to have border radius of 10px but the images are still as square as they come.

acrylian

You probably have to address the thumbs via the parenet, especially if that is an id and not a class. id settings override class ones easily (in short terms).