function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
MATTYBMEMATTYBME 

Custom HomePage Component for Customer Portal using CSS and Images

I have created a component using CSS that I want to include into our Customer Portal HomePage. It looks like this

 

 

I have tried to upload the CSS and Images as Documents in SF and then creating a New Homepage Component using HTML referencing the '\<Image Name>' and '\<CSS Name>' from Documents within the HTML Component with no joy. It will display the text but not the CSS layout.

 

So then I thought I would maybe try all of this using a Visualforce Component with the CSS and images in Static Resources and then call the Visualforce Component, using javascript, into a HTML Homepage Component but I am not having much joy with that either.

 

Can anyone help me? I need some simple instuctions as to how to go about putting the above into mt Portal Homepage.

 

Thanks

Best Answer chosen by Admin (Salesforce Developers) 
MATTYBMEMATTYBME

Ok to answer my own question the following is what I did to get something similar into the Main section of the Customer Portal Homepage.

 

First upload the images you want in Statis Resources.

 

Next upload the CSS you want to use into Static Resources also as a .CSS file. I used a simple CSS layout as in the picture above:

 

 

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;


}
#header {
 color: #FFFFFF;
 font-size: x-large; 
 font-weight: bold;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 30px;
 margin: 10px 0px 0px 0px;
 background: #442E1F;
}
#leftcolumn { 
 color: #000000;
 text-align: left;
 border-left: 1px solid #ccc;
 background: #9A9591;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 370px;
 width: 698px;
 float: left;
}
#rightcolumn { 
 color: #000000;
 border-right: 1px solid #ccc;
 background-position: center;
 background: #9A9591;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 370px;
 width: 182px;
 float: right;
}
#footer { 
 width: 910px;
 clear: both;
 color: #000000;
 border: 1px solid #ccc;
 background: #442E1F;
 margin: 0px 0px 10px 0px;
 padding: 5px;
}
 
Next insert the HTML you want to display between <apex : component> tags as a Visualforce Component.
 
 
<apex:component >

<body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Header -->
<div id="header">

<bold>News and Information</bold>

</div>
<!-- End Header -->

<!-- Begin Left Column -->
<div id="leftcolumn">

<h4>Most Commonly Used Solutions</h4><p><br>
<p>Head over to our repository of Solutions to find our most up-to-date answers to common issue, error messages and user instructions in our <a href="https://na6.salesforce.com/501?fcf=00B300000003x3q" target="blank">Most Commonly Used Solutions</a>.<p><br>
<p>Or try the Suggested Solutions upon submitting your <a href="https://c.na6.visual.force.com/apex/CustomerPortalNewCase" target="blank">New Case</a>, rate it if it was helpful and close your own Case.<p><br><br>

<h4>Recent Community Suggestions</h4><p><br>
<p>Take a look at what our <a href="https://na6.salesforce.com/ideas/ideaList.apexp" target="blank">Community</a> is saying and asking for in Agility Product, Velocity Product, General Support, Customer Portal and Documentation Categories.<p><br>
<p>What would you most like to see <a href="https://na6.salesforce.com/ideas/ideaList.apexp?c=09a800000000Xoy&lsi=0&category=&status=Idea+Implemented" target="blank">impelemented</a>? What Suggestions are we <a href="https://na6.salesforce.com/ideas/ideaList.apexp?c=09a800000000Xoy&lsi=0&category=&status=Idea+Under+Consideration" target="blank"> considering implementing</a> in the future?<p><br>
<p>Would you like to see your Organizations Product details, including Licensing informtaion available within the Portal? Vote and Comment on an <a href="https://na6.salesforce.com/ideas/viewIdea.apexp?id=087800000000eZR" target="blank"> exsiting Idea</a>!<p><br><br>

<h4>Expanding Video Tutorials Catalogue</h4><p><br>
<p>We have added some Video Tutorials to our Portal to help with some common user issues. Take a look at what has just been added to our <a href="https://c.na6.visual.force.com/apex/VideoTutorials?sfdc.tabName=01r800000003Xd6" target="blank">Video Tutorials</a> catalogue, including the new Agility 2G New Install walkthrough.


</div>
<!-- End Left Column -->

<!-- Begin Right Column -->
<div id="rightcolumn">
<h1 align="center"><apex:image url="{!URLFOR($Resource.SolutionsImage)}"/></h1>
<br>
<br>
<br>
<br>
<h1 align="center"><apex:image url="{!URLFOR($Resource.IdeasImage)}"/></h1>
<br>
<br>
<br>
<br>
<br>
<h1 align="center"><apex:image url="{!URLFOR($Resource.VideoTutorialsImage)}"/></h1>

</div>
<!-- End Right Column -->

<!-- Begin Footer -->
<div id="footer">



</div>
<!-- End Footer -->

</div>
<!-- End Wrapper -->


</body>
</html>
</apex:component>
Notice that to call the images into the HTML you use:
<apex:image url="{!URLFOR($Resource.VideoTutorialsImage)}"/>
 
 
 
Next create the Visualforce page and call your CSS Static Resource and your HTML (Visualforce Component) into the page:
 
 
<apex:page showHeader="false" sidebar="false">

   <apex:stylesheet value="{!URLFOR($Resource.PortalHomePageCSSComponent)}"/>
  <c:PortalHomePageCss />
 
</apex:page>
Lastly create your Homepage Component (HTML):
 
 
<iframe src="/apex/NewHomePageComponent"  ="" width="100%" frameborder="0" height="500"></iframe> 
 
You now have a Homepage Component you can add to your Portal Homepage Layout. 

 


All Answers
MATTYBMEMATTYBME
Ok to answer my own question the following is what I did to get something similar into the Main section of the Customer Portal Homepage.
 
First upload the images you want in Statis Resources.
 
Next upload the CSS you want to use into Static Resources also as a .CSS file. I used a simple CSS layout as in the picture above:
 
 
* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;


}
#header {
 color: #FFFFFF;
 font-size: x-large; 
 font-weight: bold;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 30px;
 margin: 10px 0px 0px 0px;
 background: #442E1F;
}
#leftcolumn { 
 color: #000000;
 text-align: left;
 border-left: 1px solid #ccc;
 background: #9A9591;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 370px;
 width: 698px;
 float: left;
}
#rightcolumn { 
 color: #000000;
 border-right: 1px solid #ccc;
 background-position: center;
 background: #9A9591;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 370px;
 width: 182px;
 float: right;
}
#footer { 
 width: 910px;
 clear: both;
 color: #000000;
 border: 1px solid #ccc;
 background: #442E1F;
 margin: 0px 0px 10px 0px;
 padding: 5px;
}
 
Next insert the HTML you want to display between <apex : component> tags as a Visualforce Component.
 
 
<apex:component >

<body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Header -->
<div id="header">

<bold>News and Information</bold>

</div>
<!-- End Header -->

<!-- Begin Left Column -->
<div id="leftcolumn">

<h4>Most Commonly Used Solutions</h4><p><br>
<p>Head over to our repository of Solutions to find our most up-to-date answers to common issue, error messages and user instructions in our <a href="https://na6.salesforce.com/501?fcf=00B300000003x3q" target="blank">Most Commonly Used Solutions</a>.<p><br>
<p>Or try the Suggested Solutions upon submitting your <a href="https://c.na6.visual.force.com/apex/CustomerPortalNewCase" target="blank">New Case</a>, rate it if it was helpful and close your own Case.<p><br><br>

<h4>Recent Community Suggestions</h4><p><br>
<p>Take a look at what our <a href="https://na6.salesforce.com/ideas/ideaList.apexp" target="blank">Community</a> is saying and asking for in Agility Product, Velocity Product, General Support, Customer Portal and Documentation Categories.<p><br>
<p>What would you most like to see <a href="https://na6.salesforce.com/ideas/ideaList.apexp?c=09a800000000Xoy&lsi=0&category=&status=Idea+Implemented" target="blank">impelemented</a>? What Suggestions are we <a href="https://na6.salesforce.com/ideas/ideaList.apexp?c=09a800000000Xoy&lsi=0&category=&status=Idea+Under+Consideration" target="blank"> considering implementing</a> in the future?<p><br>
<p>Would you like to see your Organizations Product details, including Licensing informtaion available within the Portal? Vote and Comment on an <a href="https://na6.salesforce.com/ideas/viewIdea.apexp?id=087800000000eZR" target="blank"> exsiting Idea</a>!<p><br><br>

<h4>Expanding Video Tutorials Catalogue</h4><p><br>
<p>We have added some Video Tutorials to our Portal to help with some common user issues. Take a look at what has just been added to our <a href="https://c.na6.visual.force.com/apex/VideoTutorials?sfdc.tabName=01r800000003Xd6" target="blank">Video Tutorials</a> catalogue, including the new Agility 2G New Install walkthrough.


</div>
<!-- End Left Column -->

<!-- Begin Right Column -->
<div id="rightcolumn">
<h1 align="center"><apex:image url="{!URLFOR($Resource.SolutionsImage)}"/></h1>
<br>
<br>
<br>
<br>
<h1 align="center"><apex:image url="{!URLFOR($Resource.IdeasImage)}"/></h1>
<br>
<br>
<br>
<br>
<br>
<h1 align="center"><apex:image url="{!URLFOR($Resource.VideoTutorialsImage)}"/></h1>

</div>
<!-- End Right Column -->

<!-- Begin Footer -->
<div id="footer">



</div>
<!-- End Footer -->

</div>
<!-- End Wrapper -->


</body>
</html>
</apex:component>
Notice that to call the images into the HTML you use:
<apex:image url="{!URLFOR($Resource.VideoTutorialsImage)}"/>
 
 
 
Next create the Visualforce page and call your CSS Static Resource and your HTML (Visualforce Component) into the page:
 
 
<apex:page showHeader="false" sidebar="false">

   <apex:stylesheet value="{!URLFOR($Resource.PortalHomePageCSSComponent)}"/>
  <c:PortalHomePageCss />
 
</apex:page>
Lastly create your Homepage Component (HTML):
 
 
<iframe src="/apex/NewHomePageComponent"  ="" width="100%" frameborder="0" height="500"></iframe> 
 
You now have a Homepage Component you can add to your Portal Homepage Layout. 

 
This was selected as the best answer
khanWebgurukhanWebguru
I am trying to make customer portal but I am stuck on my way :(. I selected Customer Portal and created a new portal having name as "My Customer Portal" after that I explore the option and found some options under "Look and Feel section" when I hit search icon infront of header text box that shows me a popup which is total empty and there is an option for search. I am not getting the exact place where should I define that header so that it can be list down in that popup whcih allow me to select and set in Header text box. I did 2 things.
 
1: I uploaded my logo in static folder and some css.
2: I created a component having some HTML.
 
But again these two things are not listing in header findings.
 
Please anyone help me in this situation. Where should I define some HTML so That it will show in header and footer search dialoge for selection and also logo???
 
Please help me I am thanking you in advance.
 
BR,
 
Asif Ahmed Khan
Sr. Software Enginner
Palmchip Pvt. Ltd
 


MATTYBMEMATTYBME
If you are wanting to brand your Portal with your own header and footer I suggest you either go to my blog and read this post: Salesforce's Customer Portal Tip#1: incorporating HTML 
or go to this resource http://wiki.developerforce.com/index.php/CRC:Service_Customer_Portal#Configure
and follow my post about Customer Portal Branding.
 
 
Hope that helps. 


surenssurens
upload ur file into Documents tab. then u will access that file in to the customer portal


Mariappan PerumalMariappan Perumal
Hi.
 
The link given below is not working and can you provide me assistance to do the look and feel for the customer portal