CSS Hacks

Ning Networks include an easy way for network creators to add Google Analytics or other tracking code to their network. We've got some instructions in the help center on how to do it, and Kyle has a post on the Ning blog about the advantages of tracking your network with Google Analytics.

One of the great things about this feature though is that it can be used for much more than just adding tracking code to your site. You can also use it to add javascript, css and even PHP code to the bottom of each page request. This gives you a powerful ability to make simple modifications to your network without having to request the code. In this post I'm going to run through some of the simple things you can accomplish with the tracking code form; many of these are common requests that we get from network creators who don't want to request their own code and stop getting automatic updates.

In order to implement any of the hacks on this page, just click on the Manage tab; at the bottom center of the manage page under the section called 'View Statistics' there is a link titled 'Add your own tracking code'. Click on that link and you can paste the code snippets below into the box and then save it.

Pointing the Forum link to an external forum

Just replace http://yoursite.com below with the address of your forum:

<script type="text/javascript">
var forumList = dojo.byId('xg_tab_forum');
var anchor = forumList.getElementsByTagName('a')[0];
anchor.href = 'http://yoursite.com';
</script>

Relinking the header graphic to an external site

Just replace http://yoursite.com below with the address you want the header to link to:

<script type="text/javascript">
var headerLink = dojo.byId('application_name_header_link');
headerLink.href = 'http://yoursite.com';
</script>

Make the Tracking Code form box bigger :-)

This one is a personal favorite:

<script type="text/javascript">
if (dojo.byId('pageEnd')) {
dojo.byId('pageEnd').rows = "20";
dojo.byId('pageEnd').cols = "58";
}
</script>

Notes

These CSS hacks (like the first two example to hide things) can be also used in the Appearance > Advanced > Custom CSS box on the Manage section of a network.

For hacks that involve adding/modifying or replacing DOM nodes with other things, one essential piece of documentation to learn and master manipulation of html dom elements is the Gecko DOM Reference.

The idea is to make this kind of hacks easier in the future by adding more areas that accepts arbitrary html/php from the network owner.