Main Branding Overview

 

Editing the Main Brand 

To update or make changes to your branding, go to Setup → Branding. This page is split into two key sections: [1] Brand Settings and [2] Preview.

[1] Brand Settings: In this section, you can upload a logo or make adjustments to fonts, colours, and other elements across the different portals.

[2] Preview: This area allows you to view a live preview of your changes, allowing you to see how they look without the need to log into the different portals.

 

Settings Tabs

This page provides multiple tabs for you to update and refine the appearance of your platform.

• Font
• Background
• Header/Footer
• Forms
• Blocks
• Tables
• Images

 

Font

Font Family: Refers to the specific group of fonts you wish to use. For instance, "Open Sans" is the standard font family in the Vasto system.

Web-Font Head Link: Place the web link for your chosen font family here to enable its use. Keep in mind that the font must be one that is hosted by Google Fonts.

Font Size: Determines the size of the main body text in the system, measured in points. We recommend 11pt. 

Font Colour: This specifies the colour of the main body text (paragraph), represented by a six-character hexadecimal code. 

Heading Font Colour: This specifies the colour of the headings text, represented by a six-character hexadecimal code. 

*Note - Please ensure that the code you enter is a hex value and that it your colour choice is accessible and compliant. We recommend you test this using Color's Contract Checker. 

 

Background

Page Margin: This refers to the space at the top of the window above the logo. 

Page Background Color: This sets the colour for the background of the page, which is visible only around the very edges of the window.

Page Background Image: Input the URL for a background image. The image should measure 1000px in width and 800px in height. If it's smaller, the system will tile it automatically. If you prefer a solid colour or a gradient (where one colour gradually transitions into another), simply leave this field empty.

Main Content Background Colour: This determines the colour of the background area behind the main text. Generally, the default setting, which is white, is most suitable. 

Main Content Width: This setting controls the maximum width that the content can occupy on the screen. It's set to 100% by default (recommended for the best experience), allowing the content to span the full width of the screen, but you can adjust it to be narrower if preferred.

Maximum Content Width: This setting determines the widest width that the content can take up on the user's monitor screen. We recommend using the default value.

Should the Content Block Have Rounded Corners? The content block refers to the section of the window that is layered over the background. Typically, this block has square corners as its default shape, but they can be adjusted to have rounded edges if preferred.

Should the Content Block Have a Drop Shadow? In addition to the option of rounded corners, the content block can also feature a shadow effect beneath it. This effect is not enabled by default, but you have the option to turn it on if you wish.

Content Block Borders: If you choose, the content block can be outlined with a solid-coloured border. You can specify the colour here and determine the border's width. If you prefer not to have a border, simply set the border to 0px.

 

Header/Footer

Hyperlink of Logo Image: This feature has been relocated to the Images tab and is gradually being phased out. Please use the functionality there instead. If you've previously uploaded images in this section, you can delete them using the Remove Logo Image button.

Header Background Colour: This setting determines the background colour of the header, which is the section where your logo is displayed.

Header Background Image: This feature has been moved to the Images tab and is in the process of being phased out. Please use the function in the Images tab instead.

Header Height (in Pixels): This setting lets you adjust the height of the header section. We recommend the default setting.

Footer Background Colour: This setting determines the background colour of the footer. 

Footer Font Colour: This setting determines the colour of text within the footer. 

 

Forms

Button Background Gradient: The two colours specified here, colour 1 and colour 2, merge together in a vertical gradient. Since button text is light in colour, selecting darker shades for these colours can enhance readability. Darker backgrounds provide a good contrast with the lighter text, making it more visible.

Button Minimum Width: This setting determines the minimum width for buttons in the Admin Portal and applies to all buttons within it. Setting the minimum width too low might result in some text being truncated on certain buttons. Conversely, setting it too high can lead to unnecessarily wide buttons. If unsure, it's best to stick with the default setting. When needed, buttons will automatically expand to accommodate the length of the text displayed on them.

Button Font Colour: This setting adjusts the colour of the button text. To ensure the text remains clear and visible, it should be significantly darker or lighter than the background colour of the button.

Button Hover Background Gradient: This feature changes the colour of buttons when you hover your mouse cursor over them. The two colours mentioned here, colour 1 and colour 2, seamlessly blend together in a vertical gradient.

Button Hover Font Colour: This gives you the option to adjust the colour of the button text when the mouse cursor hovers over it.

Button Border: This setting allows you to specify the width of the button's border in pixels (optional) and choose the colour of the border if you decide to use one. If you prefer not to have a border, simply set the size to 0px. 

Should Buttons Have Rounded Corners? This option lets you determine the shape of the button corners, allowing you to choose between rounded or square edges.

Text Box Font Colour: This setting adjusts the colour of the text that a user types into a text box. Note that this does not affect the colour of the descriptive text located above the text box.

Text Box Border: This setting allows you to define the width of the text box's border in pixels (this is optional) and the colour of the border if you opt to have one. If you prefer not to have a border, simply set the size to 0px. 

 

Blocks

Element Background Colour: This lets you choose the background colour for an element. For example, this may be the background colour for a Form. 

Element Border: This setting lets you set the width of the border around the element in pixels, which is optional, and select the colour for that border if you choose to have one. If you prefer not to have a border, simply set the size to 0px. 

Should Element Blocks Have Rounded Corners? This option allows you to determine the shape of the element's corners, giving you a choice between rounded or square edges.

 

Tables

Column Header Background Colour: This setting lets you change the background colour of the column headers in a table. Column headers refer to the title cells at the top of each column.

Column Header Font Colour: This option adjusts the colour of the text used in the column headers.

Row Background Colour & Alternate Row Background Colour: This setting lets you modify the background colours for both odd and even rows within a table. You have the flexibility to use the same colour for both, giving all rows an identical background colour, or you can opt to use different colours. We recommend that you use different colours as it aids in distinguishing between rows.

Table Borders: This setting lets you manage the borders both inside and outside the table, including those between cells and around the table's outer edge. It allows you to specify the width of these borders in pixels (this is optional) and select the colour for the border. If you prefer not to have a border, simply set the size to 0px. 

 

Images

Logo: Upload your logo here. The logo must be 300 pixels wide x 60 pixels high and must be a JPG file.

If you intend to use a header background image behind this logo and want the background to be invisible, save the logo with a transparent background. This step is unnecessary if the header background matches the logo background colour (e.g., white).

Header Background Image: The header background image is a visual element positioned behind the logo in the upper part of the screen. While there are no strict dimensions to adhere to, we recommend that you keep the image width around 300 pixels to ensure compatibility with mobile devices. Be sure to opt for an image that can easily stretch horizontally to accommodate different window sizes, like a horizontal or vertical gradient. You may need to experiment with multiple header images to find the one that suits your needs best.

Page Background Image: This option is valuable for subscribers who prefer to display a background image instead of a solid colour on their branded pages. Please note that if the image is smaller than 1000 x 800 pixels, it will automatically be tiled. Leave this field blank if you want the background to be a solid colour or gradient.

Here are some important considerations:

• Mobile-Friendly: Consider how the background image will appear on a mobile screen, typically with a portrait orientation width of about 300 pixels.
• Subtle Textures: Opt for subtle textures as they generally look better than detailed photos or clipart images.
• File Size: Keep the image file size as small as possible to prevent slowing down page load times for all users.

Favicon: A favicon is a small icon that typically appears in the browser's address bar, often next to a website's web address. It serves as an identifier for differentiating browser tabs, bookmarks, or favourites associated with specific websites. The favicon must be 32 pixels x 32 pixels and a PNG or ICO (icon) file.

 

Reset / Save

Reset: Use this button to revert the branding editor settings to their default configurations.

Warning: Resetting the branding settings will permanently undo any changes, and they cannot be restored.

Save: Click this button to save all the current branding modifications you have made.