[SalesForce] Overriding Salesforce CSS with custom CSS

I wish to change the CSS styling of standard salesforce pages with my own styling.

I have created a custom sidebar component named CustomCSS and attached it to the left sidebar. I have then enabled this component for all my layouts. For starters I have written a simple HTML code to test things out.

<style>body{background-color: #F3F3EC;}</style>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

When I save the component, both the heading and paragraph appear as they should, however there is no change in the background color of the body.

When I inspected the page using Firebug, it says – "The results here may be inaccurate because some stylesheets could not be loaded due to access restrictions".

I want to know:

1) How can I remove these access restrictions so that my style sheet will override the salesforce's default style sheet.

2) I need to change the entire look and feel of the standard salesforce page, how do I know which style elements they use.

Best Answer

If you want to override one sytle sheet over another you can use !important as shown below



    body { background-color: #F3F3EC !important; }


To change the entire look and feel of the standard salesforce page you can use jquery for that and to know which style element they use you can use firebug for Mozilla Firefox or by pressing F12 in Google Chrome.