WOW Recruitment Widget – Customization

Introduction

I had always been trying to make this widget really customizable in the first place, because I just don’t want to make all of these wordpress sites look like those in Guild Launch or those Joomla sites out there. At one point I even thought about making a drag & drop type of customization like Facebook, but it is just not feasible to do something like that with the time I want to spend on this plugin.

So what I did is to make it fully customizable with some CSS techniques. This feature had been supported since 1.1 when I had got rid of all table layouts, today I finally have the time to write this tutorial after the release of 1.2.2

This is a little tutorial of how to customize this widget, if you read through this, it may help you learn some CSS techniques as well.

Before writing any codes, you will want to keep your changes right? so copy all style codes of the widget css (go to Plugins > Editor > Select plugin to edit: WOW Recruitment Widget > wow-recruit-widget/css/style.css) copy everything inside, and paste to bottom of your theme css (Appearance > Editor > Select your theme > style.css), then tick “Use Custom Style Sheet” in Settings > WOW Recruit Widget.

This will stop the widget style sheet from loading at all, which reduces a lot of conflicts and headache.

url(../../plugins/wow-recruit-widget/img/class-sprite.png)

url(http://{your site's url}/wp-content/plugins/wow-recruit-widget/img/class-sprite.png)

I’ll separate this tutorial into 3 difficulty levels, in some WOW terms, Casual(Basic CSS), Intermediate(Advanced CSS), Hard Core(for Coders)

*All screenshots are taken with chrome 5, but they should look the same (or very similar) on chrome 4+, firefox 3.5+ and safari 4+, opera does not support specific corner roundness thingy, so all will become rounded, Internet explorer does not support any css3 rounded corner and shadows (but it’s hackable with filter).

Casual
So your guild just make you web master but you don’t know any html or css,
and you just want to change some colors right? no worries, it’s easy.
just find out the class that you want to change color, and replace the original color code to the new one you want, or even easier, add those lines to very bottom of your style sheet and they should do just fine.
That’s how cascading style sheet works, “the second mouse gets the cheese”, latter rule always overwrite previous rule, if there is no special rule or id involved
which means, if you add your custom style code to very bottom to the only style sheet you have (aka the theme style sheet), those rules will always overwrite previous ones.

say you have a white theme and want to change Priest class to something instead of white, and other classes to a darker tone,

just change the corresponding color codes

.wr-priest { color: #FFFFFF; }

to something else say grey

.wr-priest { color: #999999; }

or background of each item (.wr-item) to a different color, just add in this line

.wr-item  { background:#222222;}

or background of alternate item (.wr-odd, .wr-even) *yes I know CSS3 offers alternating row styling, but my plugin is using all divs so it may not suppoort seamlessly, and remember, IE8 doesn’t support many CSS3 features

.wr-odd  { background:#999999;}
.wr-even  { background:#222222;}

still doesn’t look quite right? let’s add a background for the whole widget

.wow-recruit-widget {
 
        background:#111111;
        padding:10px;
}

looks a bit weird, let’s add border to each item instead.

.wow-recruit-widget {
 
        background:#111111;
        padding:10px;
}

hmm, how about different border color, lol looks a bit like old school windows xp button

.wr-item {padding:5px;}
.wr-odd { background:#444444;
        border-top:3px solid #cccccc;
        border-left:3px solid #cccccc;
        border-right:3px solid #999999;
        border-bottom:3px solid #999999;
}
.wr-even {background:#222222;
        border-top:3px solid #cccccc;
        border-left:3px solid #cccccc;
        border-right:3px solid #666666;
        border-bottom:3px so
lid #666666;
}

now how about some rounded corners (it’s css3 so… sorry IE fans.
-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome, border-radius is css3 standard, since not all 3 browsers are supporting standard css3 yet, so it’s better to have them all)

.wr-odd { background:#444444;
          border-top:3px solid #cccccc;
          border-left:3px solid #cccccc;
          border-right:3px solid #999999;
          border-bottom:3px solid #999999;
          -moz-border-radius:10px;
          -webkit-border-radius:10px;
          border-radius:10px;
}
.wr-even {background:#222222;
          border-top:3px solid #cccccc;
          border-left:3px solid #cccccc;
          border-right:3px solid #666666;
          border-bottom:3px solid #666666;
          -moz-border-radius:10px;
          -webkit-border-radius:10px;
          border-radius:10px;
}

hmm how about rounded corner for those icons?

.wr-icon {
    border:2px solid #cccccc;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
 
}

hmm how about fonts, I just don’t like my theme default font for my widget

.wow-recruit-widget {
 
    font-family:verdana;
 
}

So I want different color for different spec text (1.2.2 I’ve made note has a class name corresponding to what you typed in the note, i.e. if you typed “Frost” in the note, the class of that note will be “wr-frost”)
*note Death Knight becomes DKnight here, class texts are now fully customizable in 1.2.x, so you can change to whatever you want

.wr-frost                       { color:#409FFF;}
.wr-blood                       { color:#FF4F4F;}
.wr-feraltank                   { color:#52B2A5;}
 
.wr-note                        {font-style:normal;}

Intermediate
So you do know some html and css, but maybe not much php, enough for colors and fonts as you probably know all of those already, since the outputs of this widget are all divs, we can do a lot more than that.

At this point I assume you should know and understand css syntax , so I will only post important style codes for each examples below

From here, a good text editor with syntax highlighting or even IDE with syntax checking will help big time.

Then you may want to work with a local wordpress installation before you put them onto your site.

And if you want to make rounded corner and box shadow work in IE, you may want to have a look at PIE , upload that to root folder of your server and add

behavior: url(/PIE.htc);

to your rounded classes, and it should work, but it sometimes break in IE 6 if coupled with other filters like png filters and definitely not work at 5.x ……. that is, if you care about those ancient technologies, believe me, your target audiences won’t be using that 2002 computer that came with those browsers

Ok let’s go back to our tute.

say you want something look like this, it looks like a big change? nah, it is still achievable by just editing a few classes!

.wr-item {
    display:block;
    float:left;
    width:90px;
    height:65px;
    padding:0px;
    margin:2px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-box-shadow: 3px 3px 3px #666; /* Firefox */
    -webkit-box-shadow: 3px 3px 3px #666; /* Safari, Chrome */
    box-shadow: 3px 3px 3px #666; /* CSS3 */
    background:#444444;
}
.wr-odd {
 
}
.wr-even {
 
}
.wr-left {
    display:block;
    float: left;
    width: 25px;
    height: 30px;
    text-align:center;
}
.wr-right {
    display:block;
    float:left;
    height:30px;
    width:50px;
    position:relative;
}
 
.wr-class-text {
    display:block;
    margin-left:5px;
    height:30px;
    line-height:15px;
    width:40px;
    margin-top:5px;
    /*position:absolute;
    top:0px;
    left:0px;*/
}
.wr-status {
    display:block;
    margin-left:5px;
    height:15px;
    line-height:15px;
    width:20px;
    position:absolute;
    top:45px;
    left:-25px;
}
.wr-note {
    display:inline-block;
    font-weight:normal;
    font-style:italic;
    color:#cee683;
    line-height:15px;
    width:30px;
    height:15px;
    margin-left:5px;
    position:absolute;
    top:30px;
    left:-25px;
}
 
.wr-icon {
    vertical-align:middle;
    width: 25px;
    height:25px;
    background:url(../../plugins/wow-recruit-widget/img/class-sprite.png);
 
}

so you want to change the icon? no worries
(note that css background resizing is very problematic, so it’s better not doing it, the work around is to resize .wr-icon class to fit the icon, or resize the icon image itself with paint or whatsoever, hot linking image is not a very good practice, unless it’s a very reliable source, code below is just an example)
note that here I’ve used .wr-icon.wr-deathknight, and removed background from .wr-icon, because if you only put background to .wr-deathknight, the background image will apply to class text block as well.

.wr-icon {
    vertical-align:middle;
    width:40px;
    height:40px;
    position:absolute;
    top:-10px;
    left:-10px;
    background-position:center;
    background-repeat: no-repeat;
}
.wr-icon.wr-deathknight { background-image:url(http://area52.wowstead.com/files/icons/favicon/classround/class_deathknight.png);}
 
.wr-icon.wr-druid   { background-image:url(http://area52.wowstead.com/files/icons/favicon/classround/class_druid.png);}
 
.wr-icon.wr-priest  { background-image:url(http://area52.wowstead.com/files/icons/favicon/classround/class_priest.png);}
.wr-icon.wr-rogue  { background-image:url(http://area52.wowstead.com/files/icons/favicon/classround/class_rogue.png);}

I just think status is not very necessary

.wr-status
{
    display:none;
}
 
.wr-item
{
    height:50px;
}

nope I changed my mind, I don’t want class text instead.

.wr-item
{
    height:40px;
}
 
.wr-status {
    display:block;
    margin-left:5px;
    height:15px;
    line-height:15px;
    width:20px;
   /*position:absolute;
    top:45px;
    left:-25px;*/
}
 
.wr-note {
    display:block;
    font-weight:normal;
    font-style:italic;
    color:#cee683;
    line-height:15px;
    width:30px;
    height:15px;
    margin-left:5px;
    /*position:absolute;
    top:30px;
    left:-25px;*/
}
 
.wr-class-text {
    display:none;
}

Hard Core
hey you are coder already what do you need me to teach you? you maybe better than me already

ok something more for you. that is, wordpress gives each widget a unique id, say your 10 man recruit widget is wow-recruit-widget-6 and 25 man one is wow-recruit-widget-9,
you can style individual widget with its own class by specifying css id, check your browser’s developer tool for the actual div id on the generated html

#wow-recruit-widget-6 .wow-recruit
{
    /*something something*/
}
 
#wow-recruit-widget-9 .wr-item
{
    /*something something*/
}

Conclusion
so you can pretty much break the whole layout and reconstruct as long as they are still having the same elements, or if you know jQuery or know how to use DOM model with other javascript libraries, you can even replace those elements with what you want. here I won’t say much about those, since if it requires so much code, it loses the point of plug in already.

at this point I have no plan to make a more graphical version for this widget, like with more icons instead of texts

hope this tutorial helps to customize your WOW Recruitment Widget, and maybe you’ve learnt some css here, if you like this article about css, feel free to leave a comment here or recommend to your friends

Oh yeah, share with me with your cool looking themes!

Have fun!

Appendix