Blue Buttons: Making Your Interface look "Cool"

I recently posted a new "mod" that some folks on wowinterface.com are thoroughly enjoying. I hesitate to call it a mod, however, because there's no code, no AddOn to enable or disable, and the amount it interacts with the rest of the interface is minimal.

What is it? Blue Buttons.

Less of a mod and more of a skin, Blue Buttons simply provides a host of textures that skin the blizzard interface buttons to be a different color. I've long detested the "angsty red", as OarisJM posted, and liked the idea of changing the skin to be something different. I'd sifted through a handful of UI compilations at one point in search of a skin for the entire interface, but what I found were either incomplete panel skins or button skins that looked out of place against the rest of the UI textures.

So I set out with a simple goal: skin the in game interface buttons to be blue, like those found on the login screen. The solution is rather simple, and can be accomplished easily with just a few free tools. My version of the blue buttons is posted at the link above, ready for download, but what if you want the buttons to be green? or orange for cataclysm?

The following tutorial will show you how.

First, you'll need to download a few Programs:

• Custom UI ToolKit: This is Blizzard's own custom UI toolkit, although it's not so much a toolkit as a set of resource files. Once you download it, run the installer and tell it to install the interface art. You can have it install the interface data as well if you like, but those files are not necessary for this tutorial.
• BLP2PNG: Blizzard uses the file extension blp for it's textures, but this isn't an easily edited format, so to convert the files into something we'll be able to edit we need this command line software. It come in a zip file and doesn't need to be installed. Simply extract the folder to some place you can get to easily like your desktop. NOTE: If you are working on a system whose desktop does not reside on the hard drive(for instance if you are on a computer that is part of a domain and uses roaming profiles) you'll want to place this in a location on the hard drive like the root of your C: or system drive.
  
• Paint Shop Pro free trial: This is the software we'll use to change the color of the buttons. It is a paid program but offers a free 30 day trial. I personally own my copy and have found many miscellaneous uses for it over the years. If you have another photo editing suite that has a color changer tool you may be able to use it instead, just make sure it will change a range of color in a region and not only one contiguous shade.
  

Once you have all those things go to your WoW directory and you should find an interface art folder that the Custom UI Toolkit left for you.

Inside that folder open the BUTTONS folder and copy the file named UI-Panel-Button-Up.blp to the folder with the BLPConverter in it.

Next, right click a blank space in the same folder and create a new text file named whatever you like (for this one I use the file name 'topng' since this batch file will convert textures from the blp format to the editable png format). Open the text file and type in the following:

BLPCONVERTER -m UI-Panel-Button-Up.blp

Then save the file as a batch file. To do so, go to File -> Save As. In the save dialog box change the file type to all files and put the extension .bat at the end of the file name.

Once you've got the batch file in your BLP Converter folder double click it and it will briefly flash a command line window as it performs the conversion. Once the command line window disappears you should see a new file in your BLP Converter folder. This is the file we can now edit in Paint Shop Pro.

Next, open the new PNG file in Paint Shop Pro and use the scroll wheel to zoom in on it. Choose the color changer tool from the toolbox (if you can't find a color changer tool it shares a button with the bucket flood fill tool; mousover the bucket icon and click the arrow beside it to get a drop down and select the color changer tool).

Now, with the color changer tool selected you can click on the red background to change the color of the button. Make sure to set your foreground color on the upper right corner of the screen. The RGB values I use for the Blue Buttons are: red 38, green 66, blue 143. If you accidentally color the wrong section the key combination ctrl+z is a quick way to undo your last change. As a side note when editing the remaining textures later on, I came across a texture or two that didn't cooperate with the color changer tool as well. For these textures you may have to experiment with coloring different regions of the image to get the desired effect.

Feel free to play around with different colors but keep in mind that any text placed over the button will come up yellow, so if you use the wrong color you may not be able to see what the button actually says! Once you're satisfied with how your new button looks save the file.

The next step is to make another batch file just like the one above with one exception: change the .blp extension to .png so your new batch file should look like this:

BLPCONVERTER -m UI-Panel-Button-Up.png

I name this one 'toblp'. Regardless of what you name your batch file, make sure to get the old blp file out of the folder before you convert (to prevent corruption of the file) by either deleting it or, preferably, moving it to another folder for backup purposes.

That's it!

Now that you've successfully skinned the button you can add it to your interface. To do so, copy it it your WoW directory under Interface\Buttons. If the folder is not there go ahead and create it. What happens in game is that WoW loads and extracts all these textures from it's MPQ files to a hidden directory in Interface\Buttons. You can't see these directories, but while the game is loaded they are effectively there. By creating a skinned button with the same name and placing it in the same directory our skinned button takes precedence over the default textures. This works for any texture you can find in the interface art folder created by the Custom UI Toolkit.

OK, so I lied. That's not completely 'it'. There are actually a ton of files you would need to skin like above to get the desired effect on all the UI buttons. Conveniently enough, all of the buttons that you'd need to skin are located in the same Buttons folder in interface art:

CancelButton-Down.blp
CancelButton-Highlight.blp
CancelButton-Up.blp
UI-DialogBox-Button-Down.blp
UI-DialogBox-Button-Highlight.blp
UI-DialogBox-Button-Up.blp
UI-MinusButton-Down.blp
UI-MinusButton-Up.blp
UI-Panel-BiggerButton-Down.blp
UI-Panel-BiggerButton-Up.blp
UI-Panel-Button-Down.blp
UI-Panel-Button-Highlight.blp
UI-Panel-Button-Up.blp
UI-Panel-CollapseButton-Down.blp
UI-Panel-CollapseButton-Up.blp
UI-Panel-ExpandButton-Down.blp
UI-Panel-ExpandButton-Up.blp
UI-Panel-HideButton-Down.blp
UI-Panel-HideButton-Up.blp
UI-Panel-MinimizeButton-Down.blp
UI-Panel-MinimizeButton-Highlight.blp
UI-Panel-MinimizeButton-Up.blp
UI-Panel-QuestHideButton.blp
UI-Panel-SmallerButton-Down.blp
UI-Panel-SmallerButton-Up.blp
UI-PlusButton-Down.blp
UI-PlusButton-Hilight.blp
UI-PlusButton-Up.blp
UI-ScrollBar-ScrollDownButton-Highlight.blp
UI-ScrollBar-ScrollUpButton-Highlight.blp

Additionally, you'll need to edit your batch files (right click the batch file icon -> Edit) in order to convert the entirety of the files for skinning. You can add as many files as you want for skinning with the same batch file, simply tack another name on to the end of the line with a space in between each file name. For ease of conversion I'm including the full batch files i use below for your copy and pasting pleasure. Happy skinning!

toblp.bat

BLPCONVERTER -m CancelButton-Down.png CancelButton-Highlight.png CancelButton-Up.png UI-DialogBox-Button-Down.png UI-DialogBox-Button-Highlight.png UI-DialogBox-Button-Up.png UI-MinusButton-Down.png UI-MinusButton-Up.png UI-Panel-BiggerButton-Down.png UI-Panel-BiggerButton-Up.png UI-Panel-Button-Down.png UI-Panel-Button-Highlight.png UI-Panel-Button-Up.png UI-Panel-CollapseButton-Down.png UI-Panel-CollapseButton-Up.png UI-Panel-ExpandButton-Down.png UI-Panel-ExpandButton-Up.png UI-Panel-HideButton-Down.png UI-Panel-HideButton-Up.png UI-Panel-MinimizeButton-Down.png UI-Panel-MinimizeButton-Highlight.png UI-Panel-MinimizeButton-Up.png UI-Panel-QuestHideButton.png UI-Panel-SmallerButton-Down.png UI-Panel-SmallerButton-Up.png UI-PlusButton-Down.png UI-PlusButton-Hilight.png UI-PlusButton-Up.png UI-ScrollBar-ScrollDownButton-Highlight.png UI-ScrollBar-ScrollUpButton-Highlight.png

topng.bat

BLPCONVERTER -m CancelButton-Down.blp CancelButton-Highlight.blp CancelButton-Up.blp UI-DialogBox-Button-Down.blp UI-DialogBox-Button-Highlight.blp UI-DialogBox-Button-Up.blp UI-MinusButton-Down.blp UI-MinusButton-Up.blp UI-Panel-BiggerButton-Down.blp UI-Panel-BiggerButton-Up.blp UI-Panel-Button-Down.blp UI-Panel-Button-Highlight.blp UI-Panel-Button-Up.blp UI-Panel-CollapseButton-Down.blp UI-Panel-CollapseButton-Up.blp UI-Panel-ExpandButton-Down.blp UI-Panel-ExpandButton-Up.blp UI-Panel-HideButton-Down.blp UI-Panel-HideButton-Up.blp UI-Panel-MinimizeButton-Down.blp UI-Panel-MinimizeButton-Highlight.blp UI-Panel-MinimizeButton-Up.blp UI-Panel-QuestHideButton.blp UI-Panel-SmallerButton-Down.blp UI-Panel-SmallerButton-Up.blp UI-PlusButton-Down.blp UI-PlusButton-Hilight.blp UI-PlusButton-Up.blp UI-ScrollBar-ScrollDownButton-Highlight.blp UI-ScrollBar-ScrollUpButton-Highlight.blp