Addon Spotlight: Create a simple bottom box with kgPanels
Addon Spotlight focuses on the backbone of the WoW gameplay experience: the user interface. Everything from bags to bars, buttons to DPS meters and beyond -- your addons folder will never be the same. This week, Addon Spotlight dishes out some configuration advice for one of the most popular addons around: kgPanels.
One of the tent-pole addons in the addon customization realm is kgPanels, a simple and incredibly versatile tool that allows users to create dynamic panel art and cosmetic accents to any user interface. The concepts may look tough to deal with, but in reality, the addon is simple to learn and offers endless possibilities. People have created some pretty impressive setups using kgPanels as the back end, and this article aims not only to get you interested in working with kgPanels but to understand how to create the simplest piece of the puzzle: the simple bottom box.
What is kgPanels?
People like to throw around the label of "Best. Addon. Ever," to a good number of addons. Recount, for instance, could be seen as one of the most functional and important addons WoW has ever seen. kgPanels is addon salt, bringing out the beauty, texture and flavor of every other addon that it touches. You can make your user interface pop with kgPanels, as either a tool to introduce some artistic elements into your UI or to separate addons using user-defined borders and boxes.
That's kgPanels in a nutshell. It's more of a utility than anything that can enhance your gameplay. But it is one of the most awesome and important utilities you could ever use.
The focus of this Addon Spotlight is to give you readers out there something to start with, much like how we did a very basic Power Auras set-up a little while ago. Readers seemed to very much enjoy the Power Auras discussion, and kgPanels seemed like the next best step. And yes, more Power Auras is coming. I promise.
Many readers emailed me asking how to do the most basic setup in kgPanels, asking for a simple box at the bottom of their screens that they can load addons into. I am happy to oblige. For those veteran UI designers out there and others who are very familiar with kgPanels, your help is always appreciated and needed in the comments. I know the readers and I greatly appreciate all the awesome discussion.
Creating the simple bottom box
For this exercise, I only had a few addons enabled. Only Chatter, Dominos, kgPanel and MoveAnything were enabled, allowing easy flexibility with no other addons hanging out in my way.
The first step, as usual, is to download and install kgPanels. Once you've done that, open up the addon using the text command /kgpanels config.
I am a fan of the profile system, if only to allow me easy access to different setups that I am working on at once. kgPanels, thankfully, has a simple system for layouts that can be turned on or off at will. The first thing I did was create a new layout to work with.
Layout
Think of the layout like the profile. This profile will contain panels that we will manipulate into whatever we want. Activate this layout by selecting Set as Active Layout when on the layout tab of the options. We will be working with just one simple panel, but it's still a good idea to have everything saved in its own layout.
Create the panel
Now that we are in the layout we have created, let's create the panel that will serve as the cosmetic "dock" for our addons at the bottom of the screen. Select Active Panels, and create your panel. Here, I've given the panel the name "BottomPanel" so that I know this is the main panel going on the bottom of the screen.
This is the panel that appears once created:
Resize the panel
The panel is now able to be moved, resized and manipulated. Position the panel in the bottom-left-hand corner of the screen, and drag it so that it expands across the entire bottom of your screen. It is that simple. Don't worry about the border yet. We will take care of that in a second. If you want to keep the border, by all means, do.
Removing the border is a simple exercise. I like the clean look without the border for this general exercise, so let's remove it. Under the panel's options, go to Texture Options > Border Texture > None.
With the border removed, we now see the panel taking shape. After the size of the panel is set and the border is either removed or changed, we can work on the color. I have discussed color at length in many of my columns, mostly because I feel that it can be the most important decision you make when dealing with your user interface. You need to find a color that will not hurt your eyes but be easy and neutral enough that the constant color changes around that panel will not clash.
Color selection
Color selection is easy. While under the BottomPanel tab, select BottomPanel > Color and Opacity Settings. Here, I have selected a dark grey color that is still just a bit transparent.
Finally, the last step is to lock the panel. This prevents you from accidentally resizing the panel or making changes to the layout while playing. Lock the panel thusly:
What is this business about intercepting mouse clicks? This option sets how the mouse interacts with kgPanels panels. I usually set my panels to not intercept mouse clicks, as I want the panel to be a cosmetic piece of the user interface. Currently, I do not use a lot of scripting with kgPanels, which is a more complex feature of the addon that is tied much more closely to the way the mouse interacts with the panels. For our sake, we do not need the mouse being intercepted by the panel.
So there you have it -- the simple bottom box kgPanel creation. Just for fun, I thought it would also be cool to show everyone how to make a seamlessly integrated chat addon into this setup. It's easy, fun and looks pretty clean and cool. Here's how to do it.
Clean chat integration
I used Chatter, but Prat and other chat addons have very, very similar options. The basics still apply, no matter which addon you use. First, I unlocked my Chatter chat box and moved the edit box (that's the bar that appears when you hit enter in which you input text) to free-floating. You can accomplish this in Chatter by going to the Edit Box Polish tab in the configuration menu. Second, position the chat window in the bottom-left-hand corner, over the kgPanel panel we created. A little bit of resizing may be necessary. Make sure to fit the top tabs just above the top of the panel, as they will disappear when not hovered over.
Third, remove the borders and backgrounds from Chatter, and the kgPanel will act as the chat box's background. You can accomplish this by going to Chatter's options > Borders/Background and unchecking Enable Borders/Background.
Here's the finished product:
Simple, elegant and limitless in its possibilities, kgPanels is the star of any cosmetic UI. Learn it and love it. Play around with it. Make a layout just for creating new, fun stuff. You'll be making awesome UI art and panels in no time!
Download kgPanels at [Curse] or [WoWInterface].
Addons are what we do on Addon Spotlight. If you're new to mods, Addons 101 will walk you through the basics; see what other players are doing at Reader UI of the Week. If there's a mod you think Addon Spotlight should take a look at, email mat@wow.com.
One of the tent-pole addons in the addon customization realm is kgPanels, a simple and incredibly versatile tool that allows users to create dynamic panel art and cosmetic accents to any user interface. The concepts may look tough to deal with, but in reality, the addon is simple to learn and offers endless possibilities. People have created some pretty impressive setups using kgPanels as the back end, and this article aims not only to get you interested in working with kgPanels but to understand how to create the simplest piece of the puzzle: the simple bottom box.
What is kgPanels?
People like to throw around the label of "Best. Addon. Ever," to a good number of addons. Recount, for instance, could be seen as one of the most functional and important addons WoW has ever seen. kgPanels is addon salt, bringing out the beauty, texture and flavor of every other addon that it touches. You can make your user interface pop with kgPanels, as either a tool to introduce some artistic elements into your UI or to separate addons using user-defined borders and boxes.
That's kgPanels in a nutshell. It's more of a utility than anything that can enhance your gameplay. But it is one of the most awesome and important utilities you could ever use.
The focus of this Addon Spotlight is to give you readers out there something to start with, much like how we did a very basic Power Auras set-up a little while ago. Readers seemed to very much enjoy the Power Auras discussion, and kgPanels seemed like the next best step. And yes, more Power Auras is coming. I promise.
Many readers emailed me asking how to do the most basic setup in kgPanels, asking for a simple box at the bottom of their screens that they can load addons into. I am happy to oblige. For those veteran UI designers out there and others who are very familiar with kgPanels, your help is always appreciated and needed in the comments. I know the readers and I greatly appreciate all the awesome discussion.
Creating the simple bottom box
For this exercise, I only had a few addons enabled. Only Chatter, Dominos, kgPanel and MoveAnything were enabled, allowing easy flexibility with no other addons hanging out in my way.
The first step, as usual, is to download and install kgPanels. Once you've done that, open up the addon using the text command /kgpanels config.
I am a fan of the profile system, if only to allow me easy access to different setups that I am working on at once. kgPanels, thankfully, has a simple system for layouts that can be turned on or off at will. The first thing I did was create a new layout to work with.
Layout
Think of the layout like the profile. This profile will contain panels that we will manipulate into whatever we want. Activate this layout by selecting Set as Active Layout when on the layout tab of the options. We will be working with just one simple panel, but it's still a good idea to have everything saved in its own layout.

Now that we are in the layout we have created, let's create the panel that will serve as the cosmetic "dock" for our addons at the bottom of the screen. Select Active Panels, and create your panel. Here, I've given the panel the name "BottomPanel" so that I know this is the main panel going on the bottom of the screen.


The panel is now able to be moved, resized and manipulated. Position the panel in the bottom-left-hand corner of the screen, and drag it so that it expands across the entire bottom of your screen. It is that simple. Don't worry about the border yet. We will take care of that in a second. If you want to keep the border, by all means, do.


Color selection
Color selection is easy. While under the BottomPanel tab, select BottomPanel > Color and Opacity Settings. Here, I have selected a dark grey color that is still just a bit transparent.


So there you have it -- the simple bottom box kgPanel creation. Just for fun, I thought it would also be cool to show everyone how to make a seamlessly integrated chat addon into this setup. It's easy, fun and looks pretty clean and cool. Here's how to do it.
Clean chat integration
I used Chatter, but Prat and other chat addons have very, very similar options. The basics still apply, no matter which addon you use. First, I unlocked my Chatter chat box and moved the edit box (that's the bar that appears when you hit enter in which you input text) to free-floating. You can accomplish this in Chatter by going to the Edit Box Polish tab in the configuration menu. Second, position the chat window in the bottom-left-hand corner, over the kgPanel panel we created. A little bit of resizing may be necessary. Make sure to fit the top tabs just above the top of the panel, as they will disappear when not hovered over.

Here's the finished product:

Download kgPanels at [Curse] or [WoWInterface].
Filed under: Add-Ons, AddOn Spotlight







Reader Comments (Page 1 of 2)
BurgerTea Aug 12th 2010 3:06PM
Oh nice, been waiting for a tutorial on this one for a while. Pro article!
Trilynne Aug 12th 2010 3:09PM
I think this addon might solve my desire for a pretty UI layout, rather than the rather spartan set up most raiders seem to run with... I just might delve into making a custom UI with this puppy! :o
Pyromelter Aug 12th 2010 3:15PM
serious raiders don't use spartanui.
Mutak Aug 12th 2010 3:22PM
/facepalm
A "spartan set up" means an unadorned, plain ui, no necessarily the particular ui named spartanui.
http://en.wiktionary.org/wiki/spartan
DarkSoul Aug 12th 2010 3:27PM
"Spartan" in this case isn't referring to the UI.
From Dictionary.com: "...sternly disciplined and rigorously simple, frugal, or austere."
ambermist Aug 12th 2010 3:28PM
I actually do use Spartan UI. I don't like the party frames, but since I don't display party frames in raid and prefer Grid, I can overlook that.
I'd prefer to build my own, though, I set out looking for an easy start to kgpanels a long time ago, this is exactly what I needed. Might be time for a change.
Falcon6 Aug 12th 2010 3:14PM
Ooo, I've been wanting to revamp my UI and I was thinking of finally looking into kgPanels. I may mess around with it later on.
Thanks for the quickie guide to getting started.
Cameltose Aug 12th 2010 3:19PM
Can anyone tell me the name of the addon that re-centers your Character to the visible screen area above the panel?
That was the only rhing i didn't care too much for after setting it up a few months ago.
feniks9174 Aug 12th 2010 3:23PM
I believe the one you're looking for is SunnArt.
Hoff Aug 12th 2010 4:08PM
You're looking for a viewport addon that actually changes the visible screen area.
I use CT Viewport personally
Tbah Aug 13th 2010 12:32AM
DragViewPort from Curse.com
Cyno01 Aug 12th 2010 3:24PM
From a quick skim of the article and looking at the screenshots, this is still just an overlay, correct?
I'm a big fan of viewport mods, specifically sunn viewport art, since it doesnt cover up any of your screen, it actually makes your screen smaller, moving the edges where you want, so addons are down in their own little world and not blocking everything. If you ALT+Z itll actually leave those bars there since its not even rendering those areas. I've heard it can help your framerate too since youre rendering less area.
A nice tidy UI with everything down at the bottom is always good, but not when your bars are covering your characters feet and you cant see the void zone youre standing in.
http://img509.imageshack.us/i/wowscrnshot042109001241.jpg/
feniks9174 Aug 12th 2010 3:45PM
Yes, kgpanels is just an overlay. I agree that, if you're just creating a bottom bar, SunnArt is likely to be the better way to go as it requires far less setup. However, it also doesn't give you the freedom that kgpanels has. SunnArt covers an entire edge of your screen and, unless you want to create custom textures with transperencies, there's nothing you can do to change it. kgpanels is far more useful when it comes to sectioning off aspects of your UI and shaping things the way you want.
It's all personal preference, though. I really hate having a huge bar containing all my AddOns across the bottom edge of the screen and prefer to have a smaller console floating like the one used in Shikuba's UI featured here a week or two ago. I keep my camera zoomed out far enough that I don't have a problem seeing fire/voids/etc at my feet.
Nipah Aug 12th 2010 7:38PM
I'm with feniks9174 on this one.
While I believe that Sunnart does some great things, I just didn't want an entire block of "CONTENT" taking up space on the bottom of my UI. Sure sure, I know it doesn't actually take up space, but its a giant block of solid crap that I didn't want sitting there.
I went with KGPanels and Stuf, and used a combination of lines, transparencies, and blocky unit frames to get what I wanted.
However, if people are happy using Sunnart, then by all means, keep on truckin'.
It just didn't really float my boat, so to speak.
feniks9174 Aug 12th 2010 3:35PM
My biggest complaint with kgpanels is that it's fairly intimidating to work with when you open it for the first time. There's also some clunky mechanics that I don't particularly like. The prime example would be how, when you add a new panel or layout, you need to enter the name, hit the "okay" button and -then- hit "Add". It's not a huge deal, just mildly annoying and feels fairly unnecessary. I would also like to see a more intuitive system for layering your panels and the ability to create panels that aren't just square/rectangle. Some rounds, oblongs or rounded rectangles would be quite handy for jazzing up an otherwise boring layout. Minimalist and simple =\= straight lines and right angles. Once you've gotten the hang of it, however, it's a breeze to work with.
Good article, though. I had a conversation in Vent with some guildies a few months back regarding UI setups and how they can affect your DPS/Healing/Tanking (I'm a believer *queue Monkeys song*). We traded some screenshots and when they saw mine I was immediately pelted with questions about how I made this, where I got that, etc. I introduced one of them to kgpanels but I'm not particularly good at explaining how to do things without being able to point at their screen and say "That, press that one right there". This will make a nice reference .
Nipah Aug 12th 2010 7:41PM
My main gripe was that, say for example, I was editing the size for Box#1, and I had every item minimized in the drop down section on the left. As soon as I make a change to anything in Box#1, it instantly decompresses the drop down list on the left, and I then have to go and click the little button so I can more easily access the next item to config.
... if that makes any sense. I'm talking about the drop down that looks like:
Box#1
Texture Options
Text Options
Scripts
Whenever it pops open, it annoys the crap out of me... mainly because once I set up the default style, I don't bother to mess with those options for the most part.
Nipah Aug 12th 2010 7:45PM
Also, because I reread your post again after posting, I want them to add the following (including your round / oblong /rounded rectangle ideas):
Angled lines.
There were plenty of times I wanted a line at say, 45 degrees, and I couldn't figure out how to do it...
Hell, I couldn't even get a reliable 1px solid border without making anywhere from 2-4 1px high or 1px wide rectangles.
Oni Stardust Aug 13th 2010 4:42AM
If you're willing to put in a little extra time, you could create round/angled/whatever panels in an image editor like Photoshop or Gimp and add them to KG Panels as textures. The end result would be the same.
This tutorial from the Power Auras Wiki tells you how to make transparent textures for both Power Auras and KG Panels: http://powerauras.wikispaces.com/Making+Custom+Artwork
And this video from Redmist explains how to get them into the game: http://www.youtube.com/watch?v=q1e72KLtnDo&feature=related
feniks9174 Aug 13th 2010 10:20AM
Yeah, making some custom panel textures with Photoshop was the next step in my own UI. I just need to get another copy of Photoshop since my "trial version" *coughcough*expired*coughcough*
I tried GIMP, by it's been years since I used it and I completely forgot what I was doing =p
Oni Stardust Aug 13th 2010 1:59PM
There are other free alternatives out there. Just a short Google search got me this list: http://sixrevisions.com/graphics-design/10-excellent-open-source-and-free-alternatives-to-photoshop/
Also, I've heard good things about Paint Tool Sai: http://sai.detstwo.com/sai/
Hope that helps.