Salesforce Customer Portal CSS Modifications

Michael
McLaughlin

The Problem: How do I modify my Customer Portal implementation to match my public facing website?

The Salesforce Customer Portal is a great extension to Salesforce.com that allows companies to open up certain areas of their Salesforce organization to designated customer users for self-servicing their accounts. The Portal lets customers make account changes, log and view status on a case and provides answers to common customer questions...all without involving a support representative and inherent response delay.

Out of the box, the customer portal retains the standard Salesforce.com look and feel we have all grown accustomed to. End user of the portal (the customer's customers) however, will most likely be unfamiliar with this user interface. In addition, since most Customer Portal implementations hang off of the main website of a customer, there could be confusion for end users if they encounter the standard salesforce.com look and feel.

The Solution: Customer Portal CSS Mods

One solution to this problem is to format salesforce.com Customer Portal to match the style of organization's website. This gives the customer's end user the impression that he is still on the organization's site.

Customer Portal allows minimal customization of fonts and colors through a simple administration interface. This also allows you to supply a custom header and footer. In order to do more than this and complete the visual transformation of your Customer Portal implementation you can use Cascading Style Sheets (CSS).

Salesforce does not produce documentation explaining what CSS classes define which Customer Portal screen elements. This allows them to change these style elements in future releases. As a result, unlike supported salesforce.com customizations, you may need to verify your changes still work with future salesforce.com releases. In other words, be careful with the below :-)

You need to use a tool to help you get under the covers to see the interaction of CSS with what the users sees. Users of Mozilla Firefox have access to an excellent free add-on called Firebug. Firebug allows you to "inspect" the content and structure of any web page. Turn Firebug on and navigate to the pages of your Customer Portal implementation. Hover over the screen elements you wish to modify such as table headers, background images, etc. Take note of the CSS classes Firebug says are responsible for the elements' formatting.

Now that you know what out of the box Customer Portal styles are driving the interface elements you wish to change, you can override them using your own style definitions. You must use the same style class names so your browser will use your style definition and not the default one. Do this by:

• Modifying the style to your liking in CSS syntax
• Save your changes to a CSS file you store in Static Resources or Documents
• Reference your CSS file in the Customer Portal header HTML (accessible in the Customer Portal Administration panel) using a <link> tag

• OR, if your changes are small, simply use a <style> tag and insert your styles as HTML directly into the Customer Portal header
• View the resulting changes in Customer Portal and tweak as necessary
• Use Firebug to hover over your screen elements to see if your styles are being properly used

Further reading:

• From the Salesforce Blog
• From the Salesforce Forums

Example of the solution in action:

<style type=text/css>
/* Redefining this style for Customer Portal to make the font smaller */
body {
font-size:9pt;
}

/* Redefining this style for Customer Portal to make the listHeader an image */
.listHeader {background-image: url(/dimg/portalTabRight96999C96999C.gif);}

/* Redefining to make sidebar an image. Kept its present color and font definitions. */
.sidebarModuleHeader,
.nestedModule .sidebarModuleHeader {
background-image: url(/dimg/portalTabRight96999C96999C.gif);
color: #505154;
font-family: Arial, Helvetica, sans-serif;
}
...

Screenshot of Firebug inspecting Customer Portal's style elements: