# Session Variables
Session variable are set within Luminate pages and are automatically reset at the end of the page as long as the reusable reus_reset_session_vars appears at the bottom of the page.
# List of Variables
The default VPM Luminate wrapper (reus_wrpr_1541) has been configured to set a number of session variables. These variables can be used when making or editing a page or form to customize its appearance and default settings.
# backgroundColor
This varaible sets the background color for the page or form. All color options match VPM's brand color palette. The possible values are:
black(#101820) - note: this is VPM's brand black, not complete black (#000000)dark-blue(#003865)gray(#b2b4b2)light-blue(#6cace4)white(#ffffff)
If no value is set, the page/form will have a vertical background gradient ranging from VPM's brand dark blue at the top to VPM's brand light blue at the bottom.
To set a background color using this session variable, open the HTML/plain text editor for the page/form you are working on. On a donation page, you would navigate to "Design Donor Screens" > "Donation Form" and then add an "HTML Caption" element as the first element on the form (or edit the existing HTML caption if one is already the first element on the form). As close to the top of the form as you can edit, add the following code:
[[U0:backgroundColor=**DESIRED COLOR**]]
For example, to make a page with a light blue background, you would include:
[[U0:backgroundColor=light-blue]]
If you wish to ensure that the default gradient background is set on the form, you can explicitly set the variable to a blank value by including the following tag on your form:
[[U0:backgroundColor=]]
# bannerImageURL
This variable determines the URL of the banner image displayed on donation pages. By default, the banner image is:
This file is stored in the image library, and is located at:
If you do not specify a value for this variable on a donation page, the default image will display as the banner. To override the default, simply set the value of this variable to the full URL of the URL you wish to use as the banner, e.g.:
[[U0:bannerImageURL=https://www.example.com/image.jpg]]
Please note that because your pages are served using HTTPS, the URL of the image used as the banner must also be served using HTTPS. This means that the URL you use as the value of the backgroundImageURL variable has to begin with https://, NOT http://
# donationFormAlignment
This variable sets the horizontal orientation of the donation form content. The possible values are:
centerleftright
center is the default value. Forms that are left- or right-aligned will appear 80 pixels from the selected side in browser windows that are at least 1024 pixels wide. For browser windows less than 1024 pixels wide, the form will take up the entire width of the page.
To set the donation form alignment using this session variable, open the HTML/plain text editor for the page/form you are working on. On a donation page, you would navigate to "Design Donor Screens" > "Donation Form" and then add an "HTML Caption" element as the first element on the form (or edit the existing HTML caption if one is already the first element on the form). As close to the top of the form as you can edit, add the following code:
[[U0:donationFormAlignment=**POSITION**]]
For example, you can left-align a donation form by adding the following tag to your donation form:
[[U0:donationFormAlignment=left]]
# fullBackgroundImage
This variable sets a background image on a page or form.
This can be used in conjunction with the backgroundColor variable. The background color will serve as a backup in the event that the background image does not load. The background color will also display while the user is waiting for the background image to load.
To set a background image using this session variable, open the HTML/plain text editor for the page/form you are working on. On a donation page, you would navigate to "Design Donor Screens" > "Donation Form" and then add an "HTML Caption" element as the first element on the form (or edit the existing HTML caption if one is already the first element on the form). As close to the top of the form as you can edit, add the following code:
[[U0:fullBackgroundImage=**IMAGE URL**]]
For more information on donation form background images, especially regarding size and positioning issues you may run into when using them, please see our images page.
# recurringChecked
This variable determines whether the gift frequency button on a donation form will be toggled to "monthly" by default. The default value is false (the one-time toggle button will be selected on page load).
To select monthly gifts by default using this session variable, open the HTML/plain text editor for the page/form you are working on. On a donation page, you would navigate to "Design Donor Screens" > "Donation Form" and then add an "HTML Caption" element as the first element on the form (or edit the existing HTML caption if one is already the first element on the form). As close to the top of the form as you can edit, add the following code:
[[U0:recurringChecked=true]]
# showBottomLogo
This variable determines whether the VPM/NPR/PBS logo appears at the bottom of a donation form. By default, the value is false. If set to true, the logo appears between the main form content and the bar listing VPM's tax-exempt status and EIN, centered horizontally.
To add the VPM logo to the bottom of a donation form, open the HTML/plain text editor for the page/form you are working on. On a donation page, you would navigate to "Design Donor Screens" > "Donation Form" and then add an "HTML Caption" element as the first element on the form (or edit the existing HTML caption if one is already the first element on the form). As close to the top of the form as you can edit, add the following code:
[[U0:showBottomLogo=true]]
Please note, the logo has a transparent background with white lettering, so it may be difficult to read against lighter background colors or background images.