Introduction
Extended Display is the set of options to customize the look and feel of your event forms, websites and emails.
Extended Display options are intended for users who are well-versed in HTML, CSS, and JavaScript.
Primary Display is another display configuration option for the basic header and footer. Those are suitable for non-technical users.
Page Details
Jump down to:
- Images and Attributes
- HTML Body and Table Attributes
- Font Attributes or Classes
- Preview Font Classes and Section Table
- Custom HTML Shell
- Adding images to a custom Certain shell
- Copying an existing HTML page into a custom Certain shell
Images and Attributes
If you have uploaded images in Display > Assets, you can select one as the Main Image and one as the First Page Image, and define any Attributes for each of those two.
HTML Body and Table Attributes
Define any ids and classes you want to use for the specified sections:
<Body>
Page <Table>
Section <Table>
Section Header <TR>
Form Fields <Table>
Font Attributes or Classes
Define any font attributes or classes that you want to attach to the specified options:
- Title
- Subtitle
- Highlight
- Error
- Header
- Subheader
- Text
- Fine Print
Preview Font Classes and Section Table
Preview the changes made in the previous section when you clicked Save.
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. This is an advanced feature, which should only be used by someone skilled in HTML. 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> </head>
- Shell Header (HTML to include above the main page <table>) – Displayed above the basic Header that you edit under Custom Header and Footer on the Primary Display page.
- Shell Footer (HTML to include below the main page <table>) – Displayed below the basic Footer that you edit under Custom Header and Footer on the Primary Display page.
In each one 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.
See below for how to add images to the custom shell.
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>
</body></html>
Adding images to a custom Certain shell
If you have uploaded any images on Display > Display >Assets, you can add them to any of the three sections of your custom display shell:
1. Click the place in that section where you want to place the field.
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 Display >Assets page.
Copying an existing HTML page into a custom Certain shell
Note: In the following instructions, <certaininc> isn’t a real tag. It just indicates where the form fields and content that are generated by the application will display.
1. Load the existing page in your browser.
2. Save the page as "complete Web page" on your local hard drive.
3. View the local copy of the page and decide where the form should go.
4. View the HTML source and find the text that needs to be replaced with the form — usually inside a <td> or <td> or <div> block.
5. Replace the text with <certaininc>Registration Form Goes Here</certaininc> and save the HTML.
6. View the Web page again to make sure you got it right.
7. Open the event in Certain and go to Plan > Configure > Display.
8. Upload all image files, JavaScript and style sheets via Display > Assets.
9. Copy the HTML above the <certaininc> tag into the Shell Header.
10. Copy the HTML below the </certaininc> tag into the Shell Footer.
11. Change the file paths of all images, css, and javascript files to that of the event's directory.
You can copy a path by following the instructions above: select the file in Available Files on this page, or right-click it on Display > Assets.
Note: In the following instructions, <certaininc> isn’t a real tag. It just indicates where the form fields and content that are generated by the application will display.
In each one 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.
See below for how to add images to the custom shell.
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>
</body></html>
Images and Attributes
If you have uploaded images in Display > Assets, you can select one as the Main Image and one as the First Page Image, and define any Attributes for each of those two.
HTML Body and Table Attributes
Define any ids and classes you want to use for the specified sections:
<Body>
Page <Table>
Section <Table>
Section Header <TR>
Form Fields <Table>
Font Attributes or Classes
Define any font attributes or classes that you want to attach to the specified options:
- Title
- Subtitle
- Highlight
- Error
- Header
- Subheader
- Text
- Fine Print
Preview Font Classes and Section Table
Preview the changes made in the previous section when you clicked Save.
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. This is an advanced feature, which should only be used by someone skilled in HTML. 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> </head>
- Shell Header (HTML to include above the main page <table>) – Displayed above the basic Header that you edit under Custom Header and Footer on the Primary Display page.
- Shell Footer (HTML to include below the main page <table>) – Displayed below the basic Footer that you edit under Custom Header and Footer on the Primary Display page.
In each one 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.
See below for how to add images to the custom shell.
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>
</body></html>
Adding images to a custom Certain shell
If you have uploaded any images on Display > Display >Assets, you can add them to any of the three sections of your custom display shell:
1. Click the place in that section where you want to place the field.
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 Display >Assets page.
Copying an existing HTML page into a custom Certain shell
Note: In the following instructions, <certaininc> isn’t a real tag. It just indicates where the form fields and content that are generated by the application will display.
1. Load the existing page in your browser.
2. Save the page as "complete Web page" on your local hard drive.
3. View the local copy of the page and decide where the form should go.
4. View the HTML source and find the text that needs to be replaced with the form — usually inside a <td> or <div> block.
5. Replace the text with <certaininc>Registration Form Goes Here</certaininc> and save the HTML.
6. View the Web page again to make sure you got it right.
7. Open the event in Certain and go to Plan > Configure > Display.
8. Upload all image files, JavaScript and style sheets via Display > Assets.
9. Copy the HTML above the <certaininc> tag into the Shell Header.
10. Copy the HTML below the </certaininc> tag into the Shell Footer.
11. Change the file paths of all images, css, and javascript files to that of the event's directory.
You can copy a path by following the instructions above: select the file in Available Files on this page, or right-click it on Display > Assets.
Note: In the following instructions, <certaininc> isn’t a real tag. It just indicates where the form fields and content that are generated by the application will display.
Was this article helpful? [Removed]
Related articles
- Signal Alerts - Common Errors and Recommendations
- Error when no Form in the Event is marked as Primary