function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
raj161raj161 

Custom CSS in Sites and Partner Portal

Hi,

I am checking few of the sites example and I see them completely different from the salesforce portal.

The UI is completely different than the salesforce portal UI.

 

I am planning to build a Site and Portal which uses my css and be different from the normal salesforce UI.

I read in this below link that we can customize the UI using the CSS

http://docs.google.com/present/view?id=agqxwgjz4qr3_301gvp3srdk

 

Is there any way I can get the details of customizing the portal UI using CSS? Are there template CSS which I can apply to my Site and modify them accordingly?

 

Thanks in advance.

Best Answer chosen by Admin (Salesforce Developers) 
raj161raj161

Thanks for your reply.

I have found the solution. The solution is adding the custom css in the header and footer to customize the look and feel.

 

Raj

All Answers

mits430xmits430x

Hi raj161.

I'm not 100% sure what you exactly wanted, but I can give some example to you which might help you.
I used to try customizing Ideas on Customer Portal that require that portal header must be removed.

Following is one example which explains customization for Ideas on Customer portal.

I think you will get same result if you try it on Partner Portal.
http://mttk-attachment-developer-edition.na7.force.com/resource/Reply100303

1 - Upload the HTML to Documents tab.
    Note you should set Externally Available checkbox.

2 - Apply the above document to "Customer Portal's header" in "Look and Feel" section.
3 - Show Ideas in your browser.
4 - If you have Firefox and Firebug, please try to search target DOM node you want to tweak and write code to CSS or Javascript in HTML, and you will get what result you wanted.


Have a fun.

raj161raj161

Thanks for your reply.

I have found the solution. The solution is adding the custom css in the header and footer to customize the look and feel.

 

Raj

This was selected as the best answer
KalluruKalluru

Hi Raj,

 

The solution is adding the custom css in the header and footer to customize the look and feel.

 

The solution you gave me is not working

 

1) I added the CSS in Salesforce internal resorces 

2)I incluede my custom CSS in header.html 

      <apex:stylesheet value="{!URLFOR($Resource.StyleResources, '/StyleResources/css/layout.css')}" />

3)I added the header to Partner portal


 when I login my Partner portal it is not picking up the CSS from internal resources.

 

Thanks,

Praveen