Introduction
“Display” determines the look and feel of your event forms, websites, and emails.
Take advantage of these Extended Display options if you are well-versed in HTML, CSS, and JavaScript.
The Primary Display provides other display configuration options, such as the basic header and footer. The basic header and footer options are suitable for non-technical users.
Forms and websites both use the same custom display shell. Forms and websites use the shared shell to ensure a consistent look and feel for the attendee’s view of the event.
Any HTML-formatted emails you send to attendees can also be set to use the custom display shell.
Page Details
This section lists Extended Display page settings.
Jump down to:
- Images and Attributes
- HTML Body and Table Attributes
- Font Attributes or Classes
- 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 image as the Main Image
- one image as the First Page Image
Define any Attributes for each of those two images.
HTML Body and Table Attributes
Define any ids and class es 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 feature is advanced, and it should only be used by someone skilled in HTML.
The display shell is declared as HTML5. The HTML5 declaration allows 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>
- You can use, edit, or replace the default text provided.
- 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.
You can add data fields by clicking the place in that section where you want to place the field. You can select the field in the Data Fields drop-down list and click the relevant button: <HEAD></HEAD>, Shell Header, or Shell Footer.
See below for how to add images to the custom shell.
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 --> HTML to include below the main page <table> <!-- 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. The Relative Path is displayed when you select the file. 5. 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.
<certaininc> indicates where the form fields and content generated by the application 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. The text is usually inside a <td> </td> or <div> </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. You can select the file in Available Files on this page, or right-click it on Display > Assets.