Choose a Sign-in Option
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:
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.
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.
Select Positive as the custom class.
Select Negative as the custom class.
Select Objectives as the custom class.
Select Exercises as the custom class.
Select Information as the custom class.
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:
The DIV layer here uses the "Light" text color and the "Dark" background color.
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; }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; }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;"This callout's "style" tag was changed.
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 content goes here.
Example content goes here.
This content is provided to you freely by Ensign College.
Access it online or download it at https://ensign.edtechbooks.org/userguide/callouts.