Tip Boxes en

Installations 2 Likes 4

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 View content

Released 3 years ago

First version.

Plugin CSS for 1.0


.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%;  }   }