
- 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,025 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-05-2021 05:35 AM
On our team, we use the following code to add buttons to our articles that direct to different pages.
<a href="Link"><button style="background-color: #005eb8; color: white; font-size: 10pt; height: 50px; width: 150px;">Button Title</button></a>
This is to fit our style guide but this is the basic code that we use for it.
The collapsible table is a great!

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2021 08:38 AM
Thanks - this is great! I set one up to match our style guide and created some variations:
Rounded corners:
<p><span style="font-family: verdana, geneva; font-size: 14pt;"><a href="Link"><button style="background-color: #003da5; color: white; height: 50px; width: 150px; border-radius: 15px;"><span style="font-size: 14pt;">BUTTON</span></button></a></span></p>
Square with a drop shadow:
<p><span style="font-family: verdana, geneva; font-size: 14pt;"><a href="Link"><button style="background-color: #003da5; color: white; height: 50px; width: 150px; box-shadow: 3px 3px 4px black;"><span style="font-size: 14pt;">BUTTON</span></button></a></span></p>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2021 08:17 AM
This is such a great idea, thanks for sharing! We also use expand/collapse. Others we use are:
Horizontal rules to distinguish H2 sections by inserting the <hr> code after an H2.
We also use a custom html table instead of the table in the text editor, that follows a specific css.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-09-2021 01:47 PM
Thank you for sharing! The collapsible sub-header has been extremely useful.
We created a TOC that indents after Heading 1 and allows people to go back to the top of the article. Quebec already includes one, but it doesn't allow people to go back to the top of the article:
<p><a name="top"></a><span style="font-size: 14pt;"><strong>Table of Contents</strong></span></p>
<ul style="list-style-position: inside;">
<li class="toc_1" style="color: #262626; font-size: 12pt;"><span style="font-size: 12pt;"><a href="#_Toc73609742" rel="nofollow">TOC Template Heading 1</a></span><br />
<ul style="list-style-position: inside;">
<li class="toc_1" style="color: #262626; font-size: 12pt;"><span style="font-size: 12pt;"><a href="#_Toc73609743" rel="nofollow">TOC Template Heading 2</a></span><br />
<ul style="list-style-position: inside;">
<li class="toc_1" style="color: #262626; font-size: 12pt;"><span style="font-size: 12pt;"><a href="#_Toc73609744" rel="nofollow">TOC Template Heading 3</a></span><br /></li>
</ul>
</li>
</ul>
</li>
</ul>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<h1 style="color: #262626; ;margin-top: 2.0pt;"><a name="_Toc73609742"></a>TOC Template Heading 1</h1>
<p><span style="font-size: 10pt;"><a href="#top" rel="nofollow">Back to top of page</a></span></p>
<h2 style="color: #262626; ;margin-top: 2.0pt;"><a name="_Toc73609743"></a>TOC Template Heading 2</h2>
<p><span style="font-size: 10pt;"><a href="#top" rel="nofollow">Back to top of page</a></span></p>
<h3 style="color: #262626; ;margin-top: 2.0pt;"><a name="_Toc73609744"></a><span style="font-family: Open Sans,Arial; color: #auto;">TOC Template Heading 3</span></h3>
<p><span style="font-size: 10pt;"><a href="#top" rel="nofollow">Back to top of page</a></span></p>