HTML5 Skin Elements

This page shows the different elements of the new HTML5 skin.

Important!

There are some styles which you should NOT use in your project. These are styles which are specific to elements of the HTML5 output.

Do not use the following styles:

div#pagination
div.body-container
div.button-group-container-left
div.contentBody
div.feedback_survey
div.feedback-option
div.feedback-reason
div.logo-wrapper
div.MCBreadcrumbsBox_0
div.MCPopupContainer
div.nocontent
div.off-canvas-content.inner-wrap
div.Responsive_Footer
p.feedback-question

Div Classes

Note:

This is a note. It is a div class. You can include text, ordered lists, bulleted lists, and images in notes. You can nest notes within other elements such as ordered lists, bulleted lists, tables, and other divs.

DO NOT select the div classes from the Styles window. They will be formatted incorrectly. Follow the procedures below.

To create a note, follow the steps below:

Write your note.
Select the elements of your note.

You can include text, ordered lists, bulleted lists, and images in notes.
Click the Group button in the Paragraph section of the Home tab.
Select div.Note from the Create Group modal window.
Click OK.

Your note is inserted in your topic.

Important!

This is an important note. It is a div class. Use this note style sparingly—it should be used to convey important information or warnings. You can select this note style in the same way as you would a regular note, except select div.ImportantNote in step 4 of the procedures above.

This is our code sample div. Use this class to apply formatting to a group of pre class lines.

Tables

Column 1	Column 2
This is our alternating row table class. The class name is Border_table_alternate_colors . Note: This table has a 1000px width applied, but the width is not applied by default.

Column 1	Column 2
This is our single-color table class. The class name is Border_table. Note: This table has a 1000px width applied, but the width is not applied by default.

Image Classes

There are several image classes to use.

Class Name	Class Properties
img	No formatting
img.padding_only	15px margin on top and bottom
img.border_only	1px solid #6699cc border
img.padding_and_border	15px margin on top and bottom 1px solid #6699cc border
img.popup_with_padding_and_border	15px margin on top and bottom 1px solid #6699cc border image appears as a 552px wide thumbnail on-click, the image appears full-size in a modal window
img.popup_with_padding_only	15px margin on top and bottom image appears as a 552px wide thumbnail on-click, the image appears full-size in a modal window
img.popup_nopadding_withborder	1px solid #6699cc border image appears as a 552px wide thumbnail on-click, the image appears full-size in a modal window
img.resize80_noborder_nopadding	image resized by 80%, with a max-width of 552px
img.resize80_noborder_padding	15px margin on top and bottom image resized by 80%, with a max-width of 552px
img.resize80_border_nopadding	1px solid #6699cc border image resized by 80%, with a max-width of 552px
img.resize80_border_and_padding	15px margin on top and bottom 1px solid #6699cc border image resized by 80%, with a max-width of 552px
img.resize80_popup_padding_border	15px margin on top and bottom 1px solid #6699cc border image resized by 80%, with a max-width of 552px on-click, the image appears full-size in a modal window
img.hyperlink_with_padding_and_border	15px margin on top and bottom 1px solid #6699cc border image appears as a 552px wide thumbnail on-click, the image opens in a new page, at full size Note: This image class should be used sparingly, for images that are large and have a lot of detail.
img.imgBorderMax520	15px margin on top and bottom max-width of 520px Note: This is a old class which should no longer be used. I included it so as not to break instances of this class in older projects.

Text Classes

Class Name	Preview	Class Properties / Usage
p.Caption	Text	Properties: This class makes the font size 12px. Usage: Use this class for image or table captions.
p.bold .bold	Text	Properties: This class makes the font bold.
span.ui .ui	Text	Properties: This class makes the font bold. Usage: Use this class for UI elements referenced in text.
span.italics	Text	Properties: This class makes the font italicized. Usage: Use this class for references to other documents.
span.line span.line2 span.line3	N/A	Properties: These classes instruct the HTML to "keep together" certain elements, up to a certain point. They also have a margin-left of 20px. Usage: Do not modify this class. It is used in the responsive footer.
span.ordinal	Text	Properties: This class makes the text superscript and changes the font size to 9 pt. Usage: Use this class for ordinal text.
p.title_footer	Text	Properties: This class adds a 10px margin to the text.
p.PageFooter	Text	Properties: color: #007ac9; text-align: left; font-size: 13px; margin: 0px; padding: 0px; line-height: 20px;
p.indent_14	Text	Properties: This class indents the paragraph by 28pts.
p.indent_3em	Text	Properties: This class indents the paragraph by 3em (36 pts).
p.indent_28	Text	Properties: This class indents the paragraph by 42 pts.
pre	Text	Properties: This class changes the font, preserves white space, and does not allow word wrap. Usage: Use this class for code samples in addition to the code sample div.
b.OptionalFeatureOnly	N/A	Important! Do not use this class. This is a class specific to the 360Facility Flare project.
p.feedback-question	N/A	Important! Do not use this class. This is a class specific to the Feedback Survey.