update 1/22/08 : This tutorial has been improved with features from our newest release. All edits and improvements are highlighted below. If you have created scripts using the old version of this page all your code should still work.

Breathing New Life into the Groups List Page

by D.Marv

Okay, let's be honest, Groups List Pages that display a series of modules that don't include a custom image representing each group are so not cool.

At KickApps, we firmly believe in the inalienable rights of all pages to be cool, and so we have provided the following tutorial. These instructions will allow you to breathe new life into this particular page, making the uncool, cool!

Get 'er done:

You should first copy and paste the following javascript into the footer section of your Global Page Template in the KickApps Affiliate Center (Configure > Pages > Global Page Template). This function, compliments of Sir. Mauvis, takes the title of each Group and appends a class with this name to the span responsible for displaying the current default image.

<script language="javascript">


/* script to add classNames of each group to the spans of each group on the groups search page */
function addClassesToGroups(){
	if (Ka.Info.PAGE == 'search/searchPage.jsp'){
        var ka_listItems = [];
	var nodes = 
	$('ka_contentContainer').getElementsByTagName('ul')[0].childNodes;
        for (var i = 0; i< nodes.length;i++){
            if (nodes[i].className){
                ka_listItems.push(nodes[i]);
            }
        }
        
for (var i = 0; i< ka_listItems.length;i++){
	    var spany = ka_listItems[i].getElementsByTagName('a')[0].getElementsByTagName('span')[0];
	    var headerContents = ka_listItems[i].getElementsByTagName('div')[0]
.getElementsByTagName('h4')[0].getElementsByTagName('a')[0].innerHTML;
            //strip spaces
            headerContents = headerContents.replace(/^\s*(.*?)\s*$/,"$1")
            headerContents = headerContents.replace(/ /g,"_");
	//converts title to lowercase class name
	headerContents = headerContents.toLowerCase();
            spany.className = spany.className+' '+ headerContents;
        }
	}
}

addClassesToGroups();

</script>

Here Comes The CSS

Now that you've added a new class to the <span> responsible for displaying the Group's image, you've got a hook that can now be used to replace the default images with your custom ones.

Adding the following to your stylesheet for each group you want to customize is the last step. Be sure that the class name (ex: foo) matches the class appended to the <span> and that the URL points to the Group's custom image.

.foo {
	background-image: url(http://www.someserver.com/images/foo_group_bg.gif) !important;
}

For best results, ensure that your new Group images are the same size as .ka_searchLetterBox. (By default: 102px high and 136px wide.)

Once you've styled your Group's page, don't hesitate to drop me a link to it. I'd love see what you've done.

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at support@kickapps.com.