Support Center







Articles in this section

See more

Extended Display

  • Updated
Follow

Extended Display

(event) > Plan > Configure > Display > Extended Display

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.

(See  Configure Display Primary Display" style="display: inline; font-family: Lato, Verdana, Arial, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, sans-serif; font-size: 10pt; color: rgb(22, 7, 255); text-decoration: underline;"Primary Display for other display configuration options, such as the basic header and footer. Those  are suitable for non-technical users.)

Forms and websites both use the same custom display shell. This ensures 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

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  Configure Display Assets" style="display: inline; font-family: Lato, Verdana, Arial, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, sans-serif; font-size: 10pt; color: rgb(22, 7, 255); text-decoration: underline;"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, and 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:

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 imagesto 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 -->

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 >  Configure Display Assets" style="display: inline; font-family: Lato, Verdana, Arial, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, sans-serif; font-size: 10pt; color: rgb(22, 7, 255); text-decoration: underline;"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  Configure Display Assets" style="display: inline; font-family: Lato, Verdana, Arial, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, sans-serif; font-size: 10pt; color: rgb(22, 7, 255); text-decoration: underline;"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> </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  Configure Display Assets" style="display: inline; font-family: Lato, Verdana, Arial, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, sans-serif; font-size: 10pt; color: rgb(22, 7, 255); text-decoration: underline;"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  Configure Display Assets" style="display: inline; font-family: Lato, Verdana, Arial, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, Verdana, sans-serif; font-size: 10pt; color: rgb(22, 7, 255); text-decoration: underline;"Display > Assets.

Comments

0 comments

Please sign in to leave a comment.