Callouts are emphasized boxes of content that you can insert into your chapter to accentuate small blocks of information, such as learning objectives, key takeaways, or a vignette.
To insert a callout using the inline editor, place your cursor where you would like it placed, right-click, and choose Insert > Callout. The default style will look like this:
Callout Box
This is what the default style looks like.
If you would like to change the style of your callout box after it has been inserted, select the DIV layer of the Callout Box and choose a style.
Alternate Styles
There are a number of alternate callout styles built into the system. You can apply a custom callout style while inserting the callout by selecting the name of the alternate style in the "Custom Class" box. A formatted example of each follows.
Alternate Style "Positive"
Select Positive as the custom class.
Alternate Style "Negative"
Select Negative as the custom class.
Alternate Style "Objectives"
Select Objectives as the custom class.
Alternate Style "Exercises"
Select Exercises as the custom class.
Alternate Style "Information"
Select Information as the custom class.
Color Classes
Alternatively, you can also use color classes to modify the callout or any other heading with the Text Color and Background Color options in the Inline Editor. Here's an example:
Heading with the "Light" Text Color and "Primary" Background Color
The DIV layer here uses the "Light" text color and the "Dark" background color.
Custom Formats via CSS
You can also modify the formatting of callout classes across your entire book. In the example below, an additional class was assigned to the callout of "callout-example," and then the following custom CSS was added to the book by going to Advanced > Custom CSS:
#chapter-container div.callout-example { background-color: white; }
#chapter-container div.callout-example h3 { background-color: pink; }
Custom Colors via CSS Override
Change the custom CSS for the book.
Alternatively, you can also override the look of all callouts in your book by applying a similar custom style to the entire callout class, such as the following:
#chapter-container div.callout { background-color: white; }
#chapter-container div.callout h3 { background-color: pink; }Custom Formats via the Style Attribute
As with any element, you can apply custom formatting to a single callout by editing its "style" attribute in the HTML directly, but this will not propagate to other callouts. An example of doing this to increase the size of the callout's text would be as follows:
style="font-size: 1.4em;"
Example Style Editing
This callout's "style" tag was changed.
HTML Structure and Headings
Callouts are designed to start with the H3 class as the highest heading (do not use H1 or H2 tags in your callout).
If you include a H3 element as the first element inside the callout, it will be properly formatted as the callout's title (with the top borders rounded and with no spacing at the top). If you wish to include multiple H3 elements inside a single callout, you can fix the rounded corners of subsequent H3 elements by adding the "no-border-radius" class to them.
Example H3
Example content goes here.
Example of H3 with "no-border-radius" class
Example content goes here.