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) Force.com 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 » Creating a Consistent Look and Feel with Static Resources

Creating a Consistent Look and Feel with Static Resources

Post by Developer Force  (2010-07-16)

Status: Certified
Level: novice

Problem

You want all of your Visualforce pages to have a consistent look and feel that can easily be updated.

Solution

Create a static resource from a Cascading Style Sheet and include it in your Visualforce pages. A static resource is a file or archive that you upload and then reference in a Visualforce page.

To create a static resource from a stylesheet:
  1. Click Setup | Develop | Static Resources.
  2. Click New Static Resource.
  3. In the Name text box, enter myStyleSheet. This name is used to identify the resource in Visualforce markup.
  4. In the Description text area, enter My site-wide stylesheet.
  5. Next to the File text box, click Browse to navigate to a local copy of your stylesheet.
  6. Click Save.
To reference the stylesheet in a page, create the following Visualforce page:
<apex:page showHeader="false">
  <apex:styleSheet value="{!$Resource.myStyleSheet}"/>  
  <!-- Your content goes here -->  
    
  

My Style

This page uses styles from my stylesheet. The stylesheet is a static resource.

</apex:page>

To change the look of your pages, all you need to do is update the static resource with your new styles, and every page that uses that static resource displays with your new style.

Discussion

Static resources can be used for many other purposes, not just stylesheets. A static resource can be an archive (such as .zip and .jar files), image, stylesheet, JavaScript, or any other type of file you want to use in your Visualforce pages.

A static resource name can only contain alphanumeric characters, must begin with a letter, and must be unique in your organization. If you reference a static resource in Visualforce markup and then change the name of the resource, the Visualforce markup is updated to reflect that change.

A single static resource can be up to 5 MB in size, and an organization can have up to 250 MB of static resources, total.

Share

Recipe Activity - Please Log in to write a comment

Be the first to comment.

X

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 Force.com. 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.