WordPress.com

1. gjblues
   Member
   Jan 28, 2009, 8:02 AM

   Hi there,

   I'd like to add pretty drop shadows to my blog, namely to the sidebar and also to the main content section, so they both look as if they're floating/layered over the background image.

   I'm somewhat familiar with CSS and the like, generally learning by experimentation, and I've been trawling the W3SChools and various other CSS sites for info on how to do this, and I came across the CSS3 standard for 'box-shadow' (http://www.w3.org/TR/css3-background/#the-box-shadow).

   I've been trying to get this to work in both Safari 3.2.1 and Firefox 3.0.5 (MacOS X 10.5.6, if it matters) and it just won't play ball.

   I know it works, as 'http://www.css3.info/preview/box-shadow/' has examples. I've tried copying the code from this site;
   

   box-shadow: 10px 10px 5px #888;
   padding: 5px 5px 5px 15px;

   and placing it within #sidebar { } for starters, and also tried placing it within #page { }, but no dice. I'm using a cosmetically modified version of the 'Neat!' theme.

   Is this even possible? I've thought of using the '-webkit-box-shadow / -moz-box-shadow' wotzits to see if it's just a case of full implementation of the code, but to no effect.

   Am I just being a ditz and doing something completely wrong, or will WordPress.com / Neat! just not handle this? I know I don't need to use images&HTML, so I suggest anyone who feels like telling me to make half a dozen images and cram my CSS with 'really easy mods' should take a step back, take a cold shower, and chillax.

   Thank you!

   GJBlues

   The blog I need help with is georgerambles.wordpress.com.

2. gjblues
   Member
   Jan 28, 2009, 8:05 AM

   Oh, sorry. The blog's at http://georgerambles.wordpress.com

3. gwideman
   Member
   Jan 28, 2009, 9:59 AM

   Do you have a browser where the sample actually works? I read that this isn't in Firefox until 3.1 (and I'm using 3.0.5 like you, and don't see it).

4. gwideman
   Member
   Jan 28, 2009, 10:04 AM

   Hmmm, this post has some details that seem fairly current:
   http://www.isaackeyet.com/blog/2008/spices-for-modern-browsers-border-radius-box-shadow-and-text-shadow/

   ... and claims only Safari 3+, and you have to use something like:
   .className {
   -webkit-box-shadow: 1px 2px 3px #666;
   }

   But check that this actually does make it to the browser and is not getting filtered out.

5. gjblues
   Member
   Jan 28, 2009, 10:37 AM

   Hey,

   Thanks for the advice so far. I'll follow it up when I get a minute.

   I've been tinkering with text-shadow, which is supported and, pleasingly, works! I've edited the h2 title to give it a shadow, so at least that rules out WordPress.com or the theme negating it.

   Gwideman, when you say 'not being filtered out', what do you mean? Are you suggesting that the CSS edit tools in WordPress.com would snip out bits of code that won't be supported? I know that Safari 3.2.1 can handle box-shadow, as http://www.css3.info/preview/box-shadow employs it, and it works fine. Hmmm, perhaps I'm just too keen and should wait for the standards to catch up.

   Thank you for your advice, I checked Firefox 3.05 on the CSSinfo website, and it doesn't seem to be able to implement yet, so that's good to know.

   Cheers,

   GJBlues

6. gjblues
   Member
   Jan 28, 2009, 10:52 AM

   EDIT: After about 5 minutes I removed the text-shadows from titles, because they looked pants. But proof of concept remains, n'est pas?

7. gwideman
   Member
   Jan 28, 2009, 10:32 PM

   gjblues:

   > when you say 'not being filtered out', what do you mean?

   I mean that the wordpress.com's CSS "Save Stylesheet" feature filters out unrecognized CSS. So for example, if you set a style like this:

   .bogus01 {
   flibledeedoo:18pt;
   font-family:sans-serif;
   }

   What you end up with is this:
   .bogus01 {
   font-family:sans-serif;
   }

   So as a first check it makes sense to be sure that WP doesn't reject your newer CSS. The above example you can see right in CSS Stylesheet Editor following a save, so you'd notice the problem quickly.

   I don't know whether there is or isn't any other filtering in the WP system, but when troubleshooting "new-CSS-not-working" issues it might be worth checking that the CSS arrives at the browser looking like you expected.

8. gjblues
   Member
   Jan 28, 2009, 10:49 PM

   Aaaah. This looks like it might be the route of the problem.... And, indeed, a simple check on the CSS editor confirms it.
   Conundrum cracked.

   Now then, if only we can get WordPress.com to accept the box-shadow command...

   Thank you for your help gwideman, you are a gentleman and a scholar.

Topic Closed

This topic has been closed to new replies.