Salesforce | How to change Logo of externally accessible VisualForce Pages

|
| By Webner

Salesforce | How to change Logo of externally accessible VisualForce Pages

Steps to add Logo to externally accessible VF pages:

1. Add Logo/Image into Static Resources:

a. Go to Setup, then search Static Resource in Quick Find Box. Then click on Static Resources and then click on new button to create new static resource. The following page will open:

b. Fill all the fields as shown in above image:
Example: Name – myLogo
File – Choose file
Cache Control – Select Public from dropdown.
c. Then click on save Button to save the static resource.

2. Change URL of image in Site Header VisualForce Component:

a. Search VisualForce Component in Quick Find Box. Then click on VisualForce Component and open SiteHeader.

b. Then change the name of the static resource in value attribute of tag as shown below:

<apex:image value=”{!$Resource.myLogo}” style=”align: left;” alt=”Salesforce” width=”300″ height=”53″ title=”Salesforce”/>

c. Then write a script of externally accessible VF pages inside the
tag as shown below:

<apex:page controller="multiselect" showHeader="false">
     <apex:composition template="{!$Site.Template}">
----------Write all script here---------------
</apex:composition>
</apex:page>

Also, add showHeader=”false” in tag in order to hide the salesforce original Logo.

3. Then create custom site and add all those VF Pages in this site that you want to make externally accessible by Non Salesforce users.
For Example:

a. I’ve created visualforce page named as multi selected List and added this visualforce page in the site.

b. Select URL from the site and append the name of the Visualforce Page to this URL. Then logo of this page will change and externally accessible by non-salesforce Users/External Users.
When you go to URL(http://XXXXXXXXXXXXXXXXXXXXXXXX/multi_selected_List).
It will open ‘Multi Select List’ VisualForce Page. In this way, we can change the logo of externally accessible VisualForce Page (‘Multi Select List’) as shown below image:

Leave a Reply

Your email address will not be published. Required fields are marked *