Styles
WYSIWYG Styles enable specific styles to be applied to content using the Styles option in the editors toolbar. Below is a description of the Styles available in the toolbar.
Text styles are available for use on text in the editor.
Small Text
Makes text small. Useful for disclaimers or annotations.
Example small text
ÒùÐÔÊÓƵ Dark Blue Text
Applies the ÒùÐÔÊÓƵ blue to text.
Example dark blue text
Light Gray Text
Applies a light shade of gray to text. Useful for speical instructions or to deliver a softer message than the standard text.
Example light gray text
Red Text
Makes text red. Useful to convert an alert or danger message.
Example red text
Lead Text
Makes a paragraph stand out. It precedes the main body of the page, and it gives the visitor the main idea of the page.
Example lead text
The images styles are availabe for use on images inserted in the editor.
Image - Right
Floats an image to the right of it's surrounding content:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus tincidunt erat vitae ornare. Aenean sit amet bibendum eros. Fusce sit amet elit vestibulum augue luctus facilisis at et nisi. Vestibulum porttitor interdum nisl, in tempor libero accumsan sit amet.
Image - Left
Float and image to the left of it's surrounding content:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus tincidunt erat
vitae ornare. Aenean sit amet bibendum eros. Fusce sit amet elit vestibulum augue
luctus facilisis at et nisi. Vestibulum porttitor interdum nisl, in tempor libero
accumsan sit amet.
Image - Center
Centers an image on it's own line:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus tincidunt erat
vitae ornare. Aenean sit amet bibendum eros. Fusce sit amet elit vestibulum augue
luctus facilisis at et nisi. Vestibulum porttitor interdum nisl, in tempor libero
accumsan sit amet.
These styles can be applied to a link to give it a button appearance. A button can provide a stronger call to action than a traditional text link.
Button - Blue
Use - applies a ÒùÐÔÊÓƵ blue button style to text
Classes - .btn .btn-primary
Button - Default
Use - applies a standard gray button style to text
Classes - .btn .btn-default
Button - Green
Use - applies a green button style to text
Classes - .btn .btn-success
Styles can be applied to tables to give them a cleaner appearance and make tabular data easier for a visitor to scan.
Table - Basic
Use - creates a new basic table
| one | two | three | four |
| red | green | blue | yellow |
| small | medium | large | extra large |
Table – Striped
Use - creates a new striped table
| one | two | three | four |
| red | green | blue | yellow |
| small | medium | large | extra large |
Table - Bordered
Use - creates a new bordered table
| one | two | three | four |
| red | green | blue | yellow |
| small | medium | large | extra large |
Table - Bordered and Striped
Use - creates a new striped and bordered table
| one | two | three | four |
| red | green | blue | yellow |
| small | medium | large | extra large |
Videos embedded using the default JustEdit editor are automatically set to be responsive and will be the width of their parent container (they will fill the width of the device/browser). The responsive behavior can be overridden by manually applying a class of non-responsive to the embedded video.
