The ability to customize your UI is one of the great breakthroughs that WoW has made for players. While some like a WoW-centric approach, only adding a convenient add-on as needed, others like to completely re-work their entire UI from top to bottom, transforming it into a work of art. kgPanels can do wonders in term of personalizing your UI–but first you have to master it!
Many of the menus and terms can be confusing the first time you open up the add-on in-game; however, with a few pointers and a desire to learn, you too can master the mystery of paneling.
What is It?
kgPanels is, in a sentence, an add-on that allows the user to import custom textures into the user interface of World of Warcraft. In English, that means if you have a piece of digital artwork that you’d like to put to work in creating your UI, kgPanels is a perfect way to do it.
Most uses for kgPanels are rather mundane–adding borders and creating backgrounds for text-based UI elements–however, these elements can often help unify your UI with a common thematic scheme. I’ve often used it just to have something fun or to delineate a “space” of my UI for a certain function.
For example, in this screenshot, panels have been matched between the chat panel, raid layout, raid status, and “button bin.”
Getting Your Image Ready
There are some restrictions on the image(s) that you can use with kgPanels. However, with some slight modifications, almost any image you can imagine or find can be formatted correctly for use in your UI. I personally use paint.net to convert my files and do any cropping, texture mapping, etc. However, if you have a better program, such as Adobe Photoshop or GIMP and know how to use it, feel free to do your editing with what you know!
- Image size (height and width) must be a power of 2, with max file dimensions being 512 x 512. You can use any combination of measurements, so long as both are a power of 2, and you do not exceed the maximum height or width. For example, a file that is 128 x 64 is perfectly feasible.
- File must be saved as a .tga extension. No getting around this one!
- File must be saved in the World of Warcraft folder… somewhere. I personally save all of my texture files at WorldofWarcraft\Interface\Addons\Textures. Just make sure you remember where you have the file saved, and the name of the file you wish to import, or you’ll cause yourself a headache later.
The first thing you’ll want to do is access kgPanels, either by LBD or by typing /kgpanels config. This will bring up the options panel where all your work will take place. The second thing you must do is create a new layout. Without a layout, you cannot manipulate the textures you import. For this demonstration, I have created a new layout called New. Go to Layouts type the name of your layout and click Okay.
Then, go to [Layout Name] and click activate.
Your layout will be used across all characters unless you create separate layouts and profiles. When I created the new layout for this demonstration, it produced a string of .lua errors; however, a simple /console reloadui cleared up the issue, and I had no further issues.
Next, you’ll want to import any textures you’d like to use by going to Art Library. Don’t worry, you can always add more later, but if you do it in bulk, you can save yourself some typing by copying/pasting your file extension.
2. Type in the name of your texture and click Okay. I suggest naming your texture based on its look, not its intended use. For example, solid black or blue flame.
3. Enter the path of your file name. While the name of your folders may differ, you MUST follow the same format, or you will not be able to access your file. As stated above, my textures are saved to WorldofWarcraft\Interface\Addons\Textures; however, when entering the location to kgPanels, it must be in the following format: \\Interface\\Addons\\Textures\\filename.tga. Remember to click Okay.
You can view your uploaded backgrounds and borders at any time under the Backgrounds and Borders menus. Clicking on the name of the texture will show you the file extension, as well as a preview of the saved texture. If there is not a preview available, then kgPanels cannot find the texture!
You can also set-up default panel options, which will load any new panels in the exact same way every time. I personally don’t use this option, and until you become more familiar with your needs, I wouldn’t suggest setting it up.
I am going to show you how to create two panels, both of which will serve a background function in a UI. The first is a chat panel background, and the second will be an “attached” panel which only appears when an add-on is shown in your UI.
Creating a panel, adding a texture, adding/removing the border, configuring size, opacity
First, go to Active Panels in the kgPanels menu. I generally name my panels based on their function, but you can be creative as you want–enter a name for you new panel, click Okay, then click Create. For this example, I named my panel Chat Panel.
Now you should see a new sub-menu under Active Panels titled [name of panel]. You can extend the options for a panel by clicking the [+] next to the panel name. This will allow you to see the sub-menus: Texture Options, Text Options, and Scripts. Click on Texture Options to begin modifying your panel. By default any new panel will be created centered on you screen. You will need to move the kgPanels configuration menu to “grab it” and move it by mouse.
By default your panel will look like this. However, under the Active Panels: Texture Options you can change the texture (art) and border.
For our customized chat panel, I have selected Blizzard Dialog Background (a built-in texture — does not require loading an art file). Because I want the chat box to be on the left, and it to have a gradient from left to right, I am also going to click the “flip horizontally” option.
Scrolling down on the menu, you can also change the border of your panel. I do not like borders on my chat boxes, so I select “None” from the drop-down menu.
Next, we return to the Chat Panel menu. Here, I can choose the colors and gradients for my texture.
My panel opacity remains at 100%; however, I darkened the Background Color to black (by click on the color box next to the drop-down menu). On the next line, I changed the Background Gradient Style to Horizontal, and lightened the color, creating a dark–>light effect.
Now, to place my panel. You can either manually move the panel with your mouse, as well as resize the panel by dragging on the bottom right-hand corner. You can also take tighter control by manually entering the dimensions of the panel (height and width) as well as placement of the panel on the X and Y axis.
To finish, at the top of the Chat Panel menu is a check-box to lock your frame in place. You will want to do this with every frame; otherwise, when you hover over the panel, it will block any click-through as well as become highlighted in blue.
And there you have it–a customized chat panel box which fits perfectly into my UI.
Attached Panel (or the magical disappearing/reappearing panel)
Some elements of your UI can be made to appear or disappear depending on conditionals, such as combat, text information, or targeting. A good example is when you target a player or NPC. Until they are targeted, the UI element is not visible on your screen, but as soon as you target an object in-game, you get a Target. Many popular add-ons, such as Recount, Eavesdrop, Skada and Omen also have options to only show when in or out of combat. If you want your texture to be visible only when that UI element is also visible, you will have to attach your panel to that UI element through kgPanels.
For this example, I am going to attach a background with border to Eavesdrop, a combat log replacement. By default, Eavesdrop is visible at all times, but it does have an option to fade, which I like to utilize.
To attach a panel to Eavesdrop, I first must discover the UI name of the add-on. To do this, I run a script that will publish the name into my chat frame. While my mouse is hovering over Eavesdrop, I type the following into my chat-box: /script ChatFrame1:AddMessage(GetMouseFocus():GetName())
When I press Enter, I get a message in my chat-box informing me that EavesDropFrame is the name of the UI element.
Now, we can create our panel. Follow the steps above to create a New Panel. I named my new panel Eavesdrop. For this panel, I decided to use the same texture as my panel (Blizzard Dialog Background) as well as a border I named thin border.
I dropped the opacity of the texture to approximately 25% and recolored my border to gray leaving the other settings on default.
Next, I attach my panel to Eavesdrop. This is located under the Eavesdrop option menu as well. Simply scroll to the bottom of the menu.
By default the Parent and Anchor Frame will be set to UIParent, Anchor From and Anchor To will be set to Center. Since I want the panel to mimic the behavior of Eavesdrop, I set the Parent and Anchor Frame to EavesDropFrame. Make sure that you press Okay after each entry. I set the Anchor From and Anchor To to Top Left so that the frame would stretch in one direction as I increased the size of the panel.
My panel is now attached to Eavesdrop, so I need to change the settings of the add-on to fade.
Each add-on will have these settings in a different location, or by a different name. For example, when setting up Recount, you can choose to hide when in combat.
Here is the completed panel with Eavesdrop active
When the text fades (as specified by the add-on) the panel will fade as well, leaving a clean and open space.
kgPanels, like many new add-ons, can seem a bit overwhelming. However, I hope this guide has given you a good idea of the capabilities and basic functions of kgPanels, as well as the tools to import your own textures and create your own space within the game. I also thought I’d mention, that for ease of use, I have saved my script for identifying UI elements as a general-macro, which makes it easy to copy/paste when I need it.
Wishing you luck on any future UI modifications and projects!