Floating Box

Highlight important information, links, and/or resources in a floating box.

 

Resources

Resource #1

Resource #2

Resource #3

Example 

See the floating box to the right.

 

Anatomy of Code Snippet

_div style=_background-color_ #ebedee; padding_ 20px 20px 20px 20px; overflow_ hidden;__Your Text Here__div_ (19).png    

 

How to Add a Floating Box

1. Copy the code snippet:

<div class="img-rounded" style="float: right; background-color: #ffffff; width: 315px; height: 260px; border: 1px solid black; margin: 10px;">

<h3 style="color: #000000; background-color: #7eb8df; text-align: center; margin: 0px; padding: 0px;">Heading</h3>

<div id="cc-homepage-announcements" style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;">

<p>First line of text.</p>

<p>Second line of text.</p>

</div>

</div>

 

2. Navigate to a content page, click Edit, and select the HTML Editor.

3. Paste the copied snippet & edit the header and body text.

 

Tip: You can customize text and background colors; link to other pages/sites within the box; and even customize the size to which to box floats, the thickness of the border; and the size of the box.