WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hi there again gays!
I applyed some small effects to my linked images (a small dropshadow) an this worked for both galleries and single images.
The problem is that when I choose to display "tiled galleries" from the options>media these don't render with dropbox or rollover effects...
Any ideias?
Thanks a bunch again!!
The blog I need help with is blog.tiagodovale.com.
Could you link to an example where the dropshadow you added for regular galleries or single images is currently working and maybe include an example of the CSS you used for it?
Hi, designsimply :) thanks for coming to the rescue again!
I use the dropshadow on all the images and galleries: you can see it on the front page of my blog: http://tiagodovale.com
The code is used is this one:
img[class*=align],img[class*=wp-image-],#content .gallery .gallery-icon img {<br />
border: 1px solid #dddddd;<br />
-moz-box-shadow: 0 0 3px #aaaaaa;<br />
-webkit-box-shadow: 0 0 3px #aaaaaa;<br />
box-shadow: 0 0 3px #aaaaaa;<br />
padding: 0;<br />
}
What do you think?
Thank you :)
Apologies for the delay.
The class names for a tiled gallery are a little different. Try adding ".tiled-gallery" to the front of your first two selectors and use ".tiled-gallery-item" in the middle of the third one. Here is a modified version of your example to illustrate:
designsimply.tiled-gallery img[class*=align],
.tiled-gallery img[class*=wp-image-],
#content .tiled-gallery-item img {
border: 1px solid #dddddd;
-moz-box-shadow: 0 0 3px #aaaaaa;
-webkit-box-shadow: 0 0 3px #aaaaaa;
box-shadow: 0 0 3px #aaaaaa;
padding: 0;
}There's no need for apologies: you're very generous with your help :)
and, once again, how valuable it is: it worked :) Thank you so much!!
On a side note, tough, I'm having problems with the "standalone" images of old: some present a strange rollover effect that removes the dropshadow when I rollover, some don't, and I can't understand why... Removed formatting, redid it, but they still behave differently
It's quite noticeable in http://tiagodovale.com/urbanismo/ for instance
Any ideias?
Thank you :) for your patience and for taking my abuse
I actually don't see any rollover effect on the images at http://tiagodovale.com/urbanismo/
I checked with Chrome 24 on Mac OS X. What browser are you using?
You're right: I don't see it too with Chrome: I was using Safari 6 on OS X
One thing to note is that when you start using a lot of "!important" tags, it can start getting really tricky.
Another thing I found is that the CSS3 spec states that,"in terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any)." Source: http://www.w3.org/TR/css3-background/#the-box-shadow
I interpret the spec as saying the background element will override the outer shadows (i.e. box-shadow). It looks like some browsers interpret the spec differently than others (which is why it varies by browser). Try adding "background: inherit !important;" to the first block currently saved in your Appearance → Custom Design → CSS editor to see if that helps your specific case.
I took your advice about the !important tags and applied your "background: inherit !important;" suggestion:
not surprisingly, it worked! :)
Thanks again: I really appreciate your recurring help :) Cheers!
You're welcome!
This topic has been closed to new replies.
