,

Customizing the Look and Feel of Your Force Platform Site

Your site is up and running, but the pages don’t have your company’s look and feel. The public sees the standard Salesforce colors. By tweaking the site template and referencing it from your Visualforce pages, you can brand your site with your logo, colors, and layouts.

The site template is a powerful, yet simple component that enables you to control the look and feel for your entire site. Once you associate the site template with your site, you must code each Visualforce page to reference the template using the {!$Site.Template} expression shown below.

Upload static resource files and reference them from the site template, site header, or site footer to easily control the look and feel for your site pages. Static resources are files—including archives (such as .zip and .jar files), images, stylesheets, JavaScript, and other files—that you can reference from Visualforce pages.

To customize the look and feel of your site:

1.
First, assign the template for your site by doing the following:

  1. Click Setup Develop Sites.

  2. Click Edit.

  3. Use the lookup field to find and select SiteTemplate for the Site Template field.

  4. Click Save.

2.
Reference the site template by adding the following tags (shown in bold) to your existing PublicJobs Visualforce page:

<apex:page showheader="false" action="{!initList}"
    controller="PositionSearchController"
    standardStylesheets="true">
  <apex:composition template="{!$Site.Template}">
  <apex:define name="body">
    ...
    ...
    ...
  </apex:define>
							</apex:composition>
</apex:page>

3.
Next, upload your stylesheet and company logo as static resources by doing the following:

  1. Click Setup Develop Static Resources.

  2. For each static resource:

  1. Click New.

  2. Enter the name and description, and browse to the file to upload.

    In this example, the stylesheet is named SiteCSS and the logo is named Logo.

  3. Set the Cache Control setting to Public. Static resources with private cache control do not show up in sites.

  4. Click Save.

4.
Now modify the site header component to display the Universal Containers logo and use the company’s stylesheet by doing the following:

  1. Click Setup Develop Components.

  2. Click Edit next to the SiteHeader component.

  3. Replace the following line:

    <apex:image url="{!$Site.Prefix}
  {!$Label.site.img_path}/force_logo.gif"
  style="align: left;" alt="Salesforce"
  width="233" height="55" title="Salesforce"/>

    with this new line:

    <apex:image id="logo" value="{!$Resource.Logo}"/>

  4. Add the following line after <apex:stylesheet value="{!$Resource.SiteCSS}"/>:

    <apex:stylesheet value="{!$Resource.SiteCSS}"/>

  5. Click Save.

5.
Browse to your site’s URL to see the Universal Containers company logo and the new color scheme.

Figure 216. Branding the Job Postings Page for Universal Containers

[View full size image]

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.122.124