I built a custom component and put it into an iframe on the Salesforce homepage. The top border for the standard component is blue (same as all other) but the top border for the custom component comes up black. 1. How can I make it the same color as all the other ones (i.e: blue)? 2. How can I remove the title for that custom component and make it not show up?

Thoughts? Thanks in advance for the help!

Custom Homepage Component

2 Answers 2


Just to be clear what you are working with...

On a Home Page Layout you have a Custom Home Page Component (named as 'Test Case') configured as an HTML Area containing an IFRAME that has a 'src' attribute directed at a VisualForce page, correct?

If so, on the VisualForce page markup <apex:page /> tag, do not specify a tabStyle attribute value and it will default to the styling of the Home tab automatically and nothing more needs to be done. In this same vein, <apex:page tabStyle="Home" /> is not valid markup and will not compile.

In order for the default styling of the page to inherit the Home Tab styles, the page must have the showHeader="true" attribute on it so that the home tab is displayed, the home tab styles are added to the page markup and becomes the unspecified default. The CSS styles that are being applied here are all descendants of the .homeTab style from the dStandard.css stylesheet.

Specifically visible in the original screenshot are the related lists' styles. They are as a result of .homeTab .bPageBlock { } If it isn't feasible to display the header, the VF page content can be wrapped with a body tag (as previously noted) that has the homeTab class applied to it, though this has the possibility of creating duplicate body tags in the page which would be invalid markup. <body style="homeTab"> <!-- content --> </body> Alternatively, the homeTab class could be added to a div instead of a body tag, as long as the styles which would be inherited from body.homeTab [extended.css] are not necessary.

If a tabStyle attribute is set on the VF page tag for an object or a custom tab which is not rendered (i.e. <apex:page tabStyle="Contact" />) the style of that embedded page content will differ from the wrapping page, in this case the Home tab.

  • what you described in the first two paragraphs is exactly what I have, and I stripped off the sidebar and header for the VisualForce page. I do not have a TabStyle attribute, but it still shows up "black" <apex:page controller="MyCustomController" showHeader="false" sidebar="false">
    – user988
    Commented Dec 28, 2012 at 4:19
  • I got it! Apparently adding "<body class="homeTab">" to the VF page gets the styling back for some reason. I think the problem is related to stripping the header away. But, your answer sort of made me think about it in a different way. Thanks for the help! Appreciate it!
    – user988
    Commented Dec 28, 2012 at 4:38

Adding the following line: <body class="homeTab"> to the VisualForce page gets the styling back and fixes the problem. I now have the default home tab color. It seems that when I used showHeader="false" it stripped away all the styling.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .