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?

https://en.wikipedia.org/wiki/Infobox#Wikipedia

Is it even possible?

Thanks

3 answers

1 accepted

This widget could not be displayed.

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.

This widget could not be displayed.

Hey there,

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

Cheers,

This widget could not be displayed.

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;
    float:$!paramJustify;
    margin: .5em 0 .5em 1em;
    width:$!paramWidth;
    border-collapse:seperate;
    -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;
     text-align:$!paramTitleTextAlign;
     vertical-align:$!paramTitleVerticalAlign;
     font-weight:bold;
     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;
}
</style>
<div class="infobox">
 <div class="infobox-tbody">
   <div class="infobox-row">
      <div class="infobox-head">$!paramTitle</div>
   </div>
  <div class="infobox-row">
      <div class="infobox-cell">$body</div>
  </div>
 </div>
</div>

 

Macro Properties:

2016-06-29_0-52-14.png

In Editor:
2016-06-29_0-53-11.png

Result:

2016-06-29_0-56-09.png

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

505 views 7 6
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