I've been implementing a new component to use in sidebar, I created a visualforce page, a controller and a Custom Component HTML Area(Setup>Customize, Home Page Components). I must to use "iframe" to call my VF page, but I lose all my css reference from Sidebar inside the iframe and I don't know how to show my object list using the style equal the standard component "Recent Items", someone can help me?

  • As far as I know, if you use a VF page, you can have standardStylesheets attribute of the apex:page tag set to true. Maybe that's also available for home page components? Feb 14, 2014 at 17:53
  • I tried to set the tag with true, but it still not working.
    – maximorojr
    Feb 14, 2014 at 18:07
  • If you use the default stylesheet, you'll still need to figure out what styleclasses and elements you have to use. Use a tool like firebug to figure out what you need. Feb 14, 2014 at 22:54
  • Ok, I'll try now to figure out everything that I need. Do you know which component Salesforce uses to implement "Recent Items"?
    – maximorojr
    Feb 17, 2014 at 13:03
  • CSS for recent items is mostly defined in extended.css and common.css -- search in this files for .recentItemModule or .mruItem -- but if you use firebug you see it much clearer -- I'll update my answer for that.
    – Uwe Heim
    Jun 30, 2014 at 12:11

1 Answer 1


There will be a new Visualforce Area Home Page Component available, which should make task like this much simpler. Look at the Summer '14 Release Notes here: http://docs.releasenotes.salesforce.com/en-gb/summer14/release-notes/rn_forcecom_home_page_components.htm

Like mentioned by Lex you should use Firebug to figure out the CSS. Look at e.g. the recent items. It's easy to replicate that look and feel, even to improve it using jquery.


  • Use Mozilla Firefox
  • Install the Extension Firebug
  • Right-click on a recent item (from the original Salesforce List!)
  • select "Inspect Element with Firebug"
  • look at the bottom part of firefox, you'll see firebug there
  • there is a HTML-Tab showing the SF Markup
  • on the bottom right, there is a Style-Tab showing which CCS applies
  • you can click in the style-tab an tweak it realtime
  • you can also realtime tweak in the html tab
  • now try to nest your stuff in and elements similar to the way salesforce does.
  • You will probably use an to create the markup https://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_repeat.htm
  • learn as much CSS to understand how selectors work
  • if your page loads the standard CSS it should work
  • if not, replicate the relevant CSS Salesforce is using in extended.css and common.css
  • do not copy everything!
  • put the CSS inside a tag right on your page
  • check the results with firebug
  • tweak it as long as it looks like you want it
  • also check out jquery http://learn.jquery.com/about-jquery/how-jquery-works/
  • have a look on how selectors work in jquery
  • look at the css() function http://api.jquery.com/css/

I'm not exactly sure how experienced you are with CSS/JS, but you need some basic understanding. Please ask if you need more help on that.

  • Thanks Uwe, I'll take a look in your answer, actually I'm looking for time to do it. I've been working at other functions.
    – maximorojr
    Jul 1, 2014 at 11:23

You must log in to answer this question.

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