Hello! It's been a while since I've posted here, hope everyone is doing well. Looks like business is booming at BFA!

I have a home page of static content, and a "News" page for my blog posts. I would like to add a border and different color background for each individual post, that is, the post "container" with the headline, byline, body, etc. When I try to do this under ATO, the border and background appear on my static pages as well.

Here is the URL of the static page:
http://www.midriffrecords.com

And here is the URL of the post page:
http://www.midriffrecords.com/news

I feel like the answer is right in front of me, but I can't see it.

Thanks!

Tony

As you may know, pages are just special posts which is why the styling applys to both. If you want it different what you can do is add CSS inserts and start the CSS Selector with 'body.page' so lets say you want to change the center area color to red for a page, you could use

body.page #middle .page {background: red;}

OK, I see. So would you advise styling the pages via CSS inserts, and use ATO for the posts?

Also, is there a place to find which selectors I would need to modify (for instance, I would not know to add the "#middle" tag)? Or are the ones you have given the only ones I'll need?

Thanks so much for such a fast response!

Well you may need more depending on what you want to do. A good tool is FireBug in FireFox so you can examine the elements of the page and see the css that changes them.

I forgot about Firebug! Excellent suggestions. Thanks, I should be good to go now!

OK, I spoke too soon! Not quite working out, and I think I am just not getting the right selector in the CSS. Maybe I can "show my work" and you can lend some insight?

I updated my ATO so that all post containers would have a border: 1px solid #999999.

I then updated my external CSS, trying the following:

body.page #middle .page
body.page #middle div.page
body.page div.page

all set with a border: none;

But it still is not removing the border on the static page. I have attached a png with the Firebug readout of the HTML and CSS. I have a feeling I am just not finding the right selector.

Do you have any advice? Thanks!

Tony

I then updated my external CSS, trying the following:

body.page #middle .page
body.page #middle div.page
body.page div.page

all set with a border: none;

what is the EXACT syntax you used (more errors are caused by typos...)

i tried each of these variations separately:
body.page #middle .page
{
border: none;
}

body.page #middle div.page
{
border: none;
}

body.page div.page
{
border: none;
}

I also tried each one with
{
border: 0px solid #999999;
}
(That may have been when I started to feel my mind slipping away...)

I'm confused, you said

updated my ATO so that all post containers would have a border: 1px solid #999999.

but I only see two references in the CSS to 999999. One is on 'table#wp-calendar th {' and the other is on
input.textbox for WPG2 */
input.text,
input.textbox,
input.password,
input.file,
input.TextField,
textarea {
and I don't see any 'body...' CSS Inserts at all.

Apologies for the confusion. I have removed the #999999 border from my ATO, until I figure out this issue. Right now, the border is not in my ATO or my external CSS (which is midriffrecords.com/midriff.css). Otherwise I would have the border appearing on all my pages, which I don't want, until I can figure out how to selectively apply it.

I was hoping that the screen capture I supplied might help as a clue to determine which selector I should be using. On the lower right of the screen capture, the border appears in the ATO-generated CSS in the Firebug window, and I was wondering if that might be a clue as to what selector I should be trying to modify under my external CSS.

The CSS I supplied in my previous post was just a rundown of what I had previously entered into my CSS, and had not helped in removing the border on my static pages. It is no longer included in my CSS.

I hope this helps to clarify! Sorry again about the confusion. Thanks for all your efforts!

please do this.
Set your border around the posts as you want it, then export your settings (ato->export/import settings) and attach it to a reply and I'll take a look.

(if you first do an export, then make the changes and do a second export, you can just re import the first to get back to where you were)

Excellent idea! Exported settings attached.

A reminder that I also use http://www.midriffrecords.com/midriff.css for the majority of my CSS instead of the HTML/CSS inserts

Thanks again!

Tony

add this to CSS Inserts

body.page div.page,
body.page div.page .post-bodycopy {
	border: solid 0px red;
}

I would make sure you add any CSS for the theme in CSS Inserts instead of your external CSS. They will carry over during updates, it's less confusing and it you ever change themes, they will not be in the external style sheet which could conflict with the new theme. Just my two cents.

Worked like a charm! Thank you so much!

I also took your advice and replaced the CSS into the inserts panel. Thanks again!