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?
Late to the conversation but I found this when looking for a solution to my problem. This was really helpful. This is how I have modified it to create a help box with:
- Rounded outline border
- An image on the left, and
- A list of resources on the right.
<div style="float: left; padding: 10px 10px 10px 10px; margin: 5px 0px 0px 10px; width: 80%; border-radius: 25px; border: 4px solid #0078a9; display: inline-block; color: #363613;">
<table style="border: none;">
<tbody>
<tr style="border: none;">
<td style="width: 13.469%; border: none;"><img style="font-family: verdana, sans-serif; font-size: 13.3333px;" src="sys_attachment.do?sys_id=2d802720db38a1d050283fd3e296197f" alt="littlecloud.jpg" width="119" height="119" /></td>
<td style="width: 87.8921%; border: none;">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
Looks like this
