I am trying to change the color on a page. The page is div post-11, so says Firebug.

When I put this into CSS inserts, why doesn't it work? I am still having a hard time knowing how to format CSS in the CSS inserts correctly. Everything I put there is usually ignored. Yes, i save the additions I put in there.

div#post-11 .post-11 page type-page hentry post odd
{background-color:#b0c4de;}

ATA 3.7.3 - Wordpress 3.0.3

Thank you

That CSS is not correct. Reading Firebug and knowing which selectors to use does take a little getting used to. The way I suspect the code should be is as follows.

div#post-11 {background-color:#b0c4de;}

Originally Posted by lmilesw

That CSS is not correct. Reading Firebug and knowing which selectors to use does take a little getting used to. The way I suspect the code should be is as follows.

div#post-11 {background-color:#b0c4de;}

That doesn't work either, I tried that from the start. I appreciate your input, though. Any other ideas what might be causing this code to be ignored? I am running the site on a local development server - WAMP - but that should not matter, should it?

try an !important

div#post-11 {background-color:#b0c4de !important;}

Using !Important did not affect the statement at all. I disabled the Ultimate TinyMCE plugin, but that didnt help. I copied the entire CSS path in firebug and put that in CSS Inserts, but no luck. I dont know why I have such a difficult time making CSS inserts work.

I exported my settings if you have time to take a look and see why my simple css statement to change to background color on a page will not work.

Thanks...

You capitalized !important. The i needs to be lower case.

Originally Posted by lmilesw

You capitalized !important. The i needs to be lower case.

Well, I changed it to !important, right after the background-color: attribute, and the #fff000 value.
So it is selectors {background-color: #fff000 !important;} but it still does not work.

There must be something ridiculously simple that I am overlooking. I'm running the site on a WAMP development server, but cannot see how that would make a difference....

if you are trying to change the PAGE background, you need to use

body.page-id-11 {background-color: #b0c4de;}

your original CSS which was

div#post-11 .post-11 type-page type-page hentry post odd
{background-color:#b0c4de;}

says apply the color of #b0c4de to
an html element of <odd> which is a child of
an html element of <post> which is a child of
an html element <hentry> which is a child of
an html element <type-page> which is a child of
an html element <type-page> which is a child of
any html element that has a class of .post-11 that is a child of
a <div> with a class of 'post-11'

that just isn't going to work. You really need to take a tutorial on CSS ID's and Classes. there are some good ones at htmldog.com and w3schools.com/css. The periods and pound signs are very important....

body.page-id-11 {background-color: #b0c4de;}

That did not work either. I have been reading and studying CSS IDs and Classes for days. I'm sure you can never know enough - but I think the way CSS Inserts works adds another piece to the puzzle.

Larry thought the line should perhaps read

div#post-11 {background-color:#b0c4de;}

and then you thought it should probably be

div#post-11 {background-color:#b0c4de !important;}

but your latest suggestion is

body.page-id-11 {background-color: #b0c4de;}

so it is hard to get a "feel" for the way the CSS Inserts should be constructed. It seems like it's a matter of "if not this" - "than that" - "or else"....

I sure appreciate all of your input, though. I'll let you know what finally works.

ok, lets look at this from the begining. you said

I am trying to change the color on a page. The page is div post-11, so says Firebug.

when you refer to PAGE that is the entire page but then you say the page is div post-11.

the div with a class of post-11 is not the page but a small part of the page, the post. this would be a small part of the page and the CSS insert you said you used has a totaly invalid CSS Selector. If the CSS selector is invalid then the rule will never be applied.

Larry then gave you the css to change the background for a post with a class of post-11, assuming from our example, that you wanted to change the post background (see not having teh URL to look at what you want to change, we have to make some assumptions)

I suggested adding an !important because of the CSS selector precedence rules. It would caue this rule to be applied in case another rule was also being applied.

Then you stated you are trying to change the background color of the page, which is why I told you to use the body.page-id-11.... css - something that I tested and it works.

another issue could be that you are placing it at the end of your CSS inserts but you have a syntax error earlier which is causing all teh following css to be ignored.

so remove all your css inserts except for my last suggestion and see what happens. But remember that we can only go by the information you give us, when there is misleading information, or a answer is given using the wrong termonology the results might not be what you expect.

But keep working on it, if you can't show us the page, then attach a export of the settings ech time so we can look at whet you are actually doing.

I just imported the setting you attached to a previous post and it shows the following on the last line

html body.home div#wrapper div#container table#layout tbody tr#bodyrow td#middle div#post-11.post-11 {
background-color: #fff000;
}

I would take this line out and start over.

Thanks for being kind and patient in your reply; my frustration at not being able to conquer HTML/CSS/Wordpress/Firebug and web site building in general is getting the best of me.

Although I started out with specific elements in mind to color, it came down to wanting to see any or all of the page change color; I just wanted to see the CSS Insert work on something!

I think Juggledad has hit the solution though. I am going to remove and save all of the CSS inserts except for the one I am working on.

Larry, that long selector that I put in there was overkill - it was the CSS path on the element I inspected in Firebug - The div #11 in the td#middle. You are right - I am taking it out.

Thanks again for sharing all of your expertise.

Sharon

Juggledad, you were right. I removed all of the code in CSS Inserts, ATA 3.7.3, leaving only the code to change the background-color, and it worked. So thank you to you and Larry for another valuable lesson in working with CSS Inserts in ATA Options. I wish I had thought of it myself, better luck next time.