Tabbed Blockgroups

Overview

This bit of code uses the Xaraya navtabs styles to make tabbed block groups. Instead of using the <xar:blockgroup> tag in your page template to insert the blockgroup, we include a different template, tabblocks.xt, that builds the tabbed blocks using the blockgroup. That way you can add or change the blocks using the blockgroups admin GUI and the page will change according. An example can be found on the homepage here .

Install Files

The tabblocks.zip package consists of the following files:

• tabblocks.xt - include this template in your page, copy to mytheme/includes/tabblocks.xt
• tabbed.xt - use this as the blockgroup "outer" template, copy to mytheme/blocks/tabbed.xt
• tabblocks.js - a bit of javascript, copy to mytheme/modules/base/includes/tabblocks.js
• tabblocks.css - optional override default tab styles, copy to mytheme/modules/base/xarstyles/tabblocks.css

Place a copy of these files into their corresponding directories in your theme.

The tabblocks.css isn't necessary if you want to keep the tabnav.css styles already in your theme (or Xaraya default). This file shows how to override selective styles for tabs.

You can download a copy of the tabblocks.zip package from [download ].

Make a Blockgroup Named "tabbed"

Create a block group named "tabbed" (Admin > Global > Blocks > Add Group). This is just a suggested name, but we'll assume it here. (If you use a different name, change it in the tabblocks.xt template).

Give this blockgroup the outer template named "tabbed" (for file mytheme/blocks/tabbed.xt).

Add any number of blocks to the blockgroup (by editing each block and setting Add to Group).

You can adjust the order you want the tabs to appear by arranging the blocks in Block Group Edit.

Call the tabblocks.xt Template From Your Page

Lets suppose the tabbed blocks are going on your home page, and you are using the Base module as your default module. Then the template mytheme/modules/base/user-main.xt contains your home page content. Add the following line to your user-main template:

<xar:template type="theme" file="tabblocks" />

That's it!

Well, almost. For some reason we cannot include the <xar:base-include-javascript> tag in the tabblocks.xt template, so put the following line in user-main.xt too:

<xar:base-include-javascript module="base" filename="tabblocks.js" position="head" /> 

See accompanying article for details how this whole thing works.