Edit: 2009 / 10 / 30 - Changed image host to Tinypic.
Creating a basic addon, by Undertaker <Immersion> @ Al'Akir EU.
This seriously took me like 3-4 hours to write, so hope you find it a little useful. If you got any questions, PM me or ask here, whatever floats your boat. Oh by the way, I only posted it on Mmo-champion.
Addons Required:
Align
ButtonFacade
ButtonFacade_Caith
Buffalo
Dominos or Bartender4
SharedMedia
Lib: SharedMedia-2.0 \ 3.0
kgPanels
MinimapButtonBag
Pitbull 3.0
SexyMap
SLDataText
- Creating the Border in Photoshop -
Before I start everything I'm going to go ahead and create the borders I'm going to use for this tutorial.
Create a new document in 128x16 pixels @ 72 dpi.
As far as I know, .tga files cannot handle transparency without the use of Alpha channels, so you cannot leave out empty space. WoW Is simply going to replace the transparency with the color white.
I made mine very very simple for the purpose of this tutorial.
(zoomed in)
Once you're happy with the looks of your border texture, go to File > Save As > border.tga (or whatever you wish to call it, but be sure you remember it at least)
Place border.tga inside "World of Warcraft\texture\border.tga" Create the folder texture if you don't already have it. Now all of our work is going to be inside of WoW and you can close down Photoshop.
- Introduction -
Once you log in it's most likely going to be very confusing to tell the difference between each addon being spread out across the screen, but it's going to be easier as we go.
- Starting the mess -
At first I suggest starting with your buttons. Each class need more buttons than others, so it might be a good to get a general idea of how large in height your Ui is going to be.
To load ui Dominos, simply type "/dominos" In this tutorial I'll be using 2 sets of bars, so once inside Dominos press the "Configure Bars" button.
As I mentioned before I don't need bar 3 to 10 so I'm going to hide them. To hide bars press the Middle Mouse Button or Shift + Right click.
Most people use Shift+B to open up all bags at once, so I don't need to see the bags infront of me, so I'm going to hide the bags along with Menu frame, Cast, Pet, Vehicle, XP Bar and Class.
I usually place them in a corner somewhere where they don't bother me as much.
--------------------------
Now (while still having dominos configure up) we're going to type "/align" in the chat. Use the red line to determine the middle of your screen and position the bars accordingly. Try not to put them too low on the screen.
Once you've positioned the bars, type "/align" in the chat again to remove all the lines.
- Button Textures -
Now that we have our bars in place we're going to add textures to our action bars. To do this type "/buttonfacade" in the chat. In buttonfacade you're able to add different textures to different addons, but to keep it as clean as possible, press the main tab and select Caith, or any other you've chosen.
The gloss slider does exactly what you think it does, it adds glossiness to your buttons, but personally I never go above 40%. The caith texture will be applied to Buffalo as well as any other addon you've got that uses buttons, oPie etc.
- kgPanels -
Now that we have the textures and buttons in place we're going to start working with kgPanels. Start by typing "/kgpanels config" in the chat.
First we're going to add the border we created into kgPanels. To do this we head over to the Art Library tab. Once inside we need to determine whether it's going to be a background texture or a border, and obviously it's going to be a border. So on the right hand side, be sure that "Border" is selected.
Now we need to apply a name to our border, it really doesn't matter what you call it, but it makes it easyer to select later on. So I'm going to call it: MyBorder. Once you've typed the name in, be sure to press Enter or the "Okay" button.
Next kgPanels need to be able to know what border to look for. We created a folder called "texture" so we're going to direct kgpanels to that folder. This does not mean you type "C:\Program\World of Warcraft\texture\border.tga", kgPanels already know we're playing WoW so go ahead and type "\\texture\border.tga" adding "\\" tells Kgpanels to look inside the WoW folder. Press "Okay -> Add"
If you've done this correctly you should be able to see the texture listed in the Border category.
Now, in order to be able to add any panels to the game you first need to create a layout. To do this, go to "General Options -> Layouts" within kgPanels. Name it whatever you want and be sure to press Enter or the "okay" button.
- The panels -
Now that we've added the texture and created the layout, we're free to create our panels. You do this within the "Active Panels" tab. I'm first going to create the border for my buttons, so I'll name this panel "Buttons" Press "Okay -> Create"
Now in the background you should notice that we added our first panel, it doesn't look pretty so it's time to change the looks of it.
Head over to the Active Panels > Buttons
In here we have all our settings for this specific panel. We'll start by adding our border texture to this panel. To do this we need to head over to "Active Panels > Buttons > Texture Options". Here you will find all options that is relevant to textures. Background texture, border texture etc.
If we scroll down, there's a section called "Border Texture". Here there's a tab where we need to locate the border we wish to use. As before I called my border "MyBorder".
The "Border Edge Size" controls the size of your border, personally 16 was a little large so I changed mine to 14. Remember to press Enter if you do not use the slider. Also, change all the "Background Insets" to 0
Now you're going to notice that there's a transparent (see through) hole in the middle of the panel, to change this we need to head over to the main settings, which is inside "Active Panels > Buttons". In here we control most settings for this panel such as size and location on the screen.
To fill out the empty space we need to modify the transparency of the background. In the section called "Color and Opacity Settings" we need to set the "Background Color Style" to Solid. Press the small square to your right and select pure black by dragging the slider all the way down. To the right of color is transparency, this controls the amount you can see through, put this to a 100% (100% visibility).
If you are like me and don't like to have it completely black and white, you can change "Background Color Blending" to Blend and change the opacity of the Border Color to 50% as well as Background Color to 50% opacity.
There's still going to be a hole in the middle, but this is barely going to be visible once we attach them to our bars
Now move down your panel and position them
Go ahead and scroll up and press "Lock Panel"
- Minimap Border -
Now we're going to add a border to our minimap, though we have this blue circle around it to remove first. Right click the minimap to bring up the options.
Select the SexyMap tab and on "Select Preset to Load" select "Simple Square".
Go down to the "Borders" tab and un check Enable in "Borders > Bakground \ edge"
Since SLDataText already offers most of what is displayed on a minimap, we can go over to the "buttons" tab and set everything to but Battleground icons to Never. As well as "Zone Button > Never" go ahead and close down SexyMap.
Now we need to go back to kgPanels, and as always "/kgpanels config". We need to create a new panel for the minimap, but luckily we don't need to redo everything. Go ahead and name your panel to something relevant, like "Minimap".
kgPanel offer you to copy specific or all settings from a certain panel to your current panel, you can find this at the top of the "Minimap" settings. Be sure to press Paste.
Since we copied all settings it also copied the location coordinates of the buttons panel, so it's going to be located on top of the existing one, simply drag it away. Change the size of the panel to a moderate sized square, position it over the minimap and tweak it. Then lock the panel.
Now you can go ahead and move the green, red and blue squares and position it as you like, I personally prefer them in level with the minimap. (Green = Buffs, Red = Debuffs, Blue = Weapon Enchantment)
Close buffalo by typing "/buffalo lock"
- SLData Text -
Some people prefer having their dedicated panel for the statblock \ sldata so we're going to create one very easy. Same as before, Create a new panel (I named mine SLDT) and copy all settings from Buttons.
I positioned my panel at the bottom like this:
Now the problem with transparency now is that we got nothing that hides the empty space, as the minimap and action bars did, so we have two options (let me know if there's anything simpler).
A) We can increase the background opacity to 80-100%
B) We create a new panel with no border, simply a black "box" with the same opacity as the black inner border.
But since I'm an incredibly awesome slacker I'm just going to increase the background opacity. Lock your panels.
Now we're going to put the important Sldt text into our panel we created, so type "/sldt" un check the "lock elements". Move the ones you like down and remove the other ones. Note that some of them are added ontop of the minimap automatically.
If you don't want "FPS" and such to be colored in class color, you can change it in Global Options.
- Unit Frames -
Time for lovely pitbull to be configured. It has loads of options and might be very confusing, though all this was simplified in Pitbull 4.0. Sadly enough, I can't work with it cause it was too simplified. Yup.
Anyways, "/pitbull" to get all the options. In Modules you can remove "internal addons" to pitbull. Since we're already using eCastingBar we can remove "Cast Bar". Note that 3D Portrait is also inside here, so if you wish to use it, enable it. I also don't want CombatText and Visual Heal.
If you're using ora2 you really don't need main tank, main tank assist and all that other crap, so select them individually and check the "Disable" check box. We're using Grid so we don't need Raid either. Personally I don't care about Party Targets or Party pets as well as Pet Target either.
Now all of a sudden pitbull starts to look more manageable and less confusing. If you want to re-enable something you can find it inside "Extra Units".
To make our life easier we're mostly going to work inside "All Units" and change the individual parts later. Go to: "All Units > Bars > Blank Space" and Enable it. You can change the height to about 3 or 4. Go to the main Pitbull tab and you'll find one option. Configuration Mode. Set it to Solo.
Now it all varies from person to person but I never really cared about seeing the buffs on the player bar, so I'm going to remove it. Head over to: "Player > Other > Auras > Enable" and deselect Buffs and Debuffs \ Weapon Buffs.
I'm assuming you know what class you're playing and your name, we can remove that text too. Head over to: "Player > Text > Class" and disable it, as well as "Player > Text > Name.
This also varies from player to player, but I personally can't stand having my name \ mana \ hp on top of the designated frames as it takes up space, this is where the Blank Space we enabled earlier comes in handy. Since pitbull uses Dogtag we can make our own text strings. So we can Disable Health and Power.
Now we'll create our own text string to show both HP and Mana in one piece, this makes it easier to position. Go to: "Player > Text > Other" and you can type in the name for your new panel, I chose "Hp\Mana" and press enter.
Now "hp\mana" is listed with all the other text fields available to us. I want to position my text in the blank space, to the right. So this is easily done here.
Now it's in position, but pitbull doesnt know what the text should display. It literally displays hp\mana. Dogtag is very easy to learn, you can get lots of strings by pressing "DogTag Help".
Where it says Style - Custom is where we add our string. Type: "[HP] | [MP]". We add the "|" to simply add some space between the HP and the Mana. Pitbull will try to simplify it by doing [HP MP] but this will display it together.
Time to change the texture of Pitbull. SharedMedia offers loads of textures to choose from, and you can find them all in: Pitbull > Global Settings. Just at the bottom you can scroll through the one you like the most. I'll choose Glamour7.
Now there are a few things I need to change.
as you can see my buffs and debuffs are positioned downwards, we'll change so they go upwards instead.
Target > Other > Auras > Layout. Change growth direction to up and side to top.
For the sake of looks later on, I'm going to disable some of the icons I dont need. Raid icon, Voice, Leader, Master Looter etc. So if you don't wish to have these like me, go to All Units > Icons. I kept Combat.
Since I didn't include my name on my player frame, I got some space to the left which I can use for these icons. Player > Icons > Combat, and set it to Blank Space - Left.
Change the Width of Target's Target and remove auras from it. (Target's Target > Other > Size)
Also, change the width of Player and Target so you get something that has the same amount of space between the action bars and the unit frames. Like this.
Now go ahead and Disable Configuration mode (Pitbull > Configuration mode > Disable) and Lock pitbull (Pitbull > global settings > Locked)
If you want to move some of the text from the target frame to the blank space, you should know how to by now.
- KgPanels, Player, Target, Anchoring -
Now we're going to create panels for the player and target frame. The problem with target frame is obvious. We're not always targeting someone or something, so we need the panel to disappear if we're not targeting anything. This is done by parenting frames.
Go ahead and create a new panel with the name "Player". Copy All from Buttons and move it into place, very simple.
Now that we've made it fit with the player frame, the target frame will use the same dimensions. So it's going to be very easy for us. Make a new panel named "Target" and copy all from Player. Sometimes, as in my case it refuse to copy, simply type "/rl" and do it again.
Lock the panel once it's in place. Now we need to figure out what the target frame is called, so that we can parent the panel to the frame. Do this by using this macro. "/run ChatFrame1:AddMessage(GetMouseFocus():GetName())" while your mouse is hovering over the target frame. My target frame is called: "PitBullUnitFrame3". Remember that you need to copy EXACTLY what it says, including capital letters.
At the absolute bottom of Target are two options. Anchor and Parent. Anchor decides the position, if you move the target frame, it will move with. The Parent frame follows whatever action happens. Shown, Hidden etc.
So set the Parent to "PitBullUnitFrame3" or whatever yours was, be sure to press Okay. You don't need to anchor this frame unless you're planning on moving your target frame constantly.
For casting bar, omen, recount and any other addon, same rules apply.
-----
After lots of requests for the panels, here they are.
http://www.megaupload.com/?d=JA3AOI6G
I don't have time to make an entire UI using the panels, so you will have to make use of the tutorial on page 1 to make the setup.
-------------------
Place left.tga and right.tga into your "C:\Program\World of Warcraft\texture\" folder
Add the textures to kgpanels, position them, and use whatever Actionbar mod to position the buttons in place.