Infobox like wikipedia

Hello guys,

I have a very basic questation but not found anything about it sadly by googling. How can I create an infobox like ini wikipedia?

Is it even possible?


3 answers

1 accepted

What Guilherme is getting at, is that while there is not the Infobox attribute=value built-in code, you can achieve the same look using the panel macro. But making the panel look and position like a wikimedia (Wikipedia) Infobox, requires a little extra work.

  1. Add the div macro and set the class: infobox
  2. Add the panel macro and put it into the body of the div macro
  3. Add content to the body of the panel macro
  4. Add the CSS Stylesheet macro and add the float position to the body:

image2015-12-21 12:59:14.png

Final Look (panel):

image2015-12-21 12:57:33.png


You can achieve more control of the look using HTML table/row/cell macros instead of the panel macro.

image2015-12-21 13:3:35.png

Final Look (HTML table):

image2015-12-21 13:2:18.png


[EDIT] I realize that I misspelled "dessert," but I'm not going to go back and recreate the examples, so don't flame me. smile

It looks like an infobox but the infobox's functionality is not there. :S If I add a panel to 100 pages and later plan to change something on it (eg background) I should go throught all the 100 pages and change it one by one what's not acceptable. :( With infobox you create a partial template with attribute markups and you only set the attributes on the page you wnt to show the infobox and it just appears with the filled in data.

You could put Milo's design into a user macro. You'd be able to feed that a plain text body, and do all the formatting in the macro. Then if you need to change the way it works, just edit the macro.

So, I guess this solution is outdated? I can't even find a div macro.

1 vote

Hey there,

You can type "{" or Open the Macro Browser and search for the Panel macro. It's very similar.


I came across this today looking for the same, and ended up writing a user macro to handle this. It's not perfect, but it works well enough.

I just gave it a name and title of "Infobox" (for obvious reasons). Macro Body Processing set to "Rendered."

## Macro title: infobox
## Macro Body Processing: rendered
## Developed by: Derrick Oltmann
## Date created: 28/06/2016
## @param Title:title=Name|type=string|required=true|desc=Infobox Title
## @param Justify:title=Page Justify|type=enum|enumValues=right,left|default=right|desc=Page justification for the infobox
## @param Width:title=Width|type=string|default=22em|desc=Infobox Width
## @param TitleColor:title=Title Color|type=enum|enumValues=lightblue,red,green,blue|desc=Title background color
## @param TitleTextAlign:title=Title Alignment|type=enum|enumValues=center,left,right|default=center|desc=Title text alignment 
## @param TitleVerticalAlign:title=Title Vertical Alignment|type=enum|enumValues=middle,top,bottom|default=middle|desc=Title text vertical alignment 
## @param TitleFontSize:title=Title Font Size|type=string|default=100%
## @param Border:title=Border Type|type=enum|enumValues=solid,dotted,dashed|default=solid|required=false
## @param BorderColor:title=Border Color|type=string|default=#f0f0f0
## @param BorderWidth:title=Border Width|type=string|default=1px
## @param BorderRadius:title=Border Radius|type=string|default=5px
## @param CellPadding:title=Cell Padding|type=string|default=.5em
<style type="text/css">
 .infobox {
    display: table;
    margin: .5em 0 .5em 1em;
    -moz-border-radius: $!paramBorderRadius;
    -webkit-border-radius: $!paramBorderRadius;
    border-radius: $!paramBorderRadius;
  .infobox-tbody {
     display: table-row-group;
     vertical-align: middle;
     border-color: inherit;
  .infobox-row {
     display: table-row;
  .infobox-cell, .infobox-head {
     display: table-cell;
     border:$!paramBorder $!paramBorderColor $!paramBorderWidth;
     padding: $!paramCellPadding;
   .infobox-cell {
     -moz-border-radius-bottomleft: $!paramBorderRadius;
     -moz-border-radius-bottomright: $!paramBorderRadius;
     -webkit-border-bottom-right-radius: $!paramBorderRadius;
     -webkit-border-bottom-left-radius: $!paramBorderRadius;
     border-bottom-right-radius: $!paramBorderRadius;
     border-bottom-left-radius: $!paramBorderRadius;
   .infobox-head {
     background-color:$!paramTitleColor !important;
     font-size: $!paramTitleFontSize;
     -moz-border-radius-topleft: $!paramBorderRadius;
     -moz-border-radius-topright: $!paramBorderRadius;
     -webkit-border-top-right-radius: $!paramBorderRadius;
     -webkit-border-top-left-radius: $!paramBorderRadius;
     border-top-right-radius: $!paramBorderRadius;
     border-top-left-radius: $!paramBorderRadius;
<div class="infobox">
 <div class="infobox-tbody">
   <div class="infobox-row">
      <div class="infobox-head">$!paramTitle</div>
  <div class="infobox-row">
      <div class="infobox-cell">$body</div>


Macro Properties:


In Editor:



Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Kesha Thillainayagam
Posted Apr 13, 2018 in Confluence

We want to hear how your non-technical teams are using Confluence!

Hi Community! Kesha (kay-sha) from the Confluence marketing team here! Can you share stories with us on how your non-technical (think Marketing, Sales, HR, legal, etc.) teams are using Confluen...

2,941 views 27 12
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you