Audience
This article is intended for developers or administrators who customize display using HTML, CSS, and JavaScript.
Overview
Extended Display determines the look and feel of Event Forms, Websites, and Emails.
Extended Display is an advanced capability that should only be performed by someone skilled in HTML.
Extended Display is located under Plan > Configure > Display > Extended Display.
Images and Attributes
Images and Attributes describe how to assign the Main Image and the First Page Image under Display > Assets.
Then define Attributes for each image.
HTML Body and Table Attributes
HTML Body and Table Attributes describe how to define ids and classes for the specified sections.
The following elements are used:
- <Body> corresponds to the Page
- <Table> corresponds to the Section
- <Table> corresponds to the Section Header
- <TR> corresponds to the Form Fields
Font Attributes or Classes describe how to define the attributes that attach to the specified options:
- Title
- Subtitle
- Highlight
- Error
- Header
- Subheader
- Text
- Fine Print
Preview Font Classes and Section Table
This is where you can preview the changes made in the Font Attributes or Classes section.
Custom HTML Shell
You can add a custom HTML shell around the page by inserting HTML above and below the table generated by the Certain Platform. The display shell is declared as HTML5, so you can include HTML5-specific code, such as the Role attribute. You can specify the HTML to be added to the Document Head, Header, and Footer in these three sections:
- HTML to include within the page head
- Use to edit or replace the default text provided.
- Shell Header (HTML to include above the main page <table>)
- Sample Header HTML
- Shell Footer (HTML to include below the main page <table>)
- Sample Footer HTML
In each section, you can add data fields by clicking the place in that section where you want to place the field, selecting the field in the Data Fields drop-down list, and clicking the relevant button: <HEAD></HEAD>, Shell Header, or Shell Footer.
For example, if you want to insert a row at the top of the page and a column on the left and right of the form fields, use the following basic HTML elements: HTML to include above the main page <table>
<html><head><title></title></head>
<body>
<table>
<tr><td colspan="3">Top column</td></tr>
<tr><td>Left side column</td><td>
<!-- End Custom Header Shell -->
<!-- Begin Custom Footer Shell -->
</td><td>Right side column</td></tr></table>
Adding Images to a Custom Display Shell
If you have uploaded any images under Plan > Configure > Display > Assets, you can add them to any of the three sections of your Custom Display Shell:
1. Click the place in the section where you want to place the image.
2. Select the image in the Available Files drop-down list.
3. Click the button for the area to add it to: Shell Header, Shell Footer, or <HEAD> </HEAD>.
4. That pastes in the Relative Path to the file, which is displayed when you select the file.
You can see (and copy) the same path by right-clicking the image on the Plan > Configure > Display > Assets page.
## HTML to include within the page head
Use this to edit or replace the default text provided.
## Shell Header (HTML to include above the main page <table>)
Sample Header HTML
## Shell Footer (HTML to include below the main page <table>)
Sample Footer HTML
## Adding Images to a Custom Display Shell (continued)
In each section, you can add data fields by clicking the place in that section where you want to place the field, selecting the field in the Data Fields drop-down list, and clicking the relevant button: <HEAD></HEAD>, Shell Header, or Shell Footer.
For example, if you want to insert a row at the top of the page and a column on the left and right of the form fields, use the following basic HTML elements:
HTML to include above the main page <table>
HTML to include below the main page <table>
Adding Images to a Custom Display Shell (continued) The following example shows how to place an image path in the shell: Relative Path: /accounts/register123/certaintest/supporttestaccount/events/certainsupporttest/header_image.png Add to: Shell Header Note: This is a sample illustration to show how the path references work.
Was this article helpful? Yes No
Related articles
- Account Structure and Sub-Account Management
- Primary Display Setup
- How the setting "Incomplete registrations count against Capacity/Inventory for __ minutes after their last modification" works
- Custom Display Fields
- Session Speaker Integration - Touchpoint
Comments 0 comments Please sign in to leave a comment.