Styles, Lists and Headers
OmniUpdate provides multiple formatting options to organize content. Many of these options are available within the WYSIWYG editor, while others require HTML code.
Bullets and Lists
Simple bulleted and numbered lists can be added using the WYSIWYG editor, however our site allows for the use of additional list types by using HTML. Below are some examples of these list types as well as the HTML code needed to insert them.
Fancy Bullets
HTML - UL.fancy
- This is a test bullet.
- This is a test bullet.
- This is a test bullet.
- Sub item
- Sub item
- This is a test bullet.
Fancy Numbers
HTML - OL.fancy-numbers
- First number example.
- Second number example.
- Third number example
- Sub item
- Sub item
- Final number example.
Pretty List
HTML - UL.pretty-list
- First bullet item.
- Second bullet item.
- Third bullet item.
- Final bullet item.
Pretty List - Light
HTML - UL.pretty-list.light
- First bullet in the list.
- Second bullet in the list.
- Third bullet in this list.
- Final bullet on the list.
Pretty List - Alt
HTML - UL.pretty-list.alt
- First item in the list.
- Second item in the list.
- Third item in the list.
- Final item in the list.
Headers
Header Guidelines
- Heading 1 should not be used in the content of any page since it is already used in the template.
- Every page should start with a Heading 2.
- Do not include an extra space above or below the heading.
- Do not underline the heading.
- Write headings in title case, not all caps.
- Heading order should follow an outline.
- Good: H2, H3, H4, H2
- Bad: H2, H4, H3, H2
- Use headings to mark logical sections of page content. Do not use headings to apply a look or style to text.
- Headings should always be text, not images.
- Do not use colons ":" after headings.
- Headings should always be left aligned.
Styles
Styles can be used to align, justify and bring attention to text, images and pages. Styles can be applied using the styles dropdown menu or HTLML code.
| Text Right Align | .txt-right |
| Text Left Align | .txt-left |
| Text Center | .txt-center |
| Text Justify | .txt-justify |
| Small Text | .txt-small |
| Large Text | .txt-large |
| Uppercase Text | .uppercase |
| Capitalize Text | .capitalize |
| Small Caps | .small-caps |
| Highlight | .highlight |
| Note | .note |
| Remove Bullets | .no-bullets |
| Image with Caption | .img-caption |
| Image caption left | .left |
| Image caption right | .right |
| Image on Left | .img-left |
| Image on Right | .img-right |
| Full-Name | .fn |
| Telephone Number | .tel |
| Border - Left | .brdr-left |
| Border - Right | .brdr-right |
| Border - Top | .brdr-top |
| Border - bottom | .brdr-bottom |
| Border - Box | .brdr |
| Gray Background | .bg-gray |
| Light Green Background | .bg-green |
| Dark Green Background | .bg-green-dark |
| Orange Background | .bg-orange |
| Cream Background | .bg-cream |
| Black Background | .bg-black |
| Button - Standard | .button |
| Button - Live Chat | .live-chat |
| Position Left | .flt-left |
| Position Right | .flt-right |
| Position Center | .center |
| Success | .msg-success |
| Error | .msg-error |
| Notice | .msg-notice |
| Warning | .msg-warning |
| Success | .success |
| Error | .error |
| More-Info | .info |
| Warning | .warning |
| Alert | .alert |
| Jump Menu | .jump-menu |
Examples of Bullets, Lists, and Styles
Bullets, lists and styles can be applied in a variety of ways to add interest to your page. below are examples of these elements in use on live pages.
Fancy Bullets
Fancy Numbers
Gray Background
Notice
