This works in the same principal as the Empyrean/Relic/Mythic widget, in fact the majority of the javascript has just been tweaked.

It lists the linkshell leaders and sackholders and so is useful for prospective members wishing to contact people.

Template:

<div class="widget">
  <div class="widget-header2">Title Goes Here</div>
  <div class="widget-body">Intro Text Goes Here
    
   
    {{#rank}}
      <div class="leaders">
      <table><tr><td colspan="2"> </td></tr>
      <tr><td><h7>{{name}}</h7></td><td><img src="{{icon}}" width="30" height="30"/></td></tr>
    </div>
      {{#owners}}
        <tr><td colspan="2"><img src="{{avatar}}" class="avatar avatar-medium" width="20" height="20" />
        <a href="{{link}}"> {{name}}</a></td></tr>
      {{/owners}}
   <table> {{/rank}}
  </div>
</div>

Javascript:

var names = {},

owners = {};

// Collect all the sacks/shells and member names.
each(this.members, function(member) {
   
  if (member) {
    each(member.rank, function(name) 
    
    {if (name === "Linkpearl") {
  return;} 
    else if (name === 0) {
  return;}
  
  
// Removes named people, ie. inactives or mules.  
  
    else if (member.name ==="Alixia"){return;}
 
    else if (member.name ==="Myotaru"){return;}

    else if (member.name ==="Tobyx"){return;} 
      
      names[name] = name;
      owners[name] = owners[name] || [];
      owners[name].push(member);
      
      
    });    
    
  }
});



 
// Create a list of ranks/member pairs.


this.rank = map(names, function(name) {
  return {
    name: name,
    owners: owners[name]
    
  }
    

});
 
// Sorts Linkshell first.
this.rank = sortBy(this.rank, function(rnk) {
  return rnk.owners;
});

// Adds icons
each(this.rank, function(rnk) {
if (rnk.name==="Linkshell") 
   {rnk.icon = 'http://guildwork.s3.amazonaws.com/files/4f3afa39205cb20ac203dbab/4f3b4f01205cb20ac1040626-Shell.jpg';   
   } 
else if (rnk.name==="Linksack") 
   {rnk.icon = 'http://guildwork.s3.amazonaws.com/files/4f3afa39205cb20ac203dbab/4f3b4eff205cb20ac204075c-Sack.jpg';} 
else 
{rnk.icon = 'http://guildwork.s3.amazonaws.com/files/4f3afa39205cb20ac203dbab/4f3b4efe205cb20ac004067b-pearl.jpg';
}
});

im trying to change the color of the lettering next to the linkshell picture where it actually says linkshell/linksack.. Need it #2B60DE but cant find where to change it..

Try in the global style:

h7{
font-size: 18px; color:black; font-family:'Fredericka the Great'; font-weight: bold;}

Set the font face, style, color to what you want.