Wow Recruitment Widget Icon Only Example

Demo Page

Sample code only contains extra styles applied on top of default stylesheet.

icon only style, still using default icons

.wr-container{
	overflow:hidden;
  }
 
.wr-right {
    display:none;
}
 
.wr-item{
	float:left;
	width:auto !important;
	height:auto !important;
  }
 
/*icon only style*/
.wr-status3 .wr-icon { opacity:1.0; }
.wr-status2 .wr-icon { opacity:0.6; }
.wr-status1 .wr-icon { opacity:0.3; }
.wr-status0 .wr-icon { opacity:0.0; }
 
.wr-icon {border:3px solid #cccccc; border-radius:10px; width:36px; height:36px;}
.wr-item {padding:5px; width:36px; height:36px;}
 
/*class colors, currently using wowprogress.com colors*/
.wr-deathknight .wr-icon		{ border-color: #C41F3B; }
.wr-druid .wr-icon			{ border-color: #FF7D0A; }
.wr-hunter .wr-icon			{ border-color: #ABD473; }
.wr-mage .wr-icon 			{ border-color: #69CCF0; }
.wr-paladin .wr-icon 			{ border-color: #F58CBA; }
.wr-priest .wr-icon			{ border-color: #FFFFFF; }
.wr-rogue .wr-icon			{ border-color: #FFF569; }
.wr-shaman .wr-icon			{ border-color: #2459FF; }
.wr-warlock .wr-icon			{ border-color: #9482CA; }
.wr-warrior .wr-icon			{ border-color: #C79C6E; }