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.
|
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:
<div style='font-size:24px; color:#C30; background:#FF3;'>
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>
<div class='custom_container'>
<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:
<head>
<style>
custom_container h1 {font-size:24px; color:#C30; background:#FF3;}
custom_container p {color:#666;}
</style>
</head>
<body>
<div class='custom_container'>
<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>