CoverIntroductionAbout EdTech BooksAccount ManagementCreating a BookCreating a ChapterEditing a ChapterAuthor ManagementEnsuring QualityPublishing My BookEssential ConceptsUser Interface & Visual DesignWriting For The WebCopyright and Open LicensingColor Theory in Experience DesignMultimedia DesignBasic FeaturesBook CoversCalloutsEquations with LaTeXFootnotesGlossariesImagesMicrosoft Word ConversionPDF ConversionPublic SubmissionsStylesVideosWYSIWYG EditorAdvanced FeaturesAnalyticsAPIArtifactsCanvas EmbeddingChecking Grammar and SpellingCode SnippetsCSS CustomizationFlights or A/B TestingGoogle AnalyticsH5P Element EmbeddingLanguagesPractice QuizzesSimplified ViewSynchronizationURL ShorteningAdd-on ServicesLifelike Text-to-SpeechTranslationAppendixFeature ListCommunity Meeting 2021


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 Box. 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, go back to Tools > Callout Box and change the style under Custom Class.

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.

Hidden Note Class

Additionally, a "Hidden Note" class is also available. These are for collaborative editing purposes. They will be visible to book and chapter editors but not to other readers.

Bootstrap Color Classes

Alternatively, you can also use Bootstrap's color classes 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.