What HTML features have you been able to successfully implement in your knowledge articles?

Kim Tillano
Tera Expert

I've been looking for ways to make our content a little fancier.  I thought it may be helpful for us to share the HTML features we use.  I have 2 that I will share:

Colored "note bubbles" that we use for NOTE, IMPORTANT, WARNING, etc (we have each type as a different color):

find_real_file.png

HTML:

<div style="padding: 0px; margin: 1em 10px; border: 2px solid #5C5C5C; border-radius: 15px; background-color: #ffc;">
<div style="font-weight: bold; font-variant: small-caps; padding: 2px 1em; margin: -2px 0px 0px -10px; width: auto; border-radius: 25px; border: 2px solid #5C5C5C; display: inline-block; background-color: #ebd691; color: #363613;"><span style="font-size: 10pt;">Note:</span></div>
<div style="padding: 5px 1em; margin: 0px; color: #363613;"><span style="font-size: 14pt; font-family: verdana, geneva;">[NOTE TEXT HERE]</span></div>
</div>

Expand/collapse sections (accordion) for a cleaner look (can default to expanded or collapsed):

Sub-Header 1 defaults to expanded, Sub-Header 2 defaults to collapsed - differences are noted in the HTML.  I added the plus in the text to make it more intuitive:

find_real_file.png

HTML:  Use <details open="">  for expanded or <details> for collapsed

<details>
<summary style="padding: 2px 6px; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; margin: 20px;"><span style="font-family: verdana, geneva; font-size: 14pt;"><strong><span style="color: #2f5597;"><span style="color: #003da5;">+Collapsible Sub-Header 1</span></span></strong></span></summary>
<p style="margin: 0in 0in 8pt 22.5pt; font-size: 14pt; font-family: verdana, geneva;"><span style="font-family: verdana, geneva; font-size: 14pt;">Collapse text here<br /></span><span style="font-family: verdana, geneva; font-size: 14pt;">Collapse text here<br /></span><span style="font-family: verdana, geneva; font-size: 14pt;">Collapse text here<br /></span><span style="font-family: verdana, geneva; font-size: 14pt;">Collapse text here<br /></span><span style="font-family: verdana, geneva; font-size: 14pt;">End of collapse section</span></p>
</details>

 

I know I have struggled with some of these.  For example, the TOC button is greyed out and I can't find any info on it, so I use workarounds for various things.  What cool HTML tricks can you share?

 

1 ACCEPTED SOLUTION
13 REPLIES 13

Thanks for sharing!  I used to have a great TOC built but changed companies and didn't take it with me.  This is great.  I tried to use the one built into Quebec, but the button is grayed out so I can't figure out how to use it.

THANK YOU!!  I searched everywhere and couldn't find any info on this.  I truly appreciate it!

Rachel38
Tera Expert

This thread is very helpful. I have subscribed in case there are any more formatting tips! Our knowledge articles are quite basic in comparison. We do use table of contents for lengthier articles; Quebec has made this easier but the default formatting doesn't quite comply with our style guide. 

Gregg Grose
Kilo Guru

Great thread, here are some more obscure HTML tags that work in our instance of KN, no further styling required but they certainly could be further styled.

  • <abbr> = Abbreviation. Requires title attribute, creates underline, changes cursor and title attribute creates hover-over text.
  • <bdo> = Bidirectional Override. Requires dir attribute and with "rtl", can reverse direction of text. Unsure why you'd use this but it functions.
  • <kbd> = Keyboard Input. Can mark a keyboard key (or combinations) like Win + V.
  • <samp> = Sample Output. Replaces default font-family with whatever monospace font-family is available from one's browser.
  • <code> = Inline Code. Highlights wrapped text in a gray background, reddish font color.

 

Code:

abbr = <abbr title="HyperText Markup Language">HTML</abbr>

bdo = <bdo dir="rtl">Bidirectional Override</bdo>

kbd = Keyboard <kbd>Input</kbd>

samp = <samp>Sample Output</samp>

code = <code>Inline Code</code>

 

Coded:

<abbr> = HTML

<bdo> = Bidirectional Override

<kbd> = Keyboard Input

<samp> = Sample Output

<code> = Inline Code