Changing the logo

By default, the logo displays in the top left of each form page in Sage. You can change the company logo on your forms pages by uploading a new image and updating the form CSS styles.

You can use a logo image you save a static resource within your organization, or upload an image to public web space.

Tip

For best results, use an image in PNG format, no more than 100 pixels in height.

Using a static resource

You can replace the existing form logo in your organization's static resources, or upload a new one.

Note

A user with administrator privileges needs to upload static resources.

Replace an existing static resource

  1. Go to Setup and search for Static Resources.

  2. To replace the existing logo, find the logo in the list (for example, FormLogo) item in the list. Select Edit.

  3. Select Choose file, and select your new form logo image.

  4. Ensure you set Cache Control "Public".

  5. Select Save.

Upload a new static resource

  1. Go to Setup and search for Static Resources.

  2. Select New above the list.

  3. Give the resource a Name and optional Description.

  4. Select Choose file, and select your new form logo image.

  5. Set Cache Control to "Public".

  6. Select Save.

Update the CSS

If you've added a new logo, you need to update the CSS for your form to reference it. This also applies if you want to reference an image you host on a public web server.

For more information about changing the CSS for your form, see Using CSS in your form.

In your CSS file, find the class .formTitle. This has a background-image attribute:

Copy

.formTitle CSS class

.formTitle {
    height: 100%;
    width: 100%;
    text-align: right;
    display: table-cell;
    vertical-align: right;
    font-size: 100%;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    background-image: url('/resource/FormLogo');
    background-repeat: no-repeat;
    background-position: 0px 0px;
   }

Change the URL you reference to use a different static resource. Or use a fully qualified URL (including the http://) to reference an external resource.

Tip

  • If you tested the form before you changed the logo, make sure you clear your cache to see the updated logo.

  • You can use a relative link to a static resource for the logo, such as url('/resource/FormLogo') in the example CSS class. Note that the expected URL is different for forms you host on Salesforce Sites and for forms you deploy to WX. Forms on sites require the site suffix in the relative path. For example, url('/forms/resource/FormLogo'). Whereas WX expects url('/resource/FormLogo'). To display the logo correctly in WX and on a Site, use a fully qualified URL for the logo image in the CSS. For example, url('https://fs-XXXX--c.vf.force.com/resource/1732098978000/FormLogo'). To get the fully qualified URL for a static resource in your org, view the static resource. Copy the URL from the browser address bar.