Customizing the Standalone Console

We understand that branding is important and helping your volunteers feel at home on your CERVIS page is a top priority for us. There are many options available to customize the look of your standalone console that allow you to match your CERVIS pages to your organization website and branding.

This article covers the process of customizing your standalone console to match your website. If you are interested in embedding CERVIS directly into your website, or you need any of the direct links to your console, please refer to the knowledge base article linked HERE.

You can customize the header, footer, background colors, font colors, and more. To see multiple examples of different implementations refer to the knowledge base article: Examples of Standalone Console Customization.

To make any customizations to your console, begin by following the steps below: 

1. Login to your CERVIS Account.
2. Click on the "Edit System Configuration" link under the "System Management" section of the Main Dashboard.
3. Click on the “System Appearance” heading to expand the section.

Header

The console header is a customizable field at the top of the standalone console which you can utilize to make your CERVIS console represent your organization more effectively, and look more like your website.

There are three options for the Console Header Type:

• Default: This option will contain your logo on a white background.
• Custom: This allows you full control of the HTML within the header and is the best option for matching your website.
• None: This will remove the header section entirely, and move your organization logo lower onto the console page.

Custom Console Header: If you chose to use the Custom option for the Console Header Type then you can utilize this field to format the content of the header however you need. This is a text field that allows you to modify the HTML by editing the source code. There is no size restriction on this header, and you can edit the HTML to contain other links or additional information. You could even edit the header to have the same navigation options that appear on your website.

To help get you started, you can load a copy of the Default header option by clicking the “Copy Default” button. This will replace whatever is currently in the Custom Console Header field with the HTML of the “Default” console header which is your logo on a white background. From here, you can edit the HTML to change the background color, add a background image, or add in other code for things like social media links.

To remove the information that is currently being used as the header, click the “Clear” button. 

For specific examples of ways that you can modify the header image, color, and more, see the knowledge base article linked HERE.

Footer

The console footer is a customizable field at the bottom of the standalone console which you can utilize to make your CERVIS console represent your organization more effectively, and look more like your website.

In the “Custom Console Footer” text field, you can use the toolbar to add background color, text, or even an image to be used as the footer. You could even customize details like the height of the footer or add information such as social media links by modifying the HTML. 

To remove the information that is currently being used as the footer, click the “Clear” button. 

For specific examples of ways that you can modify the footer image, color, and more, see the knowledge base article linked HERE.

Console Background Color

The Console Background Color is the color of the frame surrounding the page content. In order to change this setting enter the hex number of the color you’d like to use or click on the color picker to the right to select an RGB color or pick from a list.

If the Console Background Color and Page Background color are identical the system will automatically remove the frame border surrounding the page content.

Page Background Color

The Page Background Color is the color behind the page content. In order to change this setting enter the hex number of the color you’d like to use or click on the color picker to the right to select an RGB color or pick from a list.

If the Page Background Color and Console Background color are identical the system will automatically remove the frame border surrounding the page content.