🎬 Adding Colorful Boxes to Canvas Pages

HTML Code

Full Size Box

<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #fff7b8; border: thin solid #ccc;">
<p style="text-align: center;"><span style="font-size: 12pt;"><strong>Start Here:</strong></span></p>
<p style="text-align: center;">This is an important notice you need to pay attention to&hellip;</p>
</div>

Float-Right Box

<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #e3fffe; border: thin solid #ccc; width: 30%; float: right; margin: 0px 0px 0px 5px;">
<p style="text-align: center;"><strong>Noteworthy:<br /></strong></p>
<p style="text-align: center;">These boxes can call attention to important points!</p>
</div>

Float-Left Box

<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #e9ffe8; border: thin solid #ccc; width: 30%; float: left; margin: 0px 10px 0px 0px;">
<p style="text-align: center;"><strong>Noteworthy:<br /></strong></p>
<p style="text-align: center;">These boxes can call attention to important points!</p>
</div>

Want to read the captions transcript?

colorful-boxes.txt