Content Formatting Macros for Confluence Server and DC

Background Colour

The Background Colour macro allows the changing of the background colour of content. At times, it might be required to highlight a block of content to make it stand out on a page, and that’s exactly what this macro does. Any background colour can be specified using either colour names or hexadecimal colour codes.

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

    background color 02
  5. Complete the desired fields.

    Parameter Description Type Default Required

    Colour

    The background colour for the content contained within the macro and can be either a common colour name (supported by most browsers) or a hexadecimal colour code (supported by all browsers).

    string

    green

    check

    CSS Class

    Specifies a CSS Class to be added.

    string

    none

    error
  6. The macro will then appear on the page, with space to add content into the body of the macro.

    background color 03

Examples

Standard Use

There are several built-in pastel colours ideal for use as backgrounds:

Set the colour background parameter to the desired colour.

Which results in:

background color 04

Use standard browser colour names, except those shown above, to display additional colours.

For example:

background color 05

Hexadecimal Color Code

To be specific about the colour displayed, use a hexadecimal colour code: With Colour parameter set to #003366.

The result is:

background color 07
When changing background colour, try to keep a contrast between the text and the background so that it is still clearly readable. In our example above, the slate blue background made the black text barely readable.

You may also want to change the text colour using the colour macro. Simply change the text colour from the Confluence text toolbar menu.

background color 06

For Example:

background color 08

Frequently Asked Questions:

Q: Can I highlight just a few words within my text, rather than a whole block of content?

A: Yes. Use the highlight macro.

Q: I’m using hexadecimal codes, but they are not working - why?

A: Unlike the colour macro, this macro requires the "#" at the start of the number.

Q: Where can I get HTML text colour codes from?

A: WebMonkey has a good colour code reference page that shows each of the standard colours with the corresponding colour code. If you want a groovy wall chart with colour codes, try http://html-color-codes.com/.

Q: Some colour names, such as "grey", don’t seem to work in all browsers - why?

A: Colour names are supported differently by different browsers. To be 100% sure of getting the right colour, use the hexadecimal colour code instead.

Q: How do I change the colour of text?

A: Use the Confluence text toolbar.

Q: How do I change the default background colour of my page, etc?

A: If you are using a standard theme, there are some limited options to change colours. If you are using the Builder Documentation theme, you have complete control over all colours using Builder CSS Custom Styles.

Q: Can I put a graphic in the background?

A: Yes. The Div and Style Sheet allow you to apply far more customized formatting to content.