Recipes by Category

App Distribution (2) Bundle logic, interface and services for distribution. App Logic (37) The Apex programming language, workflow and formulas for logic. Collaboration (5) The Salesforce Chatter collaboration platform. Database (29) Data persistence, reporting and analytics. Integration (33) Web Service APIs and toolkits for integration. Security (9) Platform, application and data security. Tools (4) tooling User Interface (36) Visualforce MVC and metadata-drive user interfaces. Web Sites (12) Public web sites and apps with optional user registration and login.
Beta Feedback
Cookbook Home » Customizing the Look and Feel of Your Site

Customizing the Look and Feel of Your Site

Post by Developer Force  (2010-07-16)

Status: Certified
Level: novice


Your site is up and running, but the pages don't have your company's look and feel. The public sees the standard beige and blue. You want to use your company's logo and stylesheet.


The default sample pages are all branded with the look and feel, but you can upload your own logo and stylesheet as static resources and reference them from the site template. The site template controls the layout and branding for your entire site.

To brand your site with your logo, colors, and layouts:

  1. First, assign the template for your site:
    1. Click Setup | Develop | Sites.
    2. Click Edit.
    3. Use the lookup field to find and select SiteTemplate for the Site Template field. It may be the default value.
    4. Click Save.
  2. Next, upload your stylesheet and company logo as static resources:
    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.
  3. Now modify the SiteHeader to display your company's logo (Logo) and use your company's stylesheet:
    1. Click Setup | Develop | Components.
    2. Click Edit next to the SiteHeader component.
    3. Replace the following line:
      <apex:image url="{!$Site.Prefix}
        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:imageid="logo" {!$Resource.Logo}"/>:
      <apex:stylesheet value="{!$Resource.SiteCSS}"/>
    5. Click Save.
  4. Browse to your site's URL to see your company logo and style.


Enable and customize the Visualforce site template and its components to control the design of your sites. Because the site template can reference other components and static resources, you can change the look and feel of your site with just a few modifications.


Recipe Activity - Please Log in to write a comment


voted as verified by PS001  (2015-03-04)

We set up a site but the logo we used the colors display differently through salesforce then through a Windows Photo Viewer.  Any ideas as to why this would happen?

by a093000000YF7Yo  (2014-03-19)

We set up a site but the logo we used the colors display differently through salesforce then through a Windows Photo Viewer.  Any ideas as to why this would happen?

by a093000000YF7Yo  (2014-03-19)

I followed the directions exactly but it didnt work. thoughts?

by a093000000Wc7w4  (2013-02-11)

Lets see What it is?

voted as verified by Khurram Shahzad  (2011-10-04)

Works fine man

by a093000000GTlbl  (2011-09-27)

Worked as described!

voted as verified by a093000000GTlbl  (2011-09-27)

 Sorry guys - fixed.

by Jon Mountjoy  (2011-01-17)

i've seen this same issue on a couple of the postings - is this an error or a coincidence?  (take a look at  weird. 

by chris_centra  (2010-12-07)

@Earl Grey
yes the lines are the same.

by Ketan Benegal  (2010-12-02)

Is it me or are the old and new line in 3c identical?

by Earl Grey  (2010-11-13)


Vote to Verify a Recipe

Verifying a recipe is a way to give feedback to others and broaden your own understanding of the capabilities on When you verify a recipe, please make sure the code runs, and the functionality solves the articulated problem as expected.

Please make sure:
  • All the necessary pieces are mentioned
  • You have tested the recipe in practice
  • Have sent any suggestions for improvements to the author

Please Log in to verify a recipe

You have voted to verify this recipe.