In this article you can see several different examples of implementations of custom Console Headers and Footers. All of these customizations utilize the “Source Code” option found when editing these fields. To locate this button click the “More...” button then click the “Source code” button. The figure below shows these steps:
It is important to note that these are purely examples to see what is possible and you should use the default code provided in your console. Do NOT simply copy out the code provided in the examples or it will not work.
If you have questions about any of the examples in this article, or even a different way that you’d like to customize your console, our Customer Support team would be happy to help you. Just reach out to them using the “Need Help” button in your console or email them at support@cervistech.com.
Example with Background Color
With this example we’ve replaced the plain white background color with a navy background color. To do this, we’ve changed the background-color variable from #ffffff to #09394e. The rest of the code is the default which you can copy by clicking the “Copy Default” button under the “Custom Console Header” option. The modified code is in red below:
<div style="background-color: #09394e;"><center>
<img id="logo_image" style="width: 100%; max-width: 420px; height: auto;
padding-top: 10px; padding-bottom: 10px; display: block; transition: 0.5s;"
title="CERVIS Demonstration Console Logo"
src="https://cdn.cervistech.com/acts/images/logo/cervis-horizontal-dark-bg.png"
alt="CERVIS Demonstration Console Logo" width="420" height="" /></center></div>
Example with Background Image
With this example we’ve replaced the plain white background color with a background image. The rest of the code is the default which you can copy by clicking the “Copy Default” button under the “Custom Console Header” option. The modified code is in red below:
<div style="background-color: #ffffff; background-image:
url('https://cdn.cervistech.com/acts/images2/custom_header_bg.png');"><center>
<img id="logo_image" style="width: 100%; max-width: 420px; height: auto;
padding-top: 10px; padding-bottom: 10px; display: block; transition: 0.5s;"
title="CERVIS Technologies, Inc. Logo"
src="https://cdn.cervistech.com/acts/images/logo/cervis-horizontal-dark-bg.png"
alt="CERVIS Technologies, Inc. Logo" width="420" height="" /></center></div>
Example with Links for Filtered Event Listing Page
With this example we’ve used a combination of a background image with the addition of buttons for navigating to different pre-filtered versions of the Event Listing Page. This type of implementation could be very useful if you are operating as a multi-site organization. In our example, there are 2 different locations that a volunteer can select in the header and, on the event listing page, that will automatically filter the events by the location that the volunteer clicks on. The code we used is below:
<div style="background-color: #ffffff; background-image:
url('https://cdn.cervistech.com/acts/images2/custom_header_bg.png');"><center>
<img id="logo_image" style="width: 100%; max-width: 420px; height: auto; padding-top:
10px; padding-bottom: 10px; display: block; transition: 0.5s;" title="CERVIS Technologies, Inc.
Logo" src="https://cdn.cervistech.com/acts/images/logo/cervis-horizontal-dark-bg.png"
alt="CERVIS Technologies, Inc. Logo" width="420" height="" /></center><center><span
style="color: #ecf0f1;"><a class="button" style="color: #ecf0f1;"
href="../webreg/eventwebreglist.php?org_id=3242&event_category_id=32&console_mode=console"
target="myFrame" rel="noopener">Colorado Springs</a> | <a class="button" style="color: #ecf0f1;"
href="../webreg/eventwebreglist.php?org_id=3242&event_category_id=24&console_mode=console"
target="myFrame" rel="noopener">Monument</a></span></center><center>
<span style="color: #ecf0f1;"> </span></center><center></center></div>
We will periodically add additional examples to this article, so feel free to refer back in the future to find additional suggestions and inspiration. For more information about the different customization options, refer to our article about Customizing the Standalone Console.
Comments
0 comments
Article is closed for comments.