slideshow with shadow

dnim

Hi all,

I'm looking for a slideshow stack that allows a shadow at the bottom of the images... I now I can just build the shadow with the image in photoshop... but if I could do it in the stack would be nice.

I have a variety of slideshow stacks already - gyro and cycler from Joe Workman, showcase/showcase ultra from RWExtras - but I don't see any way to create the shadow i want.

Any stacks or other suggestions appreciated.

cheers
darren

mitchellm

I believe weaverBox will do exactly what you want. Very nice product. Plugin, but you can easily import into Stacks pages.

soonwai

@dnim I think @mitchellm meant WeaverPix but all of Greg Barchard's stuff are great so no harm in checking out WeaverBox either.

http://www.barchard.net/

mitchellm

Oops, my bad. Yes, definitely meant weaverPix!

dnim

Thanks for the thoughts... I already have the plugin, but no shadow option in Weaverpix..... at least not that I can see.

d

mitchellm

You are correct. I was remembering a conversation that occurred at Greg's google groups site awhile ago. So while shadows is not built in (yet), several folks offered suggestions for CSS to use. For example, Mauricio (RWExtras) offered this:

Use this in the Custom CSS area of WP:

#weaverpix-[unique_id]-slideshow-wrapper {

-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-moz-box-shadow: #333 2px 2px 25px;
-webkit-box-shadow:#333 2px 2px 25px;
background-color: #ffffff !important;
}

You may want to fool around with the code, as Mauricio's results in rounded corners (which you may or may not want). This should give you a good starting point.

dnim

Very cool... thanks. Works immediately.

But... I know absolutely jack about the code.

I've tried changing all variables but nothing changes in the preview. I've tried the # value as well as the various pixel values.

Shadow shows up great... but I'd like to adjust the format.

d

mitchellm

I'm far from a CSS expert, though I've definitely played with this code before and successfully tweaked.

There are many savvy (and better) CSS coders at Greg's google group site. I'd suggest joining that and asking your question there. (Those requests get sent via email to everyone in the group, so the CSS masters will see your query right away.)

I believe there's a link to Greg's group at barchard.net

I also have this link, but don't know if it will work correctly if you have not already joined. Worth a try though:
https://groups.google.com/forum/?fromgroups#!forum/weaver-plugins

msabene

Although not a big difference, I would suggest updating the code as follows:

#weaverpix-[unique_id]-slideshow-wrapper {-moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; -moz-box-shadow: #333 2px 2px 25px; -webkit-box-shadow: #333 2px 2px 25px; box-shadow: #333 2px 2px 25px; background-color: #ffffff !important;}

@dnim, what are you trying to change that doesn't seem to work on your end? As a quick test, just replace all 3 instances of #333 above with #ff0000 and let me know what you see in Preview...

Also, to be safe, make sure that all the code is included in weaverPix's Preferences>Custom CSS in a single line, i.e. no line breaks.

Cheers,
Mauricio

dnim

Mauricio,

Thanks... that seems to make things happen... shadow turns red with ff0000....

But I'm trying to control the shape of the shadow... changing the various pixel dimensions doesn't seem to do anything... I've not been able to trial and error absolutely every combo... but I started putting zero in for each of them to see what changed.... if I put everything at zero and the very last pixel dimension at 50 or 200... I see a change... but the basic shape stays the same and the shadow extends left and right as well as below.

What I am going for is a shadow that projects down only, is inset from the edges about 5% of the image width and is fairly dark.

A lot of detail here I know, but I'm trying to figure out if those pixel dimensions tie me control over the size in this way.... but it doesn't seem to be working.

Don't mean to be begging a free intro to css lesson.....

thanks,
d

msabene

No problem. I suggest going here and playing with the values to get and idea of the various options, including the meaning of "inset." Check the "Play it" section under Syntax...

Cheers,
Mauricio

dnim

Hey thanks.. this is exactly what I need.... except I think I'm learning code... bad, very bad.

cheers
d

msabene

For instance, try this to see if it gets any closer to your needs:

#weaverpix-[unique_id]-slideshow-wrapper {-moz-box-shadow: #ff0000 0px 20px 35px;-webkit-box-shadow:#ff0000 0px 20px 35px;box-shadow:#ff0000 0px 20px 35px; background-color: #ffffff !important;}

I kept the shadow red to make it noticeable...

Cheers,
Mauricio