The Lozenge macro creates a lozenge button with an optional link that’s ideal for highlighting important information or directing users to additional resources. It is designed for small amounts of content (although the width can be changed to accommodate more content if required). This is to ensure that the content contained within the lozenge is concise and in turn, leads to an improved user experience.

Instructions

  1. Navigate to the page you want to edit.

  2. Click Edit.

  3. Click the position where you want to add a lozenge. This can be repositioned later if required.

  4. Click Insert More Content > Other Macros.

  5. Select the Lozenge macro from the Macro Browser.

    Macro Browser with the Lozenge macro in view.

  6. Customize the macro using the following parameters:

    ParameterDescriptionTypeDefaultRequired

    Page or URL

    Define the full URL or Confluence page to link to the lozenge.

    string

    none

    (error)

    Icon

    The URL for an image (no larger than 48x48 pixels) or even text, if desired.

    string

    none

    (error)

    Title

    Enter the title of the lozenge, also used as the tooltip for links.

    string

    none

    (error)

    Color

    Select the color of the left portion of the lozenge.

    single select

    silver

    (error)

    Arrow

    Select the arrow to use on the left portion of the lozenge:

    • none: (default if no link is specified) 

    • blue: (default if a link is specified) - a blue arrow is displayed

    • green: a green arrow is displayed

    single select

    none, or blue

    (error)

    Width

    Define the width of the entire lozenge in pixels or %. Specify auto to automatically stretch the lozenge to fit its contents.

    string

    none

    (error)

    Use the table based lozenge

    Compatibility setting for use if the lozenge does not display correctly in older browsers.

    checkbox

    unselected

    (error)

  7. Click Insert. The macro placeholder displays.

    The placeholder for a Lozenge macro.

  8. Enter the text to display in the macro body, e.g. a description, summary text, or add an Excerpt Include macro.

  9. Save the page to view the rendered lozenge.

  10. Test any defined links.

    Page or URL parameter: If the defined URL or Confluence page does not exist, a new child page is created when the lozenge is first clicked using the value supplied in the "Page or URL" parameter. On subsequent clicks, Confluence will navigate to the created page.

Colors

There are nine colors to choose from for the left section of the lozenge, and two colors for the arrow.

ColorNo ArrowBlue ArrowGreen Arrow

bronze

A bronze colored lozenge.

A bronze colored lozenge with a blue arrow.

silver

A silver colored lozenge.

A silver colored lozenge with a blue arrow.

gold

A gold colored lozenge.

A gold colored lozenge with a blue arrow.

A bronze colored lozenge with a red arrow.

blue

A blue colored lozenge.

A blue colored lozenge with a blue arrow.

A blue colored lozenge with a red arrow.

cyan

A cyan colored lozenge.

A cyan colored lozenge with a blue arrow.

A cyan colored lozenge with a red arrow.

green

A green colored lozenge.

A green colored lozenge with a blue arrow.

A green colored lozenge with a red arrow.

purple

A purple colored lozenge.

A purple colored lozenge with a blue arrow.

A purple colored lozenge with a red arrow.

pink

A pink colored lozenge.

A pink colored lozenge with a blue arrow.

A pink colored lozenge with a red arrow.

red

A red colored lozenge.

A red colored lozenge with a blue arrow.

A red colored lozenge with a red arrow.

Examples

Basic lozenge

Create a simple lozenge as follows:

Lozenge placeholder with sample text.

The saved and rendered basic Lozenge macro.

Lozenge icon or label

Icons are not included in the add-on.

An icon should ideally be 32x32 or 48x48 pixels. If using the Builder theme, PNG images with alpha transparency may be added.

With the Icon parameter set to bell.png:

A Lozenge macro with a .png image of a bell added as an icon.

Icons that are attached to other pages (or even external icons by specifying their URL) may also be used.

Alternatively, text may be used instead of an image:

With the Icon parameter set to Bell:

Lozenge arrows

Add a blue arrow by setting the Arrow parameter to Blue:

A Lozenge macro with a .png image of a bell added as an icon and a blue arrow.

When a link is added to the lozenge, it displays a blue arrow by default:

The title is linked so that browsers with JavaScript disabled can still follow the link. If a title is not specified, the link will disappear so browsers without JavaScript won’t be able to follow the link.

Always specify a title for linked lozenges.

Arrow parameter set to Green:

Arrow parameter set to none.

Lozenge color

Select a color from a predefined list.

Lozenge placeholder macros are separated by Column macros, within a Section macro. This allows each Lozenge's configuration to be changed separately.

Two Lozenge macros each in a Column macro within a Section macro:

2 Lozenges in a horizontal row, the left-most has a blue pill icon, the right has a red pill icon.

The Section macro and Column macro are ideal for putting lozenges side by side as shown above. The lozenge default width is designed to allow two lozenges to be displayed side by side within the default Builder page width of 750px, which fits nicely on an 800x600 screen.

Lozenge width

By default, all lozenges are 347px wide. However, they can be stretched to fit their contents.

With the Icon parameter set to compass.png, and the Width parameter set to auto:

You can also set a percentage width, for example, 70%:

Or, a pixel width, for example 200px:


A Lozenge macro demonstrating 200 pixels.

Frequently Asked Questions

Q: I’ve put in the name of an icon as shown in the example, but it’s not appearing and I get an error message.

A: You need to attach the icon to your page or provide a URL to an icon elsewhere - this macro doesn’t contain the icons.