Infobox like wikipedia

[laxika]

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

[Milo Test · Accepted solution]

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. 

[laxika]

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.

[Nic Brough -Adaptavist-]

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.

[tuexss]

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

[Guilherme V.]

Hey there,

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

Cheers,

[Derrick Oltmann]

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