Overlay Callouts

General Rules of using Overlay Callouts

  1. It can only be used with "deluxe" layouts
  2. It should be used with landscape-oriented images
  3. It is not intended for use in the "Top" section of a page, and therefore will not work properly, but it can be used in just about any other pane.

Additional Information & Instructions

Note: This callout style is intended for use with landscape-oriented photos (wider than it is tall). For this reason, it is important to maintain a consistent image size and/or image ratio. The callout can be floated to the right or the left (right float displayed in this document).

In a full-width region:

  • Add a large image in its own pane. 1200 pixels wide x 400 pixels tall at 72 dpi works well for image size.
  • Add text in a separate pane below the image

Add the class "overlay-callout" to the CSS Properties on the text pane. If you want the overlay on the right side, type in the overlay callout name, space, right, like so: overlay-callout right.

Go back to Callouts page

Research in lab

Overlay Callout

To add, type overlay-callout in CSS Class box. This default appears in black.

Research in lab

Gold Callout

To add, type overlay-callout-gold in CSS Class box.

Research in lab

Sky Callout

To add, type "overlay-callout-sky" into CSS properties.

This is how links look in this callout

Research in lab

Stormy Callout

To add, type "overlay-callout-stormy" into CSS properties.

This is how links look in this callout

Research in lab

Maroon Callout

To add, type "overlay-callout-maroon" into CSS properties.

This is how links look in this callout

Research in lab

White Overlay Callout

To add type overlay-callout-white into CSS properties.