Site Settings: Branding
PLEASE NOTE: The Portal Branding tab has undergone a refresh and reorganization. The functionality remains but may be located under a new sub tab, in addition to several new features. This article will be updated to reflect the changes soon.
The Branding sub menu, in the SITE SETTINGS area, allows you to customize the look of the Patron Portal with colors, images, and custom CSS or HTML code. Header links, a custom welcome message and a link to your organization's Terms and Conditions are also options included on this screen.
- Background Color Enabled?: If enabled, sets the background color on the Patron Portal from the default black.
- Accent Color Enabled?: When enabled, you can set the 'hover state' (aka 'mouse over') color. For example when your mouse hovers over the 'Play' button, this setting would determine the accent color in that hover state.
- Light Theme: Changes the background color to a light theme. Commonly used when your organization logo is transparent with a dark colored font - it'll be much more visible with the Light Themed background.
The Global CSS (cascading style sheets) is written to be a perfectly fine default for the look and functionality of your Patron Portal, however you are welcome to add Custom CSS to modify the appearance of specific elements by enabling the "Custom CSS" button and adding to the field that opens up below. The "Available CSS Selectors" button provides a list of some of the most common elements to customize. The "Manage Assets" button allows images to be uploaded so that they can then be referenced by the CSS.
CUSTOM FOOTER HTML:
You can add a custom footer using the Custom Footer HTML field. If enabled, this footer will override a Footer Image uploaded further down the screen in the Images section, even if this field is empty. So if you intend to use a Footer Image, do not enable the Custom Footer HTML.
Upload images to four specific areas of your online portal.
- Header Logo: Appears in the header of your Patron Portal's subscriber screen as well as each video's landing page. Square or wide images work best.
- Hero Logo: Appears on the login screen of your Patron Portal, above the voucher login card and/or the Subscriber login card. Square or wide images work best.
- Footer Image: Appears as the footer of your Patron Portal's subscriber screen as well as each video's landing page. Wide images work best. This image is overridden by the Custom Footer HTML field (high up the screen) if it is enabled.
- Favicon: Appears as the icon in the web browser tab.
Header links will appear to the right of the header image (or in the sidebar on mobile). These can be used to redirect to another website (ie. a donation pitch), show custom HTML (ie. an embedded form), add anchor links to sections further down the page, and any number of creative uses.
TERMS & CONDITIONS LINK:
Enable this area if you would like to link out to your terms and conditions (usually hosted on your own website). Will appear at the bottom of the Patron Portal, just below the footer. Please note, if you have the Custom Footer HTML enabled (above) that will override this. In that case, just add the Terms & Conditions link to your custom footer field above.
Custom Welcome Message:
Enable this field to add a custom message on your Patron Portal login screen. The message will appear below your "Hero Logo" and above the voucher/subscriber login cards.
If you need further guidance please reach out and we will be happy to share tips, tricks and advice!