+ Start a Discussion
MATTYBMEMATTYBME 

Tips for displaying HTML on the Customer Portal

Through trial and error I discovered that placing a graphic on the Customer Portal via Setup>Customize>Customer Portal>Settings [Your Portal] Edit>Look and Feel(section)>Lookup for a HTML Document to include in your Header or Footer you have to do some trickery to display it properly.

 

The major issue is that a graphic will not dynamically resize to the end users screen resolution settings. So, as in my case, I wanted to display a graphic to fill the entire Header section of the Customer Portal.

 

I created my graphic, which happened to be 1440px in width and 100px in height, and uploaded it to SF Documents as a .jpg image. I then created my HTML doc with a simple < img src > tag referencing the unique path of the image with will be something like, https://na6.salesforce.com/servlet/servlet.ImageServer?id=[an id]&oid=[another id]&lastMod=1247154430000.

(In order to get the image path you have to go to Documents and locate the image you want, click on the file to see its details, and then right click over the image and do a "Copy Image Location."

I then uploaded that to SF Documents. I then referenced that HTML document in the Customer Portal Setup as my Header.

 

All looked great, until I changed my browser to display on a screen with a 1024x768 resolution. The graphic displayed so long here that I had to scroll horizontally to see the entire graphic. I tested this with other resolutions and well much dismay.

 

So the Solution: Your either have to use JavaScript in your HTML document to handle the image resizing based on the end users screen resolution or you can use a < div > tag. I chose the latter. Here is the code:

 

<div style="position:relative; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1">
<img src="https://na6.salesforce.com/servlet/servlet.ImageServer?id=01580000000rnGN&oid=00D3000000000yM&lastMod=1247154430000" width="100%">
</div>
<div style="z-index:2; position:relative; margin:0px; padding:0px;">
</div>

A caveat on this though. You must create your image to be the width of the largest screen resolution you may encounter. That maybe 1280 or 1440 or even bigger. The above code will allow that image to display correctly on all resolutions settings, dynamically.

 

I have since discovered that the resizing to display on the appropriate end users sreen res settings for even HTML components used on the Customer Portal Homepage layout you will have to use the above code somewhere as well. If you do not your may see your square HTML component change size.

 

 

 

 This is a full screen shot using 1024x768 screen res and notice how the middle section (HTML Homepage Component) gets cut off.

 

Hopefully this above tip will mitigate any pain you have using HTML on your Customer Portal.

Ranjith PunneliRanjith Punneli

This was really helpful. can you please let me know how you did that My Profile and Logout in a box.

 

Regards,

R

GlenSteinhardtGlenSteinhardt

Very very helpful.  Thanks!

 

I've also recently learned that you can modify the sidebar using CSS embedded in this same header file.  Here is an example...

 

Note the rounded corners, shadowing, border color and font style.  Simply locate the classes you want to modify using FireBug and add those classes to that header file.  Also, see how the sidebar is aligned with the component on the right using padding.  That was a big pet peeve of mine that they didn't line up.

 

TigerPowerTigerPower

Hi,

 

can you provide some sample code (html / css) of your custom portal look & feel solution?

 

 

GlenSteinhardtGlenSteinhardt

That's a pretty large task....as there is a ton of custom code and, thanks to how Salesforce sets things up for the Portal, it's all over the place.  

 

Is there something in particular from the image that you're looking for?

TigerPowerTigerPower

Yes, I believe you :)

 

How about those rounded corners? They give fresh look to the portal pages.