Changing the panel styling

By default the node content is styled using standard panels. The styling for the content can be modified by associating it with a style, in one of four ways. In priority order, highest first, these are:

  • Adding a style reference and a ! after the section reference(s) in the placeholder in the layout. For example ${icon,icon!} would force the icon style on everything in this section.
  • Adding a style reference after the section reference on the node list, e.g. top/important means "put this node in the top section and use the important style".
  • Returning a style specification along with a section in the section column in the aggregator view (this is deprecated).
  • Returning a style specification in a style column in the aggregator view. The standard Aggregator Summary View will populate this if the Aggregator style (library.aggregator.AggregatorStyle) member target is populated in the node.
  • Adding a style reference after the section reference(s) in the placeholder in the layout, without a following !  For example ${left,default/info} means "put nodes for sections left and default here, and style them with the info style.

The style references are resolved to style nodes using the Style bindings member of the layout. This relates style references to style nodes. If no style binding can be found, an attempt is made to interpret the style reference as a reference of a style node.

Style nodes are created using the node type Aggregator Style (library.aggregator.AggregatorStyleType). Style nodes specify:

  • The start of the panel. If this is ${none}, no output is produced.
  • The end of the panel.
  • The start of the heading. If this is ${none}, no heading containing the name is produced.
  • The end of the heading.
  • The start of the body. If this is ${none}, no body section is produced.
  • The end of the body.
  • Whether to insert the content, the icon, or both, into the body.
  • Icon rendering options.
  • The CSS class to be used for the link if a reference is passed. If this is ${none}, no link is produced.

The default style uses the following:

Panel start <div class="panel panel-default">
Panel end </div>
Heading start <div class="panel-heading">
  <div class="panel-title">
Heading end   </div>
<div>
Body start <div class="panel-body">
Body end </div>
Link class  

This gives a structure like this

<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
Link to node
</div>
</div>
<div class="panel-body">
Aggregator content
</div>
</div>

Which looks like this:

Aggregator content

CSS can also be associated with a style, using the CSS member of the style.

The default layout in Two-Column Layout (library.aggregator.TwoColumnLayout) provides seven styles: six that use Bootstrap 3 styles (danger, default, info, primary, success and warning), plus a hidden style to hide nodes.

Using icons

The aggregator can be used to display icons:

  • The view should include Icon (library.table.IconColumnScript) which calculates the icon for the aggregator.
  • The style should set the Body content to include the icon (either with or without the content).
  • Optionally, the style can set icon render options. These are documented in Icon Script (library.core.IconScript).

Icon Style and Large Icon Style are available for rendering icons.