Website Display

Custom Display Shell

The Display Shell uses the HTML Editor to create a custom look-and-feel.
The Display Shell is the standard admin-side Editor.
The Display Shell includes three "special" DDFs (Dynamic Data Fields).
The three "special" DDFs are Navigation Row, Profile Info, and Page Content.
Navigation Row is optional, but recommended for any Website with more than one tab.
The Website replaces the <(Navigation Row)> text with a row containing labels and hyperlinks to all visible web pages in the order listed on the Websites: Setup tab.
The display style of the navigation row is defined in the standard CSS inline style section.
Profile Info is optional, not applicable for Websites that don't require User Authentication.
The Website replaces the <(Profile Info)> text with the First Name and Last Name of the Profile who is currently logged into the site.
Page Content is required.
The Website replaces the <(Page Content)> text with the custom content as defined on subsequent tabs within the Websites area.
All HTML before <(Page Content)> will become the shell's header.
All HTML after <(Page Content)> will become the shell's footer.
Custom HTML Attributes are used to insert text into the Website's tag.
This is useful for custom javascript, meta tags, etc.
This requires advanced knowledge of HTML.
Custom Inline Style Attributes define standard and custom styles used within the Website.

Special CSS Classes

The general CSS styles apply to HTML elements such as body, a, table, and p.
The display shell defines several "special classes" with specific significance.
The following "special classes" exist: a.nav, a.selectedNav, title, subtitle, header, highlight, subheader, error, text, fine, table.nav, table.nav td.selected, table.page, table.section, table.form, table.data, table.data th.c1, table.data th.c2, table.data th.c3, table.data th.c4, table.data tr.dataRow, table.data tr.dataRowSelected.
a.nav styles navigation row hyperlinks.
a.selectedNav styles the currently selected page's hyperlink in the navigation row.
title styles page titles.
subtitle styles page subtitles.
header styles section headers on a page.
The header style is typically light text shown against a dark background.
highlight styles highlighted text.
subheader styles text below section headers.
error styles error messages.
text styles regular text.
fine styles fine print text.
table.nav styles the navigation row table.
table.nav td.selected styles the cell of the currently selected page within the navigation row table.
table.page styles the page's main table (of the display shell).
table.section styles each section's table within a page.
table.form styles tables that contain forms within a page.
table.data styles tables that generate dynamic data, e.g. the Events List.
table.data th.c1 styles the header of column 1 in a dynamic table.
table.data th.c2 styles the header of column 2 in a dynamic table.
table.data th.c3 styles the header of column 3 in a dynamic table.
table.data th.c4 styles the header of column 4 in a dynamic table.
table.data tr.dataRow styles data rows in a dynamic table.
table.data tr.dataRowSelected styles the data row being hovered over in a dynamic table.
The use of CSS styles and the above special classes allows wide flexibility over the look and feel of the Website display shell.

Was this article helpful?

0 out of 0 found this helpful

Session SCHEDULER (in Speaker and Session Management)
Import Room Reservations
Extended Display
Site Setup (Event Website)
Event Websites

Comments

0 comments
Please sign in to leave a comment.