Figure Box and Floats en

Installations 29 Likes 11

Adds a figure box and float classes. The design is very human.

Introduces 3 classes: figure, l, r, and clear.

figure is the base class. Usable on a div to create the box.
l & r are usable on anything not just the figure, it will float your element to the left or right respectively with a small margin.
clear will remove the float so the next object is displayed on a new line rather than beside the previous element. I added it as its own class because this is a preference.

To make a figure box that floats to the left of the page you can use the following (replacing square with angle brackets, of course):

[div class="figure l clear"][img alt="link here" src="link%20here"][br]words[/div]

To add any text just force a line break and write away, it's pre-formatted to be italicized and centered in the box.

Latest version 1.2 View content

Released 2 years ago

Removed a depreciated bit of code so it can get along better with tooltips

Plugin CSS for 1.2


/*Adds functionality to Salvatos' userscript plugin*/
:root {
	--summernote-insert-figure-box: enabled;
}

/*Left float with margin*/
.l {
	float: left;
	margin-left: 0.5em;
	margin-right: 0.5em;
}
/* Right float with margin*/
.r {
	float: right;
	margin-left: 0.5em;
	margin-right: 0.5em;
}
/*Adds a clear class to avoid a tetris stack*/
.clear {
    clear:both;
}

/*Figure box. For an image with optional title or subtitle*/
div.figure {
	width: 25%;
	text-align: center;
	font-style: italic;
	font-size: smaller;
	text-indent: 0;
	border: thin silver solid;
	margin: 0.5em;
	margin-top: 0em;
	padding: 0.5em;
}
/*adding margin to the figure image to give space for the text*/

.figure img {
	margin-bottom: 0.5em;
}
div.figure::after {
    clear: both;

}