
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-04-2021 04:13 PM
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):
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:
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?
Solved! Go to Solution.
- Labels:
-
Knowledge Management
- 3,028 Views
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2021 11:45 PM
This article describes how to use TOC in TinyMCE.
https://community.servicenow.com/community?id=community_blog&sys_id=ae29fcab1be6ec1038739979b04bcbb1...

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2021 02:12 PM
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2021 11:45 PM
This article describes how to use TOC in TinyMCE.
https://community.servicenow.com/community?id=community_blog&sys_id=ae29fcab1be6ec1038739979b04bcbb1...

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-10-2021 08:25 AM
THANK YOU!! I searched everywhere and couldn't find any info on this. I truly appreciate it!

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-10-2021 04:02 AM
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-23-2021 12:14 PM
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