+ Start a Discussion
calvin_nrcalvin_nr 

Customer Portal and sites..(How to change the "out of the box" UI of the customer portal?)

Hi,

 

I am a developer new to the force environment. I am working on putting together a customer portal for my organization.

 

I followed online tutorials and got one set up. However, the look and feel of this portal is different and seems older than our actual Salesforce tenant look and feel.

The configurable look and feel is limited to changing fonts and colors. There is no simple way to change the styling and make it look like our salesforce tenant or even our website.

 

I read that sites.com can be used to make sites rich in styling and graphics and use them in the customer portal.

 

My question is how can this be acomplished? all the way from a custom login page to the portal itself where the portal style, look and feel is similar to our website.

It seems like somehow I need to override the default stylesheet of the portal and override it with the Sites.com pages.

 

So this is actually about how to accomplish retaining customer portal functionality with a better and modern looking GUI using sites.com

 

Can somebody please point me in the right direction as to how I can get a start with this. Thanks in advance.

Best Answer chosen by Admin (Salesforce Developers) 
EIE50EIE50

Your approach is right.

 

You would need to write all the visualforce pages / apex classes which would all the required functionality including the navigation between pages. Then, you create a new force.com site and do the setup. Here you would need to specify the customer portal against which users would need to authenticate.

 

You have 2 options. 1) use force.com site for your app with bare bone customer portal enabled for authentication. Else, 2) You will display the login page via the site and expose other VF pages via customer portal, so, the user is in the site (url will be like http:/....force.com) when not logged in and upon logging in user is in the customer portal (url will be like http://c.na3...../apex/vfpagename). The customer will not see any difference as the transition from site to portal is seamless except the url part.  Once you do this, customers can no longer see the regular customer portal or the home tab inside the portal.

 

Thanks.

All Answers

calvin_nrcalvin_nr

I would highly appreciate it if somebody could help point me in the right direction here.

EIE50EIE50

Your approach is right.

 

You would need to write all the visualforce pages / apex classes which would all the required functionality including the navigation between pages. Then, you create a new force.com site and do the setup. Here you would need to specify the customer portal against which users would need to authenticate.

 

You have 2 options. 1) use force.com site for your app with bare bone customer portal enabled for authentication. Else, 2) You will display the login page via the site and expose other VF pages via customer portal, so, the user is in the site (url will be like http:/....force.com) when not logged in and upon logging in user is in the customer portal (url will be like http://c.na3...../apex/vfpagename). The customer will not see any difference as the transition from site to portal is seamless except the url part.  Once you do this, customers can no longer see the regular customer portal or the home tab inside the portal.

 

Thanks.

This was selected as the best answer
calvin_nrcalvin_nr

Thank you for the insightful post. I will definitely look into this. 

I should look in deeper at the option where you said I can use just sites to provider customer portal type functionality while using the portal to just authenticate and control data security. 

 

That being said, if I continue to work on modifying the css of the portal, Is there a way for me to modify the html as well. For example how would I add a logo above the portal tabs. I just do not want to use the logo option and upload a logo image. I would like to insert the logo via the html code and also change the design of the portal using CSS at the same time. 

EIE50EIE50

I too had trouble figuring it out and i would not say this is impossible (but i dont know how to do it).

 

Many of them suggested me to get the css properties of the portal by using firebug and modify those properties by using your own CSS. I was never able to figure out how to do that. But its not at all recommended because in future if SF changes its attributes then we will be left broke. Best way is to use VF pages inside your portal by which you can hide the basic portal look and feel.

 

Good luck with the experiment :).

 

Best.

calvin_nrcalvin_nr

I am moving forward by eneabing customer portal login for my Site and creating VF pages to fully customize look and feel.

I was able make changes using the other way too. We just need to figure out the CSS declarations of the existing portal look and feel and override it using exact names but it is not a good solution if we need to change a lot of things.

 

Let us see how the Force.com Sites with Portal goes. Making your previous reply as the solution. Thanks.

I have another question about browser warnings and I will create a new thread for it.