CSS Drop shadow on images – ALL sides

Using tables is a gigantic step backwards. They are for tabular tata, not for site layout!

Well yeah, that’s what I was thinkin’ too ??
Hence why I’d like to use CSS if possible. I know this can be done, I’m just not sure how to apply the CSS <div> code (in the styles.css) to all my post images?

Is it possible to do ALL this code in the style.css file?

Well, you can have the CSS part in your stylesheet, of course, but if you take a closer look at the article you linked to – it must have a zillion divs around every image, in the HTML code, which is a PITA.

Hahahaha, thanks moshu!
Yeha that pretty much blows ??

However I see a few blogs out there (not WP) that use tables for this in every image in the posts! And it seems to be working quite well actually. I know it’s silly, but if it works and noone complains?

Anyways, there’s gotta be a simple way to do this in CSS/wordpress. Cmon, I know there are some kickass gurus here! Help a brotha out! ??

Hey everyone. Still no solution ??
Can anyone help?

Thanks in advance!
Bartek

There might not be a better solution than the one you already identified. Basically you want to apply eight backgrond images (four sides, four corners) to a single element, with the sides repeating so they will accomodate any size image. One background per DIV, eight DIV’s per element.

If you are willing to go with your light source from someplace other than directly overhead, you can create a very large image with a shadow on two edges, use that as the background on a floated DIV so it wraps to the image, then use negative margins on two sides like this:

.img-wrapit img {
    margin: -5px 5px 5px -5px;
}

to reveal the shadow. It’s a matter of personal taste, I think this looks more natural.

Thanks mechx1. I really do want the “over top” look tho.
Also, I need help applying the idea I found in the link to wordpress.

The problem I’m having is this….

Say I figure out CSS code to put in my styles.css file that works. How and where would I write code that would apply this to all images in the post? In the styles.css file? Somewhere else? Or would I have to modify some wordpress core file where it actually writes the images to the site?

Anyone else that can chime in to help? I would appreciate it ??

Say I figure out CSS code to put in my styles.css file that works.

You don’t get it.
Actually, you do NOT have to “figure out” the CSS part – it is given to you in the article you linked to in your first post. Whatever is CSS – it should go into the style.css file.
However, any CSS declaration is useless if you don’t have the correspondent HMTL markup for it in your template files or the content (in this latter case assuming that you write your posts in html/code mode).
But I don’t know of any method by which you can “add” the required HTML markup to your images by using only a stylesheet. Stylesheets don’t add html code around your images – a stylesheet can just define the look of the existing HTML code.
As I said above: unless you come up with a way to add automatically all the required html (the zillion div tags in this case) around every image, this thing simply doesn’t work. Period.

(WP doesn’t “write” images to the site. You put the code for images into your posts.)

There could be one possible way to try to make it work but it requires quite a bit of coding knowledge… and would also mean that you do not use ever the wysiwyg/visual editor when writing posts.

1. Put the css given into your stylesheet and modify the call for the shadow images to point to your images/ folder in the theme directory
2. Upload all the required shadow images in the wp-content/themes/your-theme/images folder
3. Create a new Quicktag button as described here
(note: in newer WP versions the quicktags.js file is in wp-includes/js/ folder)
4. The first click on the new quicktag should insert everything that goes BEFORE the image call
5. The second (closing) click should insert all the closing /div tags.
6. Between the two click you would need to insert the img src…ect. code

If that’s too much for you, find somebody that can do it.

So that’s what I was missing. I didn’t understand that it may be possible to write corresponding html markup in my content or template file for this! So now you say that I’d have to find a way to automatically add the <divs> in the html code…is this possible by maybe making another template php file that could do this?

I also thought about the Quicktag idea before but it’s my last resort since I’ll have to do that for every image I post (annoying) and it’ll be messy.

Thanks for the help.

is this possible by maybe making another template php file that could do this?
No.

So what you’re saying is that it’s impossible to automatically add all these <div>’s to the images…unless I use the manual Quicktag solution?

That should have been kinda clear about 5 posts ago.

To be honest it’s very obvious you lack the HTML or CSS knowledge to even be attempting something this complicated… never mind trying to get it working in WordPress.

Learn to walk before you try to run.

Yes, that’s what I am saying for about 24 hours… Get over it.
If you are too lazy to make 2 clicks to have all that fancy nonsense – then give up and stop asking the same question again and again. You got your answer, now go an work on it.

Wow. Touchy are we?

“That should have been kinda clear about 5 posts ago.” – maybe to you, but not to me…big deal.

“You don’t get it.” – no I *clearly* don’t. which is why I’m trying to *politely* ask for help on these “friendly” forums of yours.

How about we take a few breaths and relax. This is a troubleshooting forum isn’t it? A place where people come for help? Right? From the looks of it I don’t have the uber awesome knowledge you two may have so pardon me if I don’t completely follow everything to the tee.

“Get over it” “fancy nonsense” “learn to walk before you can run” “If that’s too much for you, find somebody that can do it.”

Veeery helpful guys, thanks. But no thanks.
And moshu, great moderating ??

All I wanted was some friendly help, but I guess that’s too had to ask for. You could have easily told me in a nice way that it’s probably too difficult for someone with my knowledge to pull off, right?