Callouts

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 while editing a chapter, place your cursor where you would like it placed and go to Tools > Callout Div.

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 adding the name of the alternate style in the "Additional Class" box. A formatted example of each now follows.

Alternate Style "good"

Type good as the additional class.

Alternate Style "bad"

Type bad as the additional class.

Alternate Style "objectives"

Type objectives as the additional class.

Alternate Style "exercises"

Type exercises as the additional class.

Alternate Style "info"

Type info as the additional class.

Bootstrap Color Classes

Alternatively, you can also use Bootstrap's color classes [https://edtechbooks.org/-MLw] to modify either the callout or any of its contents by adding a text-color or bg-color class. Here's an example:

Heading with the "text-light" and "bg-primary" Classes

The callout has the "text-primary" and "bg-light" classes added to it.

You can also modify the header directly by placing your cursor on the heading and selecting Formats > Bootstrap Headings. Not all changes will be visible in the WYSIWYG, so you should save the chapter to see the color change.

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

To make a callout, you simply need a div with the class "callout" assigned to it.

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.