Changing Styles for Definition Lists in Confluence

Confluence does not provide an easy way to render definition lists. This is often very annoying for new users who are used to Wikis where support of definition lists is considered a standard.

Definition lists help to render key value pairs in a very concise manner. Values in definition lists are much easier to read than the same values rendered in a table. Especially for a glossary, often included in technical documentation, this is very important.

The Definition List Macro of our free Project Documentation Macros renders a table as a definition list. It provides a couple of styles to choose from, but you my still be not satisfied with any of them. Therefore the macro gives you full control on how to render your list.

In this short article we show you how to adjust the rendering to your requirements.

Find the Stylesheet

You configure the rendering of the definition list with CSS code you add to your stylesheet.

It depends on the theme you use with your Confluence installation, where you find the stylesheet to add your CSS code. For this example we assume that you use the default theme and you want to change the style for a single space only.

To change the stylesheet for a single space, open the the “Stylesheet” tab of the “Space Tools”.

Click “Edit” and you can add your CSS code.

Define your Style

Add the following lines of CSS code to the text area:

dl.mystyle{
}
dl.mystyle > dt {
  font-weight: bold;
}
dl.mystyle > dd {
  margin-left: 1.6em;
}

This CSS code will render the definition data on a new line with a left margin (users of MediaWiki may be familiar with this style).

Configure the Macro

Now change the Definition List CSS Class parameter in the Definition List Macro:

And this is the result of the rendering after you saved your Confluence page:

dl.meet  {
   padding :   0em ;
}
dl.meet > dt  {
   width :   100% ;
 
   float :   none ;
   clear :   none ;
 
   text-align :   left ;
   font-weight :   bold ;
   color :   black ;
}
dl.meet > dd  {
   margin :   0   0   0   1.6em ;
   padding :   0   0   0   0 ;
}