Customise your branding
This document explains how you will create a customised brand for the login page for your application.
Note: Any customisations made with these settings will go live. Consider making changes in a scheduled maintenance window. |
Input controls allow you to set values for a range of stylistic attributes using a combination of selection controls and standard CSS constructs.
Important:
The input field values must contain only valid CSS constructs.
All colours are entered in hexadecimal format and support opacity. Enter valid CSS directly, or use the adjacent colour picker to select a colour.
Logo and Background
You have the option to display your own logo image and / or background image (or colour).
Keep in mind: the .png format allows for alpha transparency and animation.
To configure the Logo and the Background that will display for your users when they login into your application, select from the following:
- Logo
Select to upload an image file (png, jpg, jpeg) of your company logo you wish to be displayed on your application login page.
-
- Once you gave selected your logo it will display on the right of the screen.
- If you wish to preview the full image, click on the image display on the right of the screen.
- If you have selected the incorrect image, select the upload
again and select a new image.
- Your logo can occupy up to 190px in width and 100px in height. Any overflow will be hidden. It will be centred vertically and horizontally.
- Background
Your background can be either an image or a colour. You will select the kind background you require using the radio buttons provided
Image: Select the radio button to the left of Background Image. Then select to upload a background image file (png, jpg, jpeg) to be displayed on your application login page.
-
- Once you have selected your logo it will display on the right of the screen.
- If you wish to preview the full image, click on the image display on the right of the screen.
- If you have selected the incorrect image, select the upload
again and select a new image.
- Note: If you upload a .png with transparency, the selected background colour will be visible though this channel.
- Your background image will be scaled to fill the screen
Colour: Select the radio button to the left of Background Colour. Use the colour picker or input field to designate the colour of your background.
Styling
The input field values must contain only valid CSS constructs. Examples are shown below.
Controls
The pictured controls map to the following CSS properties:
Login Box Shape Corners: The corner radius of the form container in pixels Eg: 15px
Login Box Background Colour: The background colour of the form container Eg: #FFFFFF
Login Box Shadow: The box-shadow of the form container in any valid CSS format Eg: 0 0.75rem 4rem 1rem rgba(0, 0, 0, 0.3)
Button Colour: The background colour of all buttons. The rollover colour will match the button text colour Eg: #000000
Button Text Colour: The colour of text for all buttons. The rollover colour will match the button bg colour Eg: #CCCCCC
Heading Font Colour: Text colour of all form headings Eg: #000000
Body Font Colour: Text colour of input fields and other body text, including copyright, privacy policy and terms & conditions where enabled Eg: #000000
Body Font (Google Fonts): Use the dropdown to select the font to be used for all text elements
Copyright, Privacy Policy and Terms & Conditions
Toggle the presence of the above fields as required. You can provide your own Copyright text (255 character limit) and / or the URL(s) for the Privacy Policy and / or Terms & Conditions links.
These fields appear beneath each form, with Privacy Policy and Terms & Conditions sharing a line with space between them, and Copyright text centred on the page on the line below.
View Live
You can see how your landing pages now appear. Use the dropdown to select the form you wish to see, then press the View Live button.
A new tab will open showing a fully rendered version of the selected page as would be seen in your live application.
Comments
0 comments
Please sign in to leave a comment.