Introduction [TOC]
Hi,
I wanted to share my DBT-Template, because I've struggled so much with configuring it to my liking and I know a lot of other people have as well. I've finally been able to find a solution that doesn't rely on "perfectly-sized-textures-with-correct-alpha-channels" or whatever and this seems like a good place to share it, since this is one of the posts I found while googling for solutions. Despite it being a bit old, atleast it's not from 2009 like all the others.
Contents:
- Introduction
- Description
- Configuration
- - Icon border
- - Bar size
- - Name and timer text
- "The Code"
Description [TOC]
What I did to create borders was to create new frames and use the backdrop property to make a border (using edgeFile attribute) and then anchoring the frame to the relevant element (bar, icon1, icon2). You'll still need a frameborder texture, and the one I'm using is touchymcfeel's touchy-white.tga from his texture pack Touchy's Media (you can find it at curse). Make sure you copy it to DBM-StatusBarTimers folder and rename it frameborder.tga. I would not recommend other "fancy" border textures (like Roth), since this template is made with solid-color pixel perfect borders in mind, and I haven't really tested other borders, so I can't guarantee they'll produce good results.
Creating borders this way makes it really easy to resize the bars (and icon), and even the size of the borders. You'll have pixel perfect borders (as long as you use scale 1) at any size or position.
I believe you could even use scale, but then you'd have to edit the border sizes in the DBT-Template to the result of this equation:
desiredBorderSize / scale
Personally, I just wanted a simple clean looking bar with a 1px border, but while I was at it, I figured I'd make it more advanced and make icon borders and a reliable way to resize the bar to make the good ol' Damia's look that so many people really like (for some reason), just for the fun and challenge of it. :P
I've posted my current config at the bottom. I've tried to document it somewhat, to make it easier for people to edit and tweak themselves, but I'll go ahead and tell you how to get the Damia's layout anyway.
I highly recommend using a text editor with syntax highlighting (like Notepad++) or you're bound to get lost and fuck shit up.
Configuration [TOC]
First of all, set the "Bar Height" option in-game to the size you want for the icon (not the bar). Let's say 30
Also set offset to your liking. Let's say 2
- Icon border [TOC]
Since I don't use icons in my layout (and I couldn't find a way to hide borders when you hide icons), we'll have to enable the icon borders by uncommenting the icon border code for the icon we want. This is a little annoying, honestly, because XML doesn't support nested comments.
You'll have to remove the spaces in the comment tags (<!- -) and (- ->) for all the comments.
Like this:
Code:
<!-- START OF ICON1 COMMENT BLOCK
XML doesn't support nested comments, so remove the space in the comment tags (<- -) (- ->) so shit doesn't break, if you're using this code.
The elusive icon border for Icon1 (Left) -->
<Frame frameStrata="MEDIUM">
<Size>
<AbsDimension x="20" y="20"/>
</Size>
<Backdrop edgeFile="Interface\AddOns\DBM-StatusBarTimers\frameborder">
<EdgeSize val="1"/> <!-- Border Size -->
<BorderColor r="0" g="0" b="0"/> <!-- Change border color. Requires texture with color (like touchy-white). Will be ignored with touchy-black. -->
</Backdrop>
<Anchors>
<Anchor point="TOPRIGHT" relativePoint="TOPRIGHT" relativeKey="$parent.Bar.icon1"> <!-- Don't touch this -->
<Offset>
<AbsDimension x="0" y="0"/>
</Offset>
</Anchor>
<Anchor point="BOTTOMLEFT" relativePoint="BOTTOMLEFT" relativeKey="$parent.Bar.icon1"> <!-- Don't touch this -->
<Offset>
<AbsDimension x="0" y="0"/>
</Offset>
</Anchor>
</Anchors>
</Frame>
<!-- END OF ICON1 COMMENT BLOCK -->
If you get an error when testing bars in-game, you've missed a comment.
- Bar size [TOC]
Next, we resize the bar to our liking. This is done with the anchor properties inside the StatusBar element.
Let's say we want the bar to be 14 pixels. Since we've set the bar height in-game to be 30, we'd have to reduce the bar size by 16 pixels.
Set <AbsDimension x="0" y="0"/> to <AbsDimension x="0" y="-16"/> for the "TOPRIGHT" anchor point inside the StatusBar element
Like this:
Code:
<Anchor point="TOPRIGHT" relativePoint="TOPRIGHT">
<Offset>
<AbsDimension x="0" y="-16"/> <!-- These values will resize bar from right (x) and top (y). Negative values to shrink. -->
</Offset>
</Anchor>
- Name and timer text [TOC]
Then we change the position of the name text and timer text.
This is done with the Anchor properties in the FontString elements inside the <Layer level="OVERLAY"> property.
Set <Anchor point="RIGHT" relativePoint="RIGHT"> to <Anchor point="BOTTOMRIGHT" relativePoint="TOPRIGHT"> for the <FontString name=$parentTimer ...> element.
and <Anchor point="LEFT" relativePoint="LEFT"> to <Anchor point="BOTTOMLEFT" relativePoint="TOPLEFT"> for the <FontString name=$parentName ...> element.
Like this:
Code:
<FontString name="$parentTimer" inherits="GameFontHighlightSmall" text="">
<Anchors>
<Anchor point="BOTTOMRIGHT" relativePoint="TOPRIGHT"> <!-- Relative position of timer. point="BOTTOMRIGHT" relativePoint="TOPRIGHT" will place the timer above the bar on the right side. Just make sure you either shrink the bar, or increase the vertical (y) offset in-game, or it will overlap with other bars. (Unless you don't want it outside the bar, of course! ) -->
<Offset>
<AbsDimension x="-1" y="3"/> <!-- Adjust position of timer -->
</Offset>
</Anchor>
Code:
<FontString name="$parentName" inherits="GameFontHighlightSmall" justifyH="LEFT" text="">
<Anchors>
<Anchor point="BOTTOMLEFT" relativePoint="TOPLEFT"> <!-- Relative position of name text -->
<Offset>
<AbsDimension x="7" y="3"/> <!-- Adjust position of name -->
</Offset>
</Anchor>
You can also play with the offsets to adjust the position.
And there you go. A perfect Damia's layout, which can be easily configured.
"The Code" [TOC]
NOTE: Since I can't post links I had to remove the first line at the top, which contains libraries or whatnot, so don't overwrite it.
Code:
<Frame name="DBTBarTemplate" virtual="true" frameStrata="MEDIUM" topLevel="true">
<Size>
<AbsDimension x="195" y="20"/>
</Size>
<Frames>
<StatusBar name="$parentBar" frameStrata="LOW" parentKey="Bar">
<Size>
<AbsDimension x="195" y="20"/>
</Size>
<Anchors>
<Anchor point="TOPRIGHT" relativePoint="TOPRIGHT">
<Offset>
<AbsDimension x="0" y="0"/> <!-- These values will resize bar from right (x) and top (y). Negative values to shrink. -->
</Offset>
</Anchor>
<Anchor point="BOTTOMLEFT" relativePoint="BOTTOMLEFT">
<Offset>
<AbsDimension x="0" y="0"/> <!-- These values will resize bar from left (x) and bottom (y). Positive values to shrink. -->
</Offset>
</Anchor>
</Anchors>
<Layers>
<Layer level="BACKGROUND">
<Texture name="$parentBackground">
<Color r="0" g="0" b="0" a="0.5"/> <!-- Background color and alpha. duh! -->
</Texture>
</Layer>
<Layer level="OVERLAY">
<Texture name="$parentSpark" file="Interface\AddOns\DBM-Core\textures\Spark.blp" alphaMode="ADD"> <!-- Silly spark can be disabled with options in-game, so fuck this. -->
<Size>
<AbsDimension x="32" y="64"/>
</Size>
<Anchors>
<Anchor point="CENTER">
<Offset>
<AbsDimension x="0" y="0"/>
</Offset>
</Anchor>
</Anchors>
</Texture>
<FontString name="$parentTimer" inherits="GameFontHighlightSmall" text="">
<Anchors>
<Anchor point="RIGHT" relativePoint="RIGHT"> <!-- Relative position of timer. point="BOTTOMRIGHT" relativePoint="TOPRIGHT" will place the timer above the bar on the right side. Just make sure you either shrink the bar, or increase the vertical (y) offset in-game, or it will overlap with other bars. (Unless you don't want it outside the bar, of course! ) -->
<Offset>
<AbsDimension x="-1" y="0.5"/> <!-- Adjust position of timer -->
</Offset>
</Anchor>
</Anchors>
<Shadow>
<Color r="0" g="0" b="0" a="0"/>
</Shadow>
</FontString>
<FontString name="$parentName" inherits="GameFontHighlightSmall" justifyH="LEFT" text="">
<Anchors>
<Anchor point="LEFT" relativePoint="LEFT"> <!-- Relative position of name text -->
<Offset>
<AbsDimension x="7" y="0.5"/> <!-- Adjust position of name -->
</Offset>
</Anchor>
<Anchor point="RIGHT" relativeTo="$parentTimer" relativePoint="LEFT"> <!-- I believe this is to prevent name text and timer from overlapping or some shit -->
<Offset>
<AbsDimension x="-7" y="0"/>
</Offset>
</Anchor>
</Anchors>
<Shadow>
<Color r="0" g="0" b="0" a="0"/>
</Shadow>
</FontString>
<Texture name="$parentIcon1" parentKey="icon1"> <!-- The notorious icon -->
<Size>
<AbsDimension x="20" y="20"/> <!-- This shit doesn't seem to do anything... -->
</Size>
<Anchors>
<Anchor point="BOTTOMRIGHT" relativePoint="BOTTOMLEFT"> <!-- Relative position of notorious icon. If you've shrunk the bar from the bottom and want the icon aligned with the top of the bar, change BOTTOMRIGHT to TOPRIGHT and BOTTOMLEFT to TOPLEFT -->
<Offset>
<AbsDimension x="-1" y="0"/> <!-- Adjust position -->
</Offset>
</Anchor>
</Anchors>
</Texture>
<Texture name="$parentIcon2" parentKey="icon2"> <!-- The other notorious icon -->
<Size>
<AbsDimension x="20" y="20"/> <!-- This shit doesn't seem to do anything either... -->
</Size>
<Anchors>
<Anchor point="BOTTOMLEFT" relativePoint="BOTTOMRIGHT"> <!-- Relative position of the other notorious icon. Aka Right icon -->
<Offset>
<AbsDimension x="1" y="0"/> <!-- Adjust position -->
</Offset>
</Anchor>
</Anchors>
</Texture>
</Layer>
</Layers>
<BarTexture name="$parentTexture" file="Interface\AddOns\DBM-Core\textures\default.tga"/>
<BarColor r="0.7" g="0" b="0.0"/>
</StatusBar>
<!-- Border for Bar -->
<Frame frameStrata="MEDIUM">
<Size>
<AbsDimension x="20" y="20"/>
</Size>
<Backdrop edgeFile="Interface\AddOns\DBM-StatusBarTimers\frameborder"> <!-- The frameborder texture I'm using, and would recommend, is touchymcfeel's touchy-white border from "Touchy's Media" addon (htt p : // w ww . curse.com/addons/wow/touchys-media). I haven't tried other textures (like Roth), but I doubt they'll produce good results. Just get touchy's media and you'll get nice crisp pixel perfect borders. Keep in mind that you'll have to copy the touchy-white.tga file to the correct folder (which you can see above) and rename it to frameborder.tga. (Alternatively change the file-paths) -->
<EdgeSize val="1"/> <!-- Border Size -->
<BorderColor r="0" g="0" b="0"/> <!-- Change border color. Requires texture with color (like touchy-white). Will be ignored with touchy-black. -->
</Backdrop>
<Anchors>
<Anchor point="TOPRIGHT" relativePoint="TOPRIGHT" relativeKey="$parent.Bar"> <!-- Don't touch this -->
<Offset>
<AbsDimension x="0" y="0"/>
</Offset>
</Anchor>
<Anchor point="BOTTOMLEFT" relativePoint="BOTTOMLEFT" relativeKey="$parent.Bar"> <!-- Don't touch this -->
<Offset>
<AbsDimension x="0" y="0"/>
</Offset>
</Anchor>
</Anchors>
</Frame>
<!-- END OF BORDER COMMENT BLOCK -->
<!-- START OF ICON1 COMMENT BLOCK
XML doesn't support nested comments, so remove the space in the comment tags (<- -) (- ->) so shit doesn't break, if you're using this code.
The elusive icon border for Icon1 (Left) - ->
<Frame frameStrata="MEDIUM">
<Size>
<AbsDimension x="20" y="20"/>
</Size>
<Backdrop edgeFile="Interface\AddOns\DBM-StatusBarTimers\frameborder">
<EdgeSize val="1"/> <!- - Border Size - ->
<BorderColor r="0" g="0" b="0"/> <!- - Change border color. Requires texture with color (like touchy-white). Will be ignored with touchy-black. - ->
</Backdrop>
<Anchors>
<Anchor point="TOPRIGHT" relativePoint="TOPRIGHT" relativeKey="$parent.Bar.icon1"> <!- - Don't touch this - ->
<Offset>
<AbsDimension x="0" y="0"/>
</Offset>
</Anchor>
<Anchor point="BOTTOMLEFT" relativePoint="BOTTOMLEFT" relativeKey="$parent.Bar.icon1"> <!- - Don't touch this - ->
<Offset>
<AbsDimension x="0" y="0"/>
</Offset>
</Anchor>
</Anchors>
</Frame>
<!- - END OF ICON1 COMMENT BLOCK -->
<!-- START OF ICON2 COMMENT BLOCK
XML doesn't support nested comments, so remove the space in the comment tags (<- -) (- ->) so shit doesn't break, if you're using this code.
The elusive icon border for Icon2 (Right) - ->
<Frame frameStrata="MEDIUM">
<Size>
<AbsDimension x="20" y="20"/>
</Size>
<Backdrop edgeFile="Interface\AddOns\DBM-StatusBarTimers\frameborder">
<EdgeSize val="1"/> <!- - Border Size - ->
<BorderColor r="0" g="0" b="0"/> <!- - Change border color. Requires texture with color (like touchy-white). Will be ignored with touchy-black. - ->
</Backdrop>
<Anchors>
<Anchor point="TOPRIGHT" relativePoint="TOPRIGHT" relativeKey="$parent.Bar.icon2"> <!- - Don't touch this - ->
<Offset>
<AbsDimension x="0" y="0"/>
</Offset>
</Anchor>
<Anchor point="BOTTOMLEFT" relativePoint="BOTTOMLEFT" relativeKey="$parent.Bar.icon2"> <!- - Don't touch this - ->
<Offset>
<AbsDimension x="0" y="0"/>
</Offset>
</Anchor>
</Anchors>
</Frame>
<!- - END OF ICON2 COMMENT BLOCK -->
</Frames>
</Frame>
</Ui>
If/when I get permission, I might attach the .xml files for both my and damia's layout as well as the frameborder.tga
Enjoy.
- Wakko