Content Formatting Macros for Confluence Server and DC

Lozenge

The Lozenge Macro creates a lozenge button with optional link. This macro creates a professional lozenge effect that’s ideal for creating professional looking buttons, or simply highlighting important information.

The Lozenge Macro 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.

Usage

  1. Go to the form you wish to edit.

  2. Click Edit.

  3. Click Insert More Content, and select Other Macros.

  4. Select the Lozenge macro from the provided list.

    lozenge 01
  5. Complete the desired fields.

    Parameter Description Type Default Required

    Page or URL

    If specified, clicking the lozenge will go to the specified link.

    string

    none

    error

    Icon

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

    string

    none

    error

    Title

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

    string

    none

    error

    Color

    Specifies the colour of the left portion of the lozenge.

    single select

    none

    error

    Arrow

    Defines which arrow to use on the left portion of the lozenge:

    • none: (default if no "link" specified) - the arrow will not be displayed

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

    • green: a green arrow will be displayed

    single select

    none

    error

    Width

    The width of the entire lozenge in px or %. Specify auto to make the lozenge automatically stretch 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
  6. The macro will then appear on the page.

    lozenge 02

The body of the macro should contain the summary text. This can, for example, be used to place excerpts in to the lozenge using the excerpt-include macro.

If the macro parameter "Page or URL" is supplied with a value that does not exist, when clicking the lozenge the first time Confluence will create a new child page with the value supplied in the "Page or URL" parameter. On subsequent attempts Confluence will navigate to the created page.

Colours

There are 9 colours to choose from for the left side of the lozenge, and two colours for the arrow with the option to show no arrow.

Colour No Arrow Blue Arrow Green Arrow

bronze

lozenge-03

lozenge-04

lozenge-05

silver

lozenge-06

lozenge-07

lozenge-08

gold

lozenge-09

lozenge-10

lozenge-11

blue

lozenge-12

lozenge-13

lozenge-14

cyan

lozenge-27

lozenge-28

lozenge-29

green

lozenge-15

lozenge-16

lozenge-17

purple

lozenge-18

lozenge-19

lozenge-20

pink

lozenge-21

lozenge-22

lozenge-23

red

lozenge-24

lozenge-25

lozenge-26

Examples

Basic Lozenge

Create a simple lozenge as follows:

lozenge 30

The result is:

lozenge 31

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".

The result is:

lozenge 32

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".

The result is:

lozenge 33

Lozenge Arrows

Add a blue arrow to the lozenge as follows:

With the Icon parameter set to "bell.png", the Title parameter set to "Blue", and the Arrow parameter set to "blue".

The result is:

lozenge 34

When a link is added to the lozenge, it will automatically get a blue arrow:

With the Icon parameter set to "bell.png", the Link parameter set to "lozenge macro", and the Title parameter set to "Click me".

The result is:

lozenge 35

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.

A green arrow may be used as follows:

With the Icon parameter set to "bell.png", the Link parameter set to "lozenge macro", the Title parameter set to "Click me", and the Arrow parameter set to "green".

The result is:

lozenge 36

An icon without an arrow may be used as follows:

With the Icon parameter set to "bell.png", the Link parameter set to "lozenge macro", the Title parameter set to "Click me", and the Arrow parameter set to "none".

The result is:

lozenge 37

Lozenge Color

Choose the lozenge colors by editing the macro (see parameter table above).

Two Lozenge macros each in a Column macro within a Section macro.
lozenge 38

The result is:

lozenge 39

The section macro and column macro are ideal for putting lozenges side by side as shown above. The lozenges 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 content.

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

The result is:

lozenge 40

Users may also set a percentage width as follows:

With the Width parameter set to "70%".

The result is:

lozenge 41

Also, the width may be set in pixels as follows:

With the Width parameter set to "200px".

The result is:

lozenge 42

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.