|
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.
 Note: This does not mean that simple design requirements cannot be achieved through the Customer Repeater Snap-In. The point of the Custom Repeater is to give you direct control over each and every element in the list as quickly and conveniently as possible.
Custom Repeater Types
There are two types of customer repeater snap-ins.
- Custom Repeater (Browse by Category) - an alernative way to using the Browse by Category snap-in. 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.
- Snap-In - Styling and layout setting specified for the snap-in itself apply to the entire Customer Repeater snap-in 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 snap-in.
Custom Repeater (Browse by Category) and Custom Repeater (Link Group) Snap-In
These snap-ins are alternatives for the Browse by Category and Link Group snap-ins. They perform the same basic function but the customer repeater allows for design controls beyond those provided in the Browser by Category Snap-In. The following Merge Codes are available for use in this Snap-In.
- $$REPEATER$$ - This merge code applies to both, Browse by Category and Link Group, snap-ins and is used in the snap-in design area.
Note: This is required to repeat the list of links in the snap-in.
- Within the snap-in the various links are comprised of the following merge codes. You can either use the overall design paramters for the snap-in or further customize their appearance using CSS and/or other layout controls.
Custom Repeater (Browse by Category)
- ##CATURL## - places the Category URL
- ##CATNAME## - places the Category name
Typical usage would be as follows:
<a href="##CATURL##" title="##CATNAME##" class="customCSSclass">##CATNAME##</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 snap-ins. 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 Site Explorer:
Step 2: Adding the CSS
This example uses custom CSS definitions to accomplish the end result. These are added through Themes > ActiveTheme > CSS Settings > Custom CSS Classes and Overrides
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 > Page Header and add the Custom Repeater (Link Group) snap-in.
Step 4: Modifying the Custom Repeater (Link Group)
Expand the recently added Custom Repeater (Link Group) and select the appropriate link group and click Save in the top-right corner.
Next, expand the Custom Snapin Design and you will see SnapIn and Item add the following code.
SnapIn
The code in the snap-in applies to the whole snap-in along with its container. The used code looks like this.
The complete code is as follows:
<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>
$$REPEATER$$
</UL>
</td>
</tr>
</tbody>
</table>
</center>
</div>
Note the use of the $$REPEATER$$ merge code used for repeating the links.
Item
The code in the snap-in applies to the links within the snap-in. The used code looks like this.
The complete code is as follows:
<LI><A href="##LINKURL##"><STRONG class="innerTopNavLeftBg"></STRONG><STRONG class="topNavRightBg">##LINKTEXT##</STRONG></A></LI>
Step 5: Viewing the result
On the home page, the header appears as follows, with the rounded corner highlight on mouseover.
Similarly, you can use the Custom Repeater snap-in along with your own layout and CSS stylings to create category and link group listing designs as per your requirement.
|