WordPress.com

1. raoulpop
   Member
   Jun 22, 2011, 5:03 PM

   I'm working on a small CSS modification to my wife's blog. I want to change the color of the site menu. I worked with CSS Edit, located the rule (#access), then changed the color, previewed the changes, they looked good, so I pasted the changed rule in the CSS Edit window on my wife's site. Here's the code:

   #access {
   background: #c2ddd8; /* Show a solid color for older browsers */
   background: -moz-linear-gradient(#c2ddd8, #0a0a0a);
   background: -o-linear-gradient(#c2ddd8, #0a0a0a);
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c2ddd8), to(#0a0a0a)); /* older webkit syntax */
   background: -webkit-linear-gradient(#c2ddd8, #0a0a0a);
   -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
   -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
   clear: both;
   display: block;
   float: left;
   margin: 0 auto 6px;
   width: 100%;
   }

   It's important to specify that this is the exact same code from the original stylesheet at WP.com. The only bits I changed were the color codes.

   WP.com wouldn't show me the correct color for the menu when I clicked on Preview, so I figured it was a bug and hit Save. Sure enough, the correct color still wasn't being displayed (it defaulted to white), and WP.com had modified my code and erased all the lines that were important. Here's the code I got back after the save:

   #access {
   background:0;
   -webkit-box-shadow:rgba(0,0,0,0.4) 0 1px 2px;
   -moz-box-shadow:rgba(0,0,0,0.4) 0 1px 2px;
   box-shadow:rgba(0,0,0,0.4) 0 1px 2px;
   clear:both;
   display:block;
   float:left;
   width:100%;
   margin:0 auto 6px;
   }

   I also tried adding "!important" at the end of each line, before the semicolon, but that didn't help.

   What I'd like to know is what I'm doing wrong. I'd rather not overwrite the entire stylesheet for the website, as it's working fine and I only need to change a couple of small things.

   The blog I need help with is ligiapop.com.

2. timethief
   Member
   Jun 22, 2011, 5:11 PM

   When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:
   http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

3. thesacredpath
   Member
   Jun 22, 2011, 5:59 PM

   @raoulpop, I'll tag this for staff attention as they obviously need to make some adjustments to their filters or something for this particular stylesheet.

   You might also contact staff directly at http://en.support.wordpress.com/contact/ .

4. macmanx
   Staff
   Jun 22, 2011, 6:23 PM

   Unfortunately, these are being stripped out by CSSTidy, a program that we use to automatically correct invalid CSS and remove redundant rules and malicious code.

   Though these are valid in the CSS3 sense, at this time, there is no way around this.

   Sorry for the trouble!

5. raoulpop
   Member
   Jun 22, 2011, 6:31 PM

   @macmanx, any chance CSSTidy will be modified in the near future so these sorts of code changes won't get wiped out?

6. thesacredpath
   Member
   Jun 22, 2011, 6:34 PM

   @raoulpop, Sorry I must have misunderstood when you said the code was the same and that you only changed the color code. I should have looked, but I only see one background declaration under #access in the CSS for twenty eleven and that is the moz linear gradient.

7. macmanx
   Staff
   Jun 22, 2011, 7:10 PM

   raoulpop, it's always a possibility, though I can't say when that will happen.

8. raoulpop
   Member
   Jun 22, 2011, 8:26 PM

   @thesacredpath, this is the exact code I copied and pasted here from the twenty-eleven theme (see below). There are multiple linear gradient declarations there.

   #access {
   	background: #222; /* Show a solid color for older browsers */
   	background: -moz-linear-gradient(#252525, #0a0a0a);
   	background: -o-linear-gradient(#252525, #0a0a0a);
   	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
   	background: -webkit-linear-gradient(#252525, #0a0a0a);
   	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
   	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
   	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
   	clear: both;
   	display: block;
   	float: left;
   	margin: 0 auto 6px;
   	width: 100%;
   }

9. thesacredpath
   Member
   Jun 22, 2011, 11:05 PM

   OK, I just viewed the stylesheet and now see it there. Before I was going through Firebug and it was not showing up when I viewed the stylesheet.

   The thing is, the original stylesheet does not get run through CSS tidy, so that is why it is not stripped out.

   Staff do need to see about making an adjustment somehow though since the original stylesheet has the multiple background declarations.

10. designsimply
    Staff
    Jul 1, 2011, 7:44 PM

    You should be able to change the background color (but not the gradients) with just a background color declaration like this:

    #access { background: #c2ddd8; }

    thesacredpath is right about the adjustment part. Your feedback is heard! Hopefully it's something we can update in the not-too-distant future.

11. raoulpop
    Member
    Jul 1, 2011, 7:50 PM

    @designsimply Thank you! That's what I did on both my blogs (raoulpop.com and ligiapop.com), and the CSS modification works beautifully.

Topic Closed

This topic has been closed to new replies.