Adding/Updating Online Application Images

Last updated
Save as PDF

Before proceeding you will need to create Static Resources for your institution images. See Salesforce’s Help & Training article: Creating a Static Resource.

static resources screen

Navigate to the Community Themes tab.
Click on the Theme that your Online Application Community uses.
Click Edit.
In the Header Logo field, enter the Name of the Static Resource. For example: TX_Univ_logo.

Note: The Header Logo image is 70 x 60 px and is a good size for using a shield or your mascot.

In the Hero Image Desktop field, enter the Name of the Static Resource.

Note: The Hero Image is 1336 x 260 px; this is a different size than that used on the Sign-In page, which is 1440 x 400 px.

In the Hero Image Mobile field, enter the Name of the Static Resource.
You can also enter a Header Text Line 1, Header Text Line 2 and/or a Hero Text Field.
Save your changes.

Sample Community Theme record

default theme sample

Will display

Recommended Image sizes:

Header Logo image = 70 x 60 px
Hero Image = 1336 x 260 px
targetx-dashboard-hero = 1440 x 400 px
targetx-header-university-icon = 57px high x however long you need it to be.
targetx-submit-success .targetx-submit-success-logo = 57px high x however long you need it to be.

Building your image URLs

Follow these steps to build your image URLs for use in Online Application CSS:

Make note of your Online application base URL.

For example:

https://targetxapply.force.com

Navigate to the Static Resource for the image file and click View File. Copy the URL.

For example:

https://c.naXX.visual.force.com/resource/1119933759000/MyImageHeader

Using the examples above, the image URL would be:

https://targetxapply.force.com/resource/1119933759000/MyImageHeader

Configuring Image URLs

If you want to use separate images for mobile in your Communities, add the following to your Community Theme CSS for Hero and Logo images:

Navigate to the Community Themes tab.
Select Edit for the Theme you want to update.
In the Custom CSS field, you can use the following example replacing the min-width and max-width and image url to meet your needs:

/* Updating the hero image - this is what displays for the Community login page */
@media (min-width: 568px) {
.targetx-dashboard-hero {     
background-image: url("https://yourdomain.com/site_label/resource/static_resource_13_digit_numerical_value/static_resource_title");
width: 1440px;
height: 400px;
}
}

/* Updating the hero image for mobile devices - this is what displays for the Community login page for mobile devices */
@media (max-width: 568px) {
.targetx-dashboard-hero {
background-image: url("https://yourdomain.com/site_label/resource/static_resource_13_digit_numerical_value/static_resource_title");
height: 250px;
background-position-x: 0px;
background-position-y: 0px;
}
}

/* Updating the logo image - this is what displays for the Community login page */
@media (min-width: 568px) {
.targetx-header-university-icon{
background-image: url("https://yourdomain.com/site_label/resource/static_resource_13_digit_numerical_value/static_resource_title");
background-repeat: no-repeat;
width: (your image height)px;
height: 57px;
}
}

/* Updating the logo image for mobile devices - this is what displays for the Community login page */
@media (max-width: 568px) {
.targetx-header-university-icon{
background-image: url("https://yourdomain.com/site_label/resource/static_resource_13_digit_numerical_value/static_resource_title");
background-repeat: no-repeat;
width: (your image height)px;
height: 33px;
background-position: center;
margin-left: 5px;
}
}