Callouts

CSSlearning objectivesInline EditorCss OverrideCallout BoxColor ClassesCustom FormatsCallout ClassesCallout StylesVignette

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.

This content is provided to you freely by EdTech Books.

Access it online or download it at https://edtechbooks.org/userguide/callouts.