This example uses larger symbols, a larger font size and the 'Times' font. It also demonstrates how using the 'edit' parameter in the configuration of pedigreejs can be used to override the default dialog used to display and edit an individual's attributes. This gets displayed when the mouse is placed over an individual in the pedigree and the widget is selected. Below is the funtion used to display attributes and the configuration options used:

		function openDialog(opts, d) {	
			var table = "<table id='person_details' class='table'>";
			table += "<tr><td style='text-align:right'>ID</td><td><input class='form-control' type='text' id='id_name' value="+
						d.data.name+"></td></tr>";
 			$.each(opts.diseases, function(k, v) {
				var disease_colour = ' <span style="padding-left:5px;background:'+opts.diseases[k].colour+'"></span>';
				table += '<tr><td colspan="2">' +
					 	 '<label class="checkbox-inline"><input type="checkbox" id="id_'+v.type +
					    	'" name="'+v.type+'" value="0" '+(d.data[v.type] ? "checked" : "")+'>'+disease_colour+' ' +
					        v.type.replace("_", " ")+'</label></td></tr>'
			});
 			$('#node_properties').html(table);
			$('#node_properties').dialog({title: d.data.display_name});
			$('#node_properties input[type=checkbox]').change(function() {
		    	pedigreejs.pedigreejs_form.save(opts);
		    });
		}

		var opts = {
			'targetDiv': 'ped',
			'btn_target': 'history_ex3',
			'width': svg_width,
			'height': 400,
			'symbol_size': 40,
			'font_size': '1.1em',
			'font_family': 'times',
			'font_weight': 400,
			'edit': openDialog,
			'node_background': '#fff',
			'DEBUG': (pedigreejs.pedigreejs_util.urlParam('debug') === null ? false : true)
		};