Website Display

Access via:  EVENTS > Websites > Add/Edit website > Display

Custom Display Shell

The Display Shell uses the HTML Editor to create a custom look-and-feel. This is the standard admin-side Editor, with three "special" DDFs (Dynamic Data Fields):

• Navigation Row – (Optional, but recommended for any Website with more than one tab.) The Website will replace 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 – (Optional, not applicable for Web Sites that don't require User Authentication.) The Website will replace the <(Profile Info)> text with the First Name and Last Name of the Profile who is currently logged into the site.

• Page Content – (Required) The Website will replace the <(Page Content)> text with the custom content as defined on subsequent tabs within the Websites area. i.e., all HTML before <(Page Content)> will become the shell's header, and all HTML after <(Page Content)> will become the shell's footer.

Custom HTML Attributes

Text entered here will be inserted into the Website's tag. This is useful for custom javascript, meta tags, etc. This requires advanced knowledge of HTML.

Custom Inline Style Attributes

This CSS is used to define standard and custom styles used within the Website.

In addition to the general CSS styles for HTML elements such as body, a, table, p, etc., the display shell has a few "special classes" with specific significance:

• a.nav - Style of navigation row hyperlinks

• a.selectedNav - Style of the currently selected page's hyperlink in the navigation row

• title - Style of page titles

• subtitle - Style of page subtitles

• header - Style of section headers on a page (typically, this is light text shown against a dark background)

• highlight - Style of highlighted text

• subheader - Style of text below section headers

• error - Style of error messages

• text - Style of regular text (this can also be defined in the body style)

• fine  - Style of fine print text

• table.nav - Style of the navigation row table

• table.nav td.selected - Style of the cell of the currently selected page within the navigation row table

• table.page - Style of the page's main table (of the display shell)

• table.section - Style of each section's table within a page

• table.form - Style of tables that contain forms within a page

• table.data - Style of tables that generate dynamic data, e.g. the Events List

• table.data th.c1 - Style of column 1 header in a dynamic table  

• table.data th.c2 - Style of column 2 header in a dynamic table

• table.data th.c3 - Style of column 3 header in a dynamic table

• table.data th.c4 - Style of column 4 header in a dynamic table

• table.data tr.dataRow - Style of data rows in a dynamic table

• table.data tr.dataRowSelected - Style of the data row being hovered over in a dynamic table

The use of CSS styles and the above special classes allow wide flexibility over the look and feel of the Website display shell.