How much of the Salesforce User Interface can I customise?

I would like to change the colours and images used in salesforce to provide a completely custom user interface that will adhere to my corporate brand style guidelines.

What are my options?
How much can I change using point and click configuration?
Do I have to use Visual Force pages or is there a declarative alternative?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

There are only a number of things you can change with point and click. You can, for example, change:

1. The logo at the top left corner
2. Change the grouping of tabs via apps
3. Tab names and labels
4. Add custom links to the Home tab
5. Don’t think you can change the color of the standard tabs
6. Enable/Disable collapsible sidebar
7. Show custom sidebar components on all pages

This list is by no means exhaustive, but it will give you an idea of the kind of changes you can make using point and click.

You can, however, change the complete look and feel of your org by creating custom Visualforce pages. There is no limit (in theory) of how much customization you can do with custom Visualforce pages. The only constraints that apply in this instance are – budget, in-house skill set, and time.

Hope this helps!

Anup

P.S. I’ve marked my answer as a community wiki because your question will not generate a concrete answer but is good enough to deserve a community wiki that will be curated by the community.

Method 2

Without using any form of ‘Hacks’ which are strongly discouraged, not a lot using Configuration.

We always create a app and add the customers logo in top left corner replacing the standard salesforce release image

With Visualforce you can do (virtually) anything you can do with HTML/CSS but would STRONGLY recommend against it.

So long as your external communications (email templates) and portals are branded this is normally sufficient. Think COST vs Benefit.

Method 3

You can change the logo at the top left hand corner of your app, and thats more or less it, style wise. BUT you can have html/javascript running in a component in the left navigation that you then customise the appearance of Salesforce but its a hack and generally not recommended.

Method 4

I’ve made this custom stylesheet with Stylebot Chrome extension. Saves appprox 80px of vertical space and uses neutral grey colours. I wouldn’t deploy it to your user base, but works ok for admin. Here’s a screenshot.

Stylesheet:

#AppBodyHeader .phHeader {
    background-color: #bfbfbf;
    margin-bottom: 0px;
}

html.ext-strict {
    background-color: #bfbfbf;
}

#phHeaderLogoImage {
    visibility: hidden;
    height: 30px;
    width: 0px;
}

#AppBodyHeader {
    background-image: none;
}

li.brandPrimaryBgr.zen-active.primaryPalette {
    background-color: #6e6a6e;
}

ul.zen-inlineList.zen-tabMenu {
    background-color: #e6e6e6;
}

div.bPageHeader {
    background-color: #bfbfbf;
}

div.menuButtonButton {
    background-color: #bfbfbf;
}

html {
    background-color: #bfbfbf;
}

div.bPageFooter.noTableFooter {
    background-color: #bfbfbf;
}

#contentWrapper {
    background-color: #bfbfbf;
}

.bPageHeader td.left {
    background: none;
}

.bPageHeader td.right {
    background: none;
}

.homeTab .brdPalette {
    border-top-color: #000000;
}

.zen .zen-headerBottom {
    background: linear-gradient(#e6e6e6,#e6e6e6);
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0