- Custom Repeater Widget #201904280

Custom Repeaters allow you to fully customize a list. Whether it be links in a Link Group for horizontal/vertical navigation, or lists of categories in unique styles. The Custom Repeater is used when you need complete control over the styling of link groups or a list of categories.

Note: This does not mean that simple design requirements cannot be achieved through the Customer Repeater Widget. The point of the Custom Repeater is to give you direct control over each element in the list as quick as possible.

Custom Repeater Types

There are two types of customer repeater widgets.

Custom Repeater (Browse by Category) - an alernative way to using the Browse by Category widget. Use it to list categories.

Custom Repeater (Link Group) - used to display Link Groups created in Site Explorer. Handy for creating advance-design vertical or horizontal navigations.

Basic Components of the Custom Repeater:

The Custom Repeater has two elements that can be customized at a root level.

Widget - Styling and layout setting specified for the widget itself apply to the entire Customer Repeater widget and its contents. For example, overall width/height, background image, float right/left, etc.
Item - Styling and layout settings for this element apply to the links within that widget.

Custom Repeater (Browse by Category) and Custom Repeater (Link Group) Widget

These widgets are alternatives for the Browse by Category and Link Group widgets. They perform the same basic function but the customer repeater allows for design controls beyond those provided in the Browser by Category Widget. The following Merge Codes are available for use in this Widget.

- This merge code applies to both, Browse by Category and Link Group, widgets and is used in the widget design area.

Note: This is required to repeat the list of links in the widget.
Within the widget the various links are comprised of the following merge codes. You can either use the overall design paramters for the widget or further customize their appearance using CSS and/or other layout controls.

Custom Repeater (Browse by Category)

/hc/en-us/sections/200384330-Theming-Site-Design - places the Category URL
Theme & Design - places the Category name

Typical usage would be as follows:
<a href="/hc/en-us/sections/200384330-Theming-Site-Design" title="Theme & Design" class="customCSSclass">Theme & Design</a>

Custom Repeater (Link Group)

##LINKURL## - places the Link URL
##LINKTEXT## - places the Link name

Typical usage would be as follows:
<a href="##LINKURL##" title="##LINKTEXT##" class="customCSSclass">##LINKTEXT##</a>

Setting up a Custom Repeater

There are number of possibilities with the Custom Repeater. The following example is provided just as an idea of what the customer repeater can accomplish that is not easily possible by using the default Link Group and Browse by Category widgets. The same controls can be extended/modified/replaced to suit nearly any design requirement.

The following example shows how to use advanced CSS controls to create rounded-corner highlights in a horizontal navigation.

Step 1: Creating the Link Group

For this example the following link group is used from the Content > Menus & Navigation

Step 2: Adding the CSS

This example uses custom CSS definitions to accomplish the end result. These are added through Themes > ActiveTheme > Global CSS Editor (CSS is example only the classes can be anything you set them to in the They just have to match the classes add to the code you will create below)

The complete CSS code is as follows:

td.topNav img{
        display:block;
        float:left;
        cursor:pointer;
}
td.topNav span.navLeftBg{
        width:3px;
        height:27px;
        display:block;
        float:right;
        font-size:0;
        line-height:0;
        background:url(/images/top-nav-end-bg.gif) 0 0 no-repeat;
}
td.topNav ul{
        height:27px;
        list-style-type:none;
        padding:0;
        margin:0;
        background:url(/images/top-nav-bg.gif) 0 0 repeat-x;
        font:normal 9px/23px Arial, Helvetica, sans-serif;
}
td.topNav ul li{
        float:left;
        height:23px;
        padding:0;
        margin:0;
}
td.topNav ul li a, td.topNav ul li span{
        display:block;
        height:23px;
        float:left;
        text-transform:uppercase;
        color:#3F3F3F;
        background-color:inherit;
        text-decoration: none;
}
td.topNav ul li a strong, td.topNav ul li span strong{
        display:block;
        height:23px;
        float:left;
        background-repeat:no-repeat;
        cursor:pointer;
}
td.topNav ul li a strong.topNavLeftBg,
td.topNav ul li span strong.topNavLeftBg{
        background-image:url(/images/top-nav-left-bg.gif);
        background-position:0 0;
        padding-left:15px;
}
td.topNav ul li a strong.innerTopNavLeftBg,
td.topNav ul li span strong.innerTopNavLeftBg{
        padding-left:15px;
}
td.topNav ul li a strong.topNavRightBg,
td.topNav ul li span strong.topNavRightBg{
        background-image:url(/images/top-nav-right-bg.gif);
        background-position:100% 0;
        padding-right:15px;
}
td.topNav ul li a:hover, td.topNav ul li span{
        color:#fff;
        background-color:inherit;
        background:url(/images/top-nav-h-bg.gif) 0 0 repeat-x;
}
td.topNav ul li a:hover strong.topNavLeftBg,
td.topNav ul li span strong.topNavLeftBg{
        background-position:0 100%;
}
td.topNav ul li a:hover strong.innerTopNavLeftBg,
td.topNav ul li span strong.innerTopNavLeftBg{
        background:url(/images/top-nav-left-bg.gif) 0 100% no-repeat;
}
td.topNav ul li a:hover strong.topNavRightBg,
td.topNav ul li span strong.topNavRightBg{
        background-position:100% 100%;
}

Step 3: Adding the Link Group (Custom Repeater)

Browse to Themes > ActiveTheme > Header > Widgets : Click and drag the “Custom Repeater” to the widgets area.

Step 4: Modifying the Custom Repeater (Link Group)

Click the Edit Widgets icon and set the “Custom Repeater Type” to Menu:

Next Set the "Menu” you want to display, then click save in the right hand corner

By default the new layout will appear like:

Custom Repeaters allow you to fully customize a list. Whether it be links in a Link Group for horizontal/vertical navigation, or lists of categories in unique styles. The Custom Repeater can be used when you need complete control over the styling of link groups or a list of categories.

Custom Repeater Types

There are two types of customer repeater widgets.

Custom Repeater (Browse by Category) - an alernative way to using the Browse by Category widget. Use it to list categories.

Custom Repeater (Link Group) - used to display Link Groups created in Site Explorer. Handy for creating advance-design vertical or horizontal navigations.

Basic Components of the Custom Repeater:

The Custom Repeater has two elements that can be customized at a root level.

Widget - Styling and layout setting specified for the widget itself apply to the entire Customer Repeater widget and its contents (for example, overall width/height, background image, float right/left, etc.).
Item - Styling and layout settings for this element apply to the links within that widget.

Custom Repeater (Browse by Category) and Custom Repeater (Link Group) Widget

These widgets are alternatives for the Browse by Category and Link Group widgets. They perform the same basic function but the customer repeater allows for design controls beyond those provided in the Browse by Category Widget. The following Merge Codes are available for use in this Widget.

- This merge code applies to both, Browse by Category and Link Group, widgets and is used in the widget design area.

Note: This is required to repeat the list of links in the widget.
Within the widget the various links are comprised of the following merge codes. You can use the design paramters for the widget or further customize their appearance using CSS and/or other layout controls..

Custom Repeater (Browse by Category)

/hc/en-us/sections/200384330-Theming-Site-Design - places the Category URL
Theme & Design - places the Category name

Typical usage would be as follows:
<a href="/hc/en-us/sections/200384330-Theming-Site-Design" title="Theme & Design" class="customCSSclass">Theme & Design</a>

Custom Repeater (Link Group)

##LINKURL## - places the Link URL
##LINKTEXT## - places the Link name

Typical usage would be as follows:
<a href="##LINKURL##" title="##LINKTEXT##" class="customCSSclass">##LINKTEXT##</a>

Setting up a Custom Repeater

There are number of possibilities with the Custom Repeater. The following example provides an idea of what the customer repeater can accomplish. This is not easily possible by using the default Link Group and Browse by Category widgets. The same controls can be extended/modified/replaced to suit nearly any design requirement.

The following example shows how to use advanced CSS controls to create rounded-corner highlights in a horizontal navigation.

Step 1: Creating the Link Group

For this example the following link group is used from the Content > Menus & Navigation

Step 2: Adding the CSS

This example uses custom CSS definitions to accomplish the end result. These are added through Themes > ActiveTheme > Global CSS Editor. This CSS is for an example only. The classes can be anything you set them to in the They just have to match the classes add to the code you will create below

The complete CSS code is as follows:

Step 3: Adding the Link Group (Custom Repeater)

Browse to Themes > ActiveTheme > Header > Widgets. Here, click and drag the “Custom Repeater” to the widgets area.

Step 4: Modifying the Custom Repeater (Link Group)

Click the Edit Widgets icon and set the “Custom Repeater Type” to Menu.

Next Set the "Menu” you want to display, then click save in the right hand corner

By default the new layout will appear like:

You will need to add the container code around the <ac:layoutarea id="Item"> </ac:layoutarea> As show in the next screen shot:

The full code is listed below:

<ac:widget id="REPEATEDLIST6155" type="RepeatedList" repeatabletype="BrowseByCategory">

<div style="width:100%;height:27px;background-image:url(/images/top-nav-bg.gif);
background-repeat:repeat-x;">
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="topNav" align="center">
<UL>
<ac:layoutarea id="Item">
<LI>
<A href="##LINKURL##"><STRONG class="innerTopNavLeftBg"></STRONG>
<STRONG class="topNavRightBg">##LINKTEXT##</STRONG></A>
</LI>
</ac:layoutarea>
</UL>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</ac:widget>

The code inside the tags “<ac:layoutarea id="Item"> </ac:layoutarea>” will control the individual links that are being repeated

Similarly, you can use the Custom Repeater widget along with your own layout and CSS stylings to create category and link group listing designs as per your requirement.