How to enhance the look and feel of the Confluence information macros and code blocks

When presenting instructions to use a product, it is important to highlight the information that you would not want your readers to miss out, e.g., tips, notes, and warnings. Confluence is a platform that enables maintaining product documentation. It comes with quite a few information macros that let you easily add tips, notes, warnings, information, and code blocks in different shades.

Ever wondered how you can change the default shades of these Confluence information macros and provide a better a UX? You can easily get it done by doing a simple stylesheet change.

Sample information macros

In case you maintain multiple Confluence documentation spaces, you can do either of the following:

• Updating the stylesheet of a preferred space: This is useful if you want to differentiate your macro shades from one space to another.
• Updating the global stylesheet: This is useful if you want to update the stylesheets of all your spaces from a single point.

Updating the stylesheet of a preferred space

If you want to update the stylesheet of a particular space, follow the steps below.

1. Navigate to your Confluence space.
2. Click Space tools > Look and Feel.
3. Click Stylesheet tab.
4. Click Edit.
5. Add the preferred stylesheet as given in the sections below and click Save.

Updating the information macro shades

1. To update the information macro, add the following to the style sheet.

/* — — — — — -INFO STYLES — — — — — — — — — — — — -*/ 
.confluence-information-macro { 
background-color: <<shade in hexadecimal>>;
border-color: <<shade in hexadecimal>>;
}

Updating the tip macro shades

1. To update the tip macro, add the following to the style sheet.

/* — — — — — -INFO STYLES — — — — — — — — — — — — -*/
.confluence-information-macro-tip {
background-color: <<shade in hexadecimal>>;
border-color: <<shade in hexadecimal>>;
}

Updating the note macro shades

1. To update the note macro, add the following to the style sheet.

/* — — — — — -NOTE STYLES — — — — — — — — — — — — -*/
.confluence-information-macro-note {
background-color: <<shade in hexadecimal>>;
border-color: <<shade in hexadecimal>>;
}

Updating the warning macro shades

1. To update the warning macro, add the following to the style sheet.

/* — — — — — -INFO STYLES — — — — — — — — — — — — -*/
.confluence-information-macro-warning {
background-color: <<shade in hexadecimal>>;
border-color: <<shade in hexadecimal>>;
}

Updating the code block shades

1. To update the warning macro, add the following to the style sheet.

/* — — — — — -CODE BLOCK STYLES — — — — — — — — — — — — -*/
.codeContent {
background-color: <<shade in hexadecimal>>;
border-color: <<shade in hexadecimal>>;
}
div.container {
background-color: <<shade in hexadecimal>>;
border-color: <<shade in hexadecimal>>;
}
#content td.code {
background-color: <<shade in hexadecimal>>;
border-color: <<shade in hexadecimal>>;
}

Removing the macro border

1. If you want to remove the border, instead of the ‘border-color: <<shade in hexadecimal>>;’ you can add the following.

border: none;

Updating the global stylesheet

If you want to update the global stylesheet, so that the style changes can cascade to all the related spaces, follow the steps below.

1. Under the Settings cogwheel , click General Configurations.
2. Under the Look and Feel section, click Stylesheet.
3. Click Edit.
4. Add the stylesheet changes as explained above.
5. Click Save.

Hope this information is useful to enhance the UX of your product documentation. NOTE: The above instructions were tested on Atlassian Confluence 6.0.7 version. These may/may not work on other Confluence versions.