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.