Content Formatting Macros for Confluence Server and DC

Rollover

Rollover v4.4 Onwards

The Rollover macro allows the quick and easy creation of CSS rollover effects.

The Rollover macro v4.4 onwards has had a significant change in the way it is used as compared to previous versions. This was implemented to comply with changes made by Atlassian in Confluence 5.9, which caused the Rollover macro to behave unexpectedly when used inside tables. These changes and migration instructions will be listed on this page.

This macro will require additional CSS styling which can be added using the Content Formatting Style macro, the Confluence Stylesheet or a product such as Adaptavist ThemeBuilder.

The instructions on this page use Content Formatting Style macro.

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 Rollover macro from the provided list.

    roll 01
  5. Complete the desired fields.

    Parameter Description Type Default Required

    Target ID

    Specify the target element to apply the rollover

    string

    none

    check

    Class

    Specify the class name for the normal (roll-out) state

    string

    none

    error

    Over

    An optional class name for the roll-over state

    string

    none

    error

    Link

    The page that the rollover links to when clicked (http://www.adaptavist.com)

    string

    none

    error
  6. The macro will then appear on the page.

    roll 02

    Notice that the new Rollover macro has no body, instead we target where we want the rollover effect applied. See below for an example.

Examples

Basic Use

The following example shows how to create a basic rollover using the rollover macro and the style macro.

  1. Edit a page and insert a Rollover macro.

  2. In the mandatory Target ID field identify the element which rollover will be applied to

    This serves as the targeting mechanism. In this case we have a div macro elsewhere on the page with the parameter class name value set to 'test'. The Rollover macro searches for the element and applies the rollover effect to it.

  3. In the Normal CSS class field, enter the name of the class (in this example = test) that will be applied for the normal (roll-out) state.

  4. In the Roll Over CSS class field, enter the name of the class for the rollover state.

    roll 03
  5. Save the macro.

  6. Add a div macro, edit it, and give its class parameter the same class name as is in the Rollover macro.

    roll 04
  7. Add the CSS macro and specify the classes .test and .test-rollover as shown below. This is just an easy example, but a lot more is possible by editing the CSS.

  8. Save the page to see your text with a color background that changes on hover.

    roll 05

Linking to Pages

Follow the example as above and specify the address as the 'Link' parameter in the Rollover macro. Now when the target is clicked the user will be redirected to the link specified.

The link should be a fully qualified web address for external pages, for example http://www.adaptavist.com.

Unlike the previous version, links will now be underlined as default. If the line under the target link needs to be removed, simply edit the CSS macro to specify it. See below for an example.

roll 06

Migration

Because of changes made by Atlassian in Confluence 5.9, there is no possibility to provide backward compatibility when using the Rollover macro. With the previous versions it was possible to identify to what elements the Rollover should be applied just inserting them directly within the body of the Rollover macro. With the new Confluence 5.9 version and Content Formatting 4.4 it is possible to achieve the same results just following a few steps. The process involves removing the old macro and adding the new one.

Because of the way that the new macro works, the location is not important, so you could group all the new Rollover macros together at the end of the page.

  1. Get all the pages where the old Rollover macro is used by typing the string 'macroName: rollover*' in the search toolbar.

    roll 07
  2. Access the identified pages in edit mode and repeat the next steps for all the Rollover (Deprecated) macros found.

    roll 08
  3. Create a new Rollover macro with the same values for the Normal CSS class, Roll Over CSS class, and Link parameters of the old Rollover (Deprecated) macro. Insert a unique 'Target ID' that is going to identify to what element the rollover is going to be applied.

    roll 09
  4. Add the same ID to the element for which Rollover should be applied (in this example, please use the same ID for Table Cell(td) macro).

  5. Move the element outside the old Rollover macro.

    roll 10
  6. Remove the old Rollover (Depreciated) macro.

Rollover v4.3 and Lower

The Rollover macro allows the quick and easy creation of CSS rollover effects.

Rollover effects are often used to create a button of some kind.

This macro will require additional CSS styling which can be added using the Content Formatting Style macro, the Confluence Stylesheet or a product such as Adaptavist ThemeBuilder.

The instructions on this page use Content Formatting Style macro.

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 Rollover macro from the provided list.

    roll 11
  5. Complete the desired fields.

    Parameter Description Type Default Required

    Normal CSS Class

    Specify the class name for the normal (roll-out) state

    string

    none

    check

    Roll Over CSS Class

    An optional class name for the roll-over state (defaults to the %class%-rollover)

    string

    class-rollover

    error

    Link

    The page that the rollover links to when clicked

    string

    none

    error

    Target

    An optional external target to modify.

    string

    none

    error

    Target CSS Class

    An optional class name to use solely for the external target (defaults to class)

    string

    none

    error

    Target Roll Over CSS Class

    An optional class name to use solely for the external target roll-over state (defaults to %targetclass%-rollover)

    string

    none

    error

    Output Type

    Specifies that the macro will be displayed inline with the surrounding content

    single select

    Inline

    check
  6. The macro will then appear on the page.

    roll 12

Examples

Basic Use

The following example shows how to create a basic rollover using the rollover macro and the style macro.

  1. Edit a page and insert a Rollover macro.

  2. In the Normal CSS class field, enter the name of the class (in this example = test)

  3. In the Roll Over CSS class field, enter the name of the class for the rollover state, or leave blank if you use what is in the Normal CSS class field plus "-rollover" (the default).

    roll 13
  4. Save the macro.

  5. In the Rollover macro placeholder, add a div* macro as a container for your rollover text.

    roll 14
  6. Save the page to see the text with a color background that changes on hover.

Linking to pages

The rollover macro can be used to link to a Confluence page, etc., as follows:

With Class parameter set to "test", and Link parameter set to "ADAPTAVIST:home". Contains a Div macro.

Here’s the result:

roll 15

Notice that the cursor doesn’t change to a pointer - to do that we’ll need to extend our rollover style:

With Class parameter set to "test", Over parameter set to "pointy-rollover", and Link parameter set to "ADAPTAVIST:home". Contains a Div macro.
roll 16

Here’s the result:

roll 17

Alternatively, a fully qualified URL may be used to link to resources outside Confluence:

With Class parameter set to "test", Over parameter set to "pointy-rollover", and Link parameter set to "http://www.google.com". Contains a Div macro.

Which results in:

roll 18