5

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.

1

I too, have often wanted to do this. After some fiddling around i've come to the conclusion that it is NOT a "good idea"(tm). Here's two very important reasons you should not do this, even though you can:

  1. CSS, rules by their nature, cascade down. Altering a high level style may break, for instance, how a pageblocktable row is displayed. The degree of testing you'll need to do to ensure you're not breaking something somewhere else is staggering.
  2. Often Javascript is triggered off of class or id definitions. While I've often wanted to disable or alter the pre-built js, this is even more dangerous.

I think, because I don't want to just leave you saying "don't do this" that what I'd recommend is actually cranking things to 11, and developing a custom visual force page that has the sidebar and header turned off. You can then attach your own stylesheet, and duplicate the functionality of the header/sidebar pretty easily. Is it quick and easy? no. is it safer? yes.

I develop a lot of Angular.js applications inside force.com and often wish I could mix/match my angular apps with the builtin sidebar/header but no amount of namespace trickery and conditional css rules i've tried (and I've spent a good amount of time on it) has ever worked 100% of the time.

Cheers

  • Thanks Kevin, I perfectly know it is not safe to do it, but when a client wants something there is no other alternative to it but go ahead and do it, :) – codeinprogress Jun 17 '13 at 18:28
1

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.

  • I added the !importnant but it didn't work. – codeinprogress May 17 '13 at 13:55
  • !important must come before the semicolon - fixed so it doesn't just get ignored by the browser. – AvatarKava Feb 24 '15 at 12:50
0

write your css in left side bar where you have attached your custom component.

<iframe src="/apex/Page" allowtransparency="true"  marginwidth="0" marginheight="0" 
   hspace="0" vspace="0"  ="" scroll="No" align="top" frameborder="0" height="180px" 
  width="350px">
</iframe>
<style>body{background-color: #F3F3EC;}</style>

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.