I have a super small VF page that is embedded as a component on my Contact page. It works fine internally. However, when I expose it to users in my Community, it appears differently. I've tried to edit the background of the page to the same HEX code as the Community styling and that makes no difference.

Here is my code (result is same regardless of including/removing style):

enter image description here

Here is what it looks like internally: enter image description here

Here is what it looks like as a Community logged in user: enter image description here

  • You may have to go into Chrome and inspect the rendered HTML to get the right style override. Hi Mary, BTW! – greenstork Aug 28 '14 at 19:57
  • 1
    Thanks Dave. I inspect the HTML but I don't know where I should be looking for the style override. I found a different hex code for the background but that did not fix the problem. Is that the body.sfdcBody element? I can see that on the Community page it is using #B1BAC1 but that is not what I have on the VF page (see above) and I'm not sure how it overrode my code. Sorry I don't really know CSS at all so this might be a really basic question. – mpusto Aug 29 '14 at 20:35
  • Salesforce in the standard UI often contains a number of stylesheets to maintain standard UI look and feel. It's likely that the stylesheet for the community is just different, as it relates to this component. You can always try applying your style directly to the body tag itself, inline, which would override any styles being applied. You might also consider using the !important tag to insure your style wins out: css-tricks.com/when-using-important-is-the-right-choice – greenstork Aug 29 '14 at 22:43

I was able to resolve this by adding: 'showHeader="false"'

<apex:page standardController="Contact" showHeader="false" >
  • 3
    actually one of our developers improved this to: showHeader="{! ISBLANK($CurrentPage.parameters.iframed) }" That way, you can maintain the header if the page needs to also work on it's own, without being embedded. – Guy Clairbois Mar 14 '18 at 8:59

In lightning and classic my visualforce page was working fine but exposing it to community users changed it's background to Grey.

Here are the two solutions that worked for me:

  1. on Vf page set showHeader = false(If Header is not needed when page is viewed in classic)

  2. Set showHeader dynamically, showHeader="{!IF($User.UIThemeDisplayed == 'Theme4d', false, true)}". In Lightning, showHeader will be false and in Classic it will be true.


Try adding classes to your body/H1 tags like this:

<apex:page standardController="Contact">
  .myBodyStyle { background-color: #DDE4E9; }
  .myH1Style { text-align: center; color: red; }
<body class="myBodyStyle">
  <h1 class="myH1Style">{!Contact.Portfolio_Prompt__c}</h1>

If needed, you can add the !important flag to any styles that are still not being picked up ( e.g. background-color: #DDE4E9 !important; ).


You can replace the body with div and provide id to the div tag.

Like :<div id="xyz"> <h1> </h1> </div>, and have your content inside.

Then you can write css to give the background color:

     background-color: #DDE4E9 !important;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.