Summary: How to create custom callouts using the Callout recipe
Version: 2010-01-02
Prerequisites: Cookbook.Callout
Status: alpha
Maintainer: RandyB
Categories: CSS Styles PHP55

Questions answered by this recipe

  • How do I create my own names for callouts?
  • How do I make it easy to update or change a callout that's in use throughout a wiki?
  • How do I create my own styles or use my own images in callouts?
  • What callouts are other people using?


This page explains how to create and use custom callouts, and is a place to share and request new ones.

More specifically, this page

  • explains how you (an author) can create your own variations of any callout, using the names and styles you prefer
  • explains how the administrator can create completely new callouts
  • lets you see or share callouts in the wild
  • lets you request callouts.


Creating "defined" callouts

Callouts are wikistyles: as with other wikistyles, you can create and name new combinations. This lets you give a callout a meaningful name. It also lets you control the appearance of a callout throughout the wiki by putting its definition on a page that you include globally, such as Site.GroupHeader.

%define=emergency important bold red%

This "emergency" callout is like "important" with bold red text.

Creating local callouts

You can easily create up to 10 local callouts with custom images as follows:

  1. If it doesn't already exist, create a directory named pub/callout/local.
  2. Upload a png file containing your image (it has to have the extension .png, not .gif) to that directory. Give your png file any unused name from "callout01.png" to "callout10.png".

To use your local callout, simply refer to callout01 or whatever name you chose for the image. You may prefer to define a meaningful name for your callout as explained above.

Advanced local callouts:

  • You can give a local callout an unusual style or size by modifying the callout.css file in the pub/callout folder. You may need to adjust "padding-left" for where the text begins, "height" for the height of the callout, and / or the background's number of pixels for your image's indentation.
  • You can give a local callout a meaningful name so that "define" is not necessary by modifying the name in the callout.css file, the callout.php file, and the image file. Make the names match your preference, wherever you see them.
  • You can add as many callouts as you want by adding lines to the underlying files, and adding images as needed.

Note: If you modify the css or php files, you'll have to reinstall your changes whenever you update the recipe. Suggestion: post your changes below under Callouts in the Wild - your callout might be incorporated into a future release, and in the meantime you've documented what you or others need to do to install your custom callout.

What I do instead is create a local recipe mycallout.php that sources callout.php and then does whatever customizations I want. One could do this in local/config.php as well, but I like having a recipe instead of cluttering up the main configuration. --tamouse October 30, 2011, at 04:18 PM


Put here what callouts you wish existed, how they might be used, and what they might look like.

  • Is not a quote callout the most obvious sort of thing one might want? --tamouse November 01, 2011, at 02:42 PM

Callouts in the wild

Have you built a callout of interest to others? Share it!

Be sure to include

  1. An attachment or URL for the image, if any. (Note: if the callout contains an image that's not in the public domain, state its license).
  2. The lines to add to the callout.css file (or a reference to another callout whose lines can be used as a model).
  3. The lines to add to the callout.php file (or a reference to another callout whose lines can be used as a model).

Put your instructions here.

  1. ttcallouts.zipΔ -- download the file into the root of your wiki and unzip. Add cookbook/mycallouts.php to your local/config.php file after you include cookbook/callout.php. Included are several files that can be used for the quote callout.
    -- tamouse November 01, 2011, at 05:14 PM

Tips and tricks

You can find public domain images ready to scale down for callouts, at sites like these:


Release notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See also


  • RandyB


See discussion at CalloutCustomization-Talk

User notes +1: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.