How do I create a custom view?

Modified on Wed, 08 Feb 2023 at 04:08 PM

Overview

Custom Views (CV) are HTML files that are stored within the app and provide offline access to additional conference content such as general information, emergency contacts, bus schedules, etc.

There are special HTML tags required to create the best viewing experience within the app. Ensure to follow the steps in the blog entry.

Attention
The following are not supported:

links to resources, stylesheets, plugins
scripts
jQuery mobile
Images are not cached - you need WiFi to see images unless you convert them to base64 (only for very small images)

Max File Size

100kb

Using Styles (CSS) Correctly for Custom Views

When styling any content, you must either use

pure inline styles where the style is just applied to the individual tag or
classes that are very specific to this custom view and will not interfere with our existing Web App classes.

Inline Styles

To style an item, you can use the span tag (inline styling of a few words within a sentence) or div with inline styling or applying a style to a standard tag:

Red Title with Yellow Background

</div>

<p style='color:#666'>Text paragraph here with gray font.</p>

<p>The <span style='font-weight:bold'>Lost and Found</span> office is located on the second floor.</p>

Header Style with Specific Classes

Wrap all content inside a div and give it the class name custom_container

<html>

<body>

<p>all the actual HTML content goes in here inside the container. For example: </p>

<h1>Title</h1>

<p>This is the paragraph text.</p>

</div>

</body>

</html>

Using the styles tag in the header, control the design of your container class:

<html>

<head>

<style>

custom_container h1 {font-size:24px; color:#C30; background:#FF3;}

custom_container p {color:#666;}

</style>

</head>

<body>

<p>all the actual HTML content goes in here inside the container. For example: </p>

<h1>Title</h1>

<p>This is the paragraph text.</p>

</div>

</body>

</html>

Adding Web Links

You can include links in a custom view. Include rel='external' attribute:

<a href='http://weather.com' rel='external'>Check the weather</a>

Easy HTML Editor

You can use http://htmleditor.in/firefox-html-editor.html to easily create the basic and formatted HTML content. This blog entry gets you up to speed in creating basic HTML content with the correct tags. Ensure to follow at least the first 5 steps.

Validate Your HTML

Before copying HTML code into the Conference App Builder, ensure to validate your content to avoid unexpected surprises later:

https://validator.w3.org/