Using our Bespoke module to customize activeCollab’s CSS and JavaScript? Then you may like the snippets below! Use them as a starting point and customize them to your liking.

And if you build something cool, send it to us so that we can share with the world!

CSS Snippets

Change background color

Paste this code in the CSS textarea within Bespoke. Change the color code to your liking. Save, and force reload.

/* Bespoke CSS goes here */
body {
    background-color: #29200C;
}

Change lots of colors!! Tabs, Lists…

Paste this code in the CSS textarea within Bespoke. Change the color codes to your liking. Save, and force reload.

/* Bespoke CSS goes here */
body {
    background-color: #4A3450 !important;
}

#wireframe_breadcrumbs { 
	background: #CFC0EB url(assets/images/environment/default/layout/breadcrumbs/background.png) repeat-x left bottom !important;
}

#wireframe_page_tabs ul#page_tabs li a {
	border: none !important;
}
#wireframe_page_tabs ul#page_tabs li a.current {
	background: #CFC0EB !important;
	border-bottom: 1px solid #CFC0EB !important;
	border-left: 1px solid #CFC0EB !important;
	border-right: 1px solid #CFC0EB !important;
	border-top: 1px solid #CFC0EB !important;
}

div.objects_list_wrapper div.objects_list_head {
	background: #CFC0EB url("assets/images/environment/default/layout/wireframe/title-background.png") repeat-x left 16px !important;
}

div.objects_list_wrapper div.objects_list_head div.object_list_filter input {
	background: #EDE8F5 !important;
}

div.objects_list_wrapper div.objects_list div.objects_list_body div.object_list_group div.object_list_group_head {
	border-top: 1px solid #DFD7EB !important;;
	border-bottom: 3px double #DFD7EB !important;;
	background: #E7DFF3 !important;;
}

div.objects_list_wrapper div.objects_list {
	background: #EDE8F5 !important;;
}

div.objects_list_wrapper div.objects_list div.objects_list_body tr td {
	border-bottom: 1px solid #DFD7EB !important;
	border-top: 1px solid #F7F7F7 !important;
}

div.objects_list_wrapper div.objects_list div.objects_list_body div.object_list_group div.object_list_group_head span.object_list_group_count {
	background: #EDE8F5 !important;
}

div.objects_list_wrapper div.objects_list div.objects_list_body tr.selected td {
	border-top: 1px solid #4A3450 !important;
	border-bottom: 1px solid #4A3450 !important;
	background-color: #4A3450 !important;
}

Change font style

Paste this code in the CSS textarea within Bespoke. Change font style to your preference. Save, and force reload. Note that font-size varies with different elements and setting it on body won’t have much impact.

/* Bespoke CSS goes here */
body {
    font: 12px "Helvetica Neue", sans-serif;
}

JavaScript Snippets

Google Analytics integration

Want to track what pages are accessed the most in your activeCollab? What’s the page flow? Add the following snippet to JavaScript section in Bespoke and you can start tracking!

Tips

• You may want to create a new property within Google Analytics for this.
• If you’re running activeCollab within a firewall / localhost / non-public URL – you can select “Not a website” in “Default URL” option while setting up your property.
• And yes, don’t forget to add your own account tracking code in the snippet below!

App.bespoke.init = function() {
	// This function will be called when bespoke JS is loaded
};

// Include GA library
var _gaq = _gaq || [];
_gaq.push( [ '_setAccount', 'UA-3692134-6' ]);  // Make sure you change this to your account
_gaq.push( [ '_trackPageview' ]);

(function() {
	var ga = document.createElement('script');
	ga.type = 'text/javascript';
	ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(ga, s);
})();

// Regular expression of urls to skip tracking - uncomment to enable
// App.bespoke.ga_exclude_re = /(wireframe-updates|notifications-plus)/i;

App.bespoke.ga_track = function(url) {
	if (typeof _gaq !== "undefined" && _gaq !== null) {
		var short_url = History.getShortUrl(url);
		if (typeof App.bespoke.ga_exclude_re === "undefined"  || 
			(typeof App.bespoke.ga_exclude_re !== "undefined" && false == App.bespoke.ga_exclude_re.test(short_url)) ) {
			_gaq.push( [ '_trackPageview', short_url ]);
		}
	}
};

// Use history_state_changed event to trigger page track
App.Wireframe.Events.bind('history_state_changed', function(event, object) {
	App.bespoke.ga_track(History.getPageUrl());
});