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.