10

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?

14

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.

6

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

enter image description here

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.

  • Why would you STRONGLY recommend against it? VisualForce is just another tool in the toolbox of options to develop a customized experience in Salesforce. – Chris Hoffman Aug 1 '12 at 12:31
  • 1
    Echoing Chris's comment - that is why VF is there. If corporate branding is indeed a concern, then you can reskin the entire SF interface with VF pages, then use the standard VF tags to pull in Page Layouts and whatnot. The big negative going all custom is that you now have to MAINTAIN all that code....=) – Andy Boettcher Aug 1 '12 at 14:21
  • 2
    I second @Jason Lawrence I would not want to recreate the entire SFDC UI in VF just to brand the internal use of the tool. That is a LOT of code to maintain!! and it sort of defeats the purpose using a cloud based product to reduce IT operations cost. You'd have to have a team of VF developers working for you - every time you want to change a page layout you can't have an admin do drag-drop you have to alter a VF page - ouch! For a Portal or Site on the other hand, customize away! You may want to look into OrchestraCMS for that. Custom look feel with drag-drop content changes! – caleb Aug 1 '12 at 14:54
  • 1
    Jason was clear about considering cost versus benefit, as caleb echoed. I'd have to side with this position as well, and I'm a developer. Just because you can rewrite virtually all of the functionality of Salesforce in Visualforce doesn't make it a good idea to do so. – Adam Aug 1 '12 at 15:48
2

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.

0

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);
}

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.