Standard pre-defined content

Custom content

Standard pre-defined content

*Standard content layout can be customized by changing the product CSS file. You can download the standard CSS file, update an upload your customized file in product setup.

Headers

There are three types of pre-defined headers. H1, H2 and H3. H1 and H2 are showed in the section content. All three header levels are displayed in the topic content.

Paragraphs

As can be seen here as well, one or multiple paragraphs can be added at once. Try to insert only the paragraphs that are referring to a specific subject so you can later administrate the contributions from your users with ease. For each content section you insert HelpBus.online will create a automatically a dedicated section where users can submit their contributions (questions and features requests). Do not include headers in your paragraph type content.

Important note

Same rules from paragraphs applies to Notes but they are highlighted in a different color as in the Lorem ipsum example below.

At adhuc iisque usu, esse quot quaerendum sed at. Sed assueverit voluptatibus ea. Odio purto has et, quo ei sale repudiare, ne fugit mazim mea. Vis et aperiam noluisse, qui ex mazim ancillae cotidieque. No ipsum vivendo recteque eum. Vim et fugit doming intellegat. Vix an deleniti theophrastus. Mel ei inani moderatius accommodare. Rebum porro aliquid ex nec. No iracundia constituam vix, purto ferri volutpat eos id. Vim at dicit animal nominavi, nonumy omittam conceptam cum in.

Example

Same rules from paragraphs applies to Examples but they are highlighted in a different color as in the Lorem ipsum example below.

At adhuc iisque usu, esse quot quaerendum sed at. Sed assueverit voluptatibus ea. Odio purto has et, quo ei sale repudiare, ne fugit mazim mea. Vis et aperiam noluisse, qui ex mazim ancillae cotidieque. No ipsum vivendo recteque eum. Vim et fugit doming intellegat. Vix an deleniti theophrastus. Mel ei inani moderatius accommodare. Rebum porro aliquid ex nec. No iracundia constituam vix, purto ferri volutpat eos id. Vim at dicit animal nominavi, nonumy omittam conceptam cum in.

Code

Code has particular rules so can be properly displayed as in the Code ipsum example that follows.

function dropRight(array, n=1) { const length = array == null ? 0 : array.length n = length - toInteger(n) return length ? slice(array, 0, n < 0 ? 0 : n) : [] } function castArray(...args) { if (!args.length) { return [] } const value = args[0] return Array.isArray(value) ? value : [value] }

Images and Documents

Images and Documents are to be uploaded one by one. Avoid animated images (like GIFs) since they can not be displayed properly in the print versions of your user guide. Use MP4 Video files instead.

Update/Errata

After publishing the documentation small updates/errata can be required. Updates are highlighted with a specific layout and are also published in the Updates section of the product so users track them with ease. Next Lorem ipsum is an example of such update resource. Check it out in the Update section as well.

Ea vim odio fastidii. Nominati dignissim ut sit, id homero ridens apeirian eam. Modus feugiat dissentias vix at. Ne eleifend consectetuer duo, torquatos abhorreant mea ea. Mea nostrud evertitur eu. Duis adolescens ullamcorper in ius, id mei vero offendit. Ad solet nonumy prompta eam, ius te quas dolore diceret, te commodo nominati nam. Ad est aliquando voluptaria, ea viris doming vim. Ut duo atomorum sapientem accommodare. Est dolorem accumsan appetere in, ei soleat meliore nec, denique corpora luptatum ei per. Per cu tation feugiat, odio perpetua vituperatoribus vim ea. Explicari voluptatum pro in. Ea tale dictas mel, tollit deserunt consulatu an pri. Ea harum utinam quaeque quo, no elit falli sit, ex pri vidit saepe aperiri. Vim cu mutat primis, vim quodsi torquatos reformidans ei. Qui nullam invidunt cu, cu nam delicata corrumpit, essent epicuri placerat sea ei.

MP4 Video files

MP4 Video files can be uploaded. They are set to cover 90% o the paragraph width. There is no limit for the height. They will start when user hit play button. ”Poster” attribute is not used. When page is printed the video controls will not be showed and the first image will be displayed. You can create MP4 videos in PowerPoint. Consider your first slide as a poster. It will be displayed as an usual image when the page is printed. Here is an MP4 video file example:

Custom content

Text formatting

All HTML text formatting can be considered: Use <b>Bold text</b> for normal text followed by Bold text Use <i>Italic text</i> for normal text followed by Italic text Use <u>Underlined text</u> for normal text followed by Underlined text Use <mark>Marked text</mark> for normal text followed by Marked text Use <del>Deleted text<<del> for normal text followed by Deleted text Use _{Subscript text} for normal text followed by _{Subscript text} Use ^{Superscript text} for normal text followed by ^{Superscript text} Also combinations are possible: Use <b><u>Formatted text</u></b> to obtain Formatted text

Link and Bookmark

To create a link to an external page use the <a> HTML tag like in the following example: <a href="https://www.helpbus.online" target="_blank">HelBbus.online</a> will generate the following link HelBbus.online. Use target="_blank" to open the link in a new browser tab. To create a bookmark in the current page use the <a> HTML tag and paste in the href the URL of the resource you would like to bookmark. Copy the URL of the resource from the page view, as in the following example: <a href="https://www.helpbus.online/page_20240705.php?product_id=10&topic_id=11#320">Table</a> will generate the following link that will help you to navigate directly to Table section in the current page Table. Bookmarks works as well to external pages, however we recommend to use target="_blank" so the external page opens in a new browser tab.

List

Add list in your paragraph content by using <ol> or <ul> HTML tags like in the following examples. ⚠ As best practice insert in the paragraph only the list without extra text after. Use <ol> for ordered HTML list: <ol> <li>Te sint invidunt cum, in ornatus</li> <li>Graeci invidunt appellantur eu mel,</li> <li>Eos ex habeo feugiat consequat<<li> </ol> Will generate the following numbered list:

1. Te sint invidunt cum, in ornatus
2. Graeci invidunt appellantur eu mel,
3. Eos ex habeo feugiat consequat

Use <ol type="1"> if your would like a custom item marker in the ordered HTML list. The marker can be numerical or alphabetical. By default is the marker is numerical type 1, 2, 3 ... but the following options are available:

• type="1" - The marker will be numerical 1, 2, 3 ... (default);
• type="A" - The marker will be alphabetical with uppercase letters A, B, C ...;
• type="a" - The marker will be alphabetical with lowercase letters a, b, c ...;
• type="I" - The marker will be numerical with uppercase roman numbers I, II, III ...;
• type="i" - The marker will be numerical with lowercase roman numbers i, ii, iii ....

Use <ul> to generate a bullet list (unordered HTML list): <ul> <li>Te sint invidunt cum, in ornatus</li> <li>Graeci invidunt appellantur eu mel,</li> <li>Eos ex habeo feugiat consequat</li> </ul>

• Te sint invidunt cum, in ornatus
• Graeci invidunt appellantur eu mel,
• Eos ex habeo feugiat consequat

Use <ul style="list-style-type:disc;"> if your would like a custom item marker. By defaul is the bullet but the following options are available:

• disc - Sets the marker to bullet (default);
• circle - Sets the marker to circle;
• square - Sets the marker to square;
• none - No marker will be used.

Table

Following HTML tags might be useful:

• <table> - Defines a table
• <th> - Defines a header cell in a table
• <tr> - Defines a row in a table
• <td> - Defines a cell in a table
• <caption> - Defines a table caption
• <colgroup> - Specifies a group of one or more columns in a table for formatting
• <col> - Specifies column properties for each column within a <colgroup> element
• <thead> - Groups the header content in a table
• <tbody> - Groups the body content in a table
• <tfoot> - Groups the footer content in a table

More details on how to build a table on W3C.org. Also good resources on designing HTML tables can be found at w3schools.com

⚠ As best practice insert in the paragraph only the list without extra text after. To generate a table use the following code: <TABLE border="1" align="center" summary="Code page support in different versions of MS Windows."> <CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS <COLGROUP align="center"> <COLGROUP align="left"> <COLGROUP align="center" span="2"> <COLGROUP align="center" span="3"> <THEAD valign="top"> <TR> <TH>Code-Page<BR>ID <TH>Name <TH>ACP <TH>OEMCP <TH>Windows<BR>NT 3.1 <TH>Windows<BR>NT 3.51 <TH>Windows<BR>95 <TBODY> <TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>* <TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X <TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X <TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X <TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X <TBODY> <TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X <TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X <TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X <TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X <TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X </TABLE> The above code will display:

Colors

Color your content using HTML Color names. HTML Color names are assigned by the W3C (World Wide Web Consortium) to be used instead of their corresponding hexadecimal code in HTML (hypertext markup language) or CSS (Cascading Style Sheets) files. These names standard and thus for they are supported by all modern web browsers. It's easier to remember color names than color HEX codes. To color text use <span> like in the next example: <span style="color:Tomato;">Hello World !</span> will return Hello World ! To color background use:
style="background-color: HTML color name; " ... Like in the next example: <table align="center" width="300px" border="1"> <tr> <th style="background-color: darkslategrey; color: white; ">Header cell 1<<th> <th style="background-color: darkslategrey; color: white; ">Header cell 2<<th> </tr> <tr> <td>Lorem ipsum<<td> <td>sin dolor</td> </tr> </table> The code above will generate the following table:

There are 138 HTML Color names supported by current browsers. All of them have been listed on HelpBus.online for you to use and see how they are displayed. Use them in content or to customize your CSS file. See HTML Color names references in the HelpBus.online tools section HTML Color names.

Symbols

Here is a list with the most common symbols:

More Unicode characters Box Drawing, Elements and Shapes on w3.org Miscellaneous Symbols on w3.org Dingbats on w3.org Miscellaneous Symbols and Arrows on w3.org
It is easy to combine color and Unicode characters To display ▲ use <font color="red">&#9650;</font> To display ▼ use <font color="green">&#9660;</font>
Please also consult the subsection in the current manual titled: "Topic content - Miscellaneous Unicode characters (Emoji)".
As an alternative to symbols you can use Icons you can use Font Awesome To display use <i class="fa-solid fa-house"></i>