Is there any way where I can change the header style of standard salesforce pages. I have a hint where I can upload CSS into documents and that will change the header style. Any body know about this ?


First, create a new component:

Setup > Customize > Home > Home Page Components > New > HTML Area > Narrow

Enter "HTML mode" using "Show HTML" on the component editor. You can use the <style> tag to include the styles you want. You could also use JavaScript to load the style from a document or static resource, as in:

    var newStyleSheet = document.createElement("link");
    newStyleSheet.rel = "stylesheet";
    newStyleSheet.type = "text/css";
    newStyleSheet.href = "/resource/cssResourceName";

Next, create a Home Page Layout, if you have not already done so:

Setup > Customize > Home > Home Page Layouts

Be sure to include the custom component, and also assign the layouts to all profiles.

After this, you need to enable custom sidebar components, if you have not already done so:

Setup > Customize > User Interface > Enable Custom Sidebar Components on all Pages

At this point, your style will appear on most pages (but not setup pages, reports, or Visualforce pages without a sidebar).

 <apex:page controller="AdminController" standardStylesheets="false">


.bPageHeader .phHeader td.right {





In between make your css

for ids,classes use browser inspect element

  • Where di I save the css? is it in documents? Nov 18 '13 at 11:04
  • In you custom page
    – Sunny
    Nov 18 '13 at 11:50
  • If you are using statdard page means place it in homepage components
    – Sunny
    Nov 18 '13 at 11:52

Complementing @Sunny answer. If parameter standardStylesheets="false" is acceptable, you can save your own styles as a static resource. It's easy to reuse and efficiently.

  1. Prepare your css files and archive them in zip.
  2. Create new Static Resource (Setup->Develop->Static Resources), upload the archive.
  3. Use it in your custom page or SiteTemplate:
<apex:page standardStylesheets="false">
  <apex:stylesheet value="{!URLFOR($Resource.MyStyles, 'styles/styles.css')}" />   

"MyStyles" here is a name of the Static Resource. "styles/styles.css" is a path inside the archive.

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.