Tip Boxes

Install
Critter 4 installations 4 likes

Creates textboxes that float to the right of the screen and wrap text around them.  They also play nicely on mobile devices so that the text doesn't get scrunched.

To use them in an Entry or Entity Note, go into "code view" and do <div class="tipbox-small"> your text here </div> or similarly for tipbox-large. 

You can change the color of the border by adding the following to your CSS:
.tipbox-small, .tipbox-large {border-color: lime;}

Or through the editor like this:
<div class="tipbox-small" style="border-color:lime;"> your text here </div>

Enjoy! 

Latest version 1.0

Released 4 years ago on 28th Mar, 2021

First version. 

CSS rules

.tipbox-small { 
   float: right; margin: 10px; 
   width: 400px; padding:10px; 
   border-style: solid; border-width: 1px;
   text-align: justify; 
}
.tipbox-large { 
   float: right; margin: 10px; 
   width: 50%; padding:10px; 
   border-style: solid; border-width: 1px;
   text-align: justify; 
}
@media only screen and (max-width: 900px) {   .tipbox-small, .tipbox-large {  float: none;  width: 90%;  }   }
 Install

User comments & reviews