Adding Chatter component changes styling of page

Because the chatter component is just wrapping the standard Salesforce Chatter VF component, we don’t have a lot of control about what gets injected when it gets used.  When you use the standard salesforce header, all those resources get pulled into the page. But as your elegant UI shows,  you are not doing that…

A fallback you might find viable is to call the Social VF page from within an iFrame,  rather than using the chatter component.  In the iFrame, the page won’t inject its CSS into the rest of the page and I think you’ll be able to maintain your elegant UI. 

This is a problem with the themes that we probably won’t be able to fix until a major version.  (For backwards compatibility reasons.)  The xmlns stuff in your html tag is irrelevant to what’s going on.  What is relevant is that Salesforce adds certain CSS files when certain conditions are met.

1. Your page is using the standard salesforce header.

2. Your page has chatter on it.

3. The page has a standardStyleSheets=“true” attribute on the apex:page tag of the Visualforce page.


Since in your case you have none of those things, certain CSS files are not getting added and the page looks different.  A workaround that will solve most of your issues is to add this css to your page.

body {
    font-size: 75%;
}


You’ll still have a few things that are different, (text links for example), but you can fix those with a little extra CSS as well.

I’m assuming that this needs to be added to the individual pages that don’t have the chatter component. Or is this something what won’t affect pages with the Chatter Component?

I think you are right. 

er … uh … right about which?

You should be able to add it to all pages regardless of whether the Chatter component is included.

Will it make the text on pages that already have the chatter component even smaller?

no, it shouldn’t.  The CSS that salesforce is sending down already has that rule, so I think it will be fine.