Aggregator module allows you to combine multiple modules into a tabbed format, all within one pane in your DotNetNuke skin layout.

Manage Aggregator

Tabs

The tabs section shows you which modules are currently being aggregated inside the module.

Add New Module

• The dropdown will contain all available modules that are available for addition. This includes any modules on the same tab that are not already aggregated within the current module, or another aggregation module.
• Select the module you wish to add, and click on the Save icon.

Delete Module

• To remove a module from appearing as a tab, click on the Delete icon next to the module.

Move Up, Move Down

• To reposition a module within the tab order, click either the up arrow or the down arrow next to the module.

Style

The tab style section allows you to modify the look of your tabs.

Tab Style

• This selection allows you to choose from 5 different tab styles. The available styles are Top, Bottom, Left, Right and Inline.

CSS Theme

• The CSS theme will determine the CSS styles that are applied to the various sections of the tab module.
• There are 5 different styles that make up each theme. The CSS theme that is entered in this option, is the suffix applied before each of the style names.
• The 5 styles are: TabStrip, TabUnselected, TabSelected, TabMouseOver and TabPage. If for instance, you enter ‘Theme1’ for your CSS theme, the module will apply the themes as Theme1_TabStrip, Theme1_TabUnselected, Theme1_TabSelected, Theme1_TabMouseOver and Theme1_TabPage. See the included ‘module.css’ file for examples. There are 5 themes included in ‘module.css’, one for each tab style.

Auto Hide Titles

• This option will automatically hide all of the titles for each of the aggregated modules without you having to go into each one and hide manually. This option will not turn off the module title indefinitely, just while you have the module aggregated. If you move the module outside of the aggregator, it will return to its previous setting.
• As of DotNetNuke3, the auto hide titles option actually renders the module inside _default/Containers/_default/No Container.ascx

Sample CSS

The following is an example of a tab theme. Notice that the word Top precedes each of the required selectors, so the theme name in this case is ‘Top’.

 

MouseOver is a little different than the other selectors. It is used to modify the ‘TabUnselected’ selector, so you only need to specify the attributes you want overrided from ‘TabUnselected’. In this case, I’ve decided to only override the color to ‘blue’, so when mousing over an unselected tab, the text color will turn blue but it will retain all the other attributes of ‘TabUnselected’.

 

/* top */

.Top_TabStrip

{

      padding-top: 4px;

      padding-left: 2px;

      background-color: lightsteelblue;

      text-align: left;

}

 

.Top_TabUnselected

{

      cursor: pointer;

      color: black;

      background-color: #BEF0C3;

      padding-left: 4px;

      padding-right: 4px;

      margin-right: 2px;

}

 

.Top_TabSelected

{

      cursor: pointer;

      color: black;

      font-weight: bolder;

      background-color: #b9d1f4;

      border-right: solid 1px white;

      border-top: solid 1px white;

      padding-left: 4px;

      padding-right: 4px;

      margin-right: 2px;

      }

 

.Top_TabMouseOver

{

      color: blue;

}

 

.Top_TabPage

{

      background-color: white;

      border-left: solid 1px silver;

      border-right: solid 1px silver;

      border-bottom: solid 1px silver;

      padding: 3px;

}