How to change the header style for salesforce standard pages

Question

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 ?

Answer 1

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:

<script>
    var newStyleSheet = document.createElement("link");
    newStyleSheet.rel = "stylesheet";
    newStyleSheet.type = "text/css";
    newStyleSheet.href = "/resource/cssResourceName";
    document.getElementsByTagName("head")[0].appendChild(newStyleSheet);
</script>

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).

Answer 2

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

 <style>

.bPageHeader .phHeader td.right {

background-color:#FF0000;
}
.multiforce{
color:#FF0000;

}

</style>

 </apex:page>

In between make your css

for ids,classes use browser inspect element

Answer 3

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')}" />   
</apex:page>

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