Page tree

How helpful was this page? 

Your Rating:
Results:
1 Star2 Star3 Star4 Star5 Star
7 rates

Tell us what we can improve.

Related Blog Posts


Save as PDF

Customize Bulletins with HTML5

Last Updated: Aug 24, 2020 12:10

You can customize or quickly adjust some of the visual aspects of your bulletins using basic HTML5. However, the <font> tag is obsolete in HTML5; therefore, to modify font properties, refer to common cascading style sheets (CSS) classes instead. You can use the <span> tag to group individual inline-elements (described below) within a bulletin. The ability to embed HTML5 within bulletins means you can use <iframe> and embed Adobe Flash (“.swf”) files—although COMPanion doesn't recommend anyone doing so without the proper experience. Below are some examples of custom HTML5 that can be embedded in bulletins.


Please exercise caution. Improper HTML5 formatting has the potential to visually cripple your bulletins.

Description

Type

Results

Colored text<p style='color:red'>This text is red!</p>This text is red
Italic text<p><i>This text is emphasized!</i></p>
<p><em>This text is emphasized!</em></p>

This text is emphasized

Bold text<p><b>This text is bold!</b></p>
<p><strong>This text is bold!</strong></p>
This text is bold
Subscript and Superscript<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>

This is subscript and superscript

Overline<p style='text-decoration:overline'>Overline</p>

This text is overlined

Strikethrough<p style='text-decoration:line-through'>Strikethrough</p>

This text is striked

Underline<p style='text-decoration:underline'>Underline</p>

This text is underlined

Right-Align<p style='float:right'>This text is right-aligned!</p>This text is right-aligned
Highlight Text

<p style='background-color:yellow'>This text is highlighted.</p>


External Link<a href='This'>http://www.google.com'>This is an external link!</a>

This is an external link!

Email To<a href='mailto:address@Contact'>email.com?subject=Hello%20World'>Contact Us</a>Contact us
External Image

<img src="http://www.website.com/images/example.gif" alt="Example" width="200" height="95">

When linking to external images, it is very important that you specify (and don't go beyond) the maximum image width of 200px unless you want to visually cripple your bulletin boards.

Example