DBM timer custom bar look

[shanthi]

EDIT: Solved, but still not sure how this error came up Oo

How did you solve it, out of curiosity? I'm also using a border graphic and getting the blacked out icons, as if the border suddenly has no alpha channel.

[Basso]

How did you solve it, out of curiosity? I'm also using a border graphic and getting the blacked out icons, as if the border suddenly has no alpha channel.

I saved it as a compressed tga and then it worked, before that it was an uncompressed one, doesnt make sense to me but after that it worked.....

Before the last dbm update it just worked fine, its rather strange

[shanthi]

One odd thing I noticed. Almost every DBM icon was blacked out, but not all of them. On Garrosh, the Power Iron Star icon showed up. That was so random and strange.

[Basso]

One odd thing I noticed. Almost every DBM icon was blacked out, but not all of them. On Garrosh, the Power Iron Star icon showed up. That was so random and strange.

As a developer i hate such stuff, in whatever programming language.
"Hey it works i dont know why but it works!"
"It doesnt work but it should work!"
or even better "It shouldnt work at all but its working....."

[shanthi]

As a developer i hate such stuff, in whatever programming language.
"Hey it works i dont know why but it works!"
"It doesnt work but it should work!"
or even better "It shouldnt work at all but its working....."

Yeah, I used to work as a programmer (now I work as a user interface developer, so I only do some pretty trivial coding) and making something work but not knowing why it was working was always very uncomfortable. Felt like a ticking time bomb.

[Keosen]

Is there a way to move/resize the frame that announce events like " Gift of the Titans: Keosen, Shanthi, Basso "
The font is huge and very intrusive for my minimal UI.

[shanthi]

Is there a way to move/resize the frame that announce events like " Gift of the Titans: Keosen, Shanthi, Basso "
The font is huge and very intrusive for my minimal UI.

It uses the raid warning frame. I had to create a tiny addon to change it (this will also change any raid warning too, not just DBM's announcements). This is all the addon does:

local font, size, attrib, color = "YOURFONT.ttf", DESIRED-SIZE, "THINOUTLINE", {1,0,0} --{r,g,b}
RaidWarningFrame.timings.RAID_NOTICE_MIN_HEIGHT = size
RaidWarningFrameSlot1:SetFont(font,size,attrib)
RaidWarningFrameSlot1:SetTextColor(unpack(color))
RaidWarningFrameSlot2:SetFont(font,size,attrib)
RaidWarningFrameSlot2:SetTextColor(unpack(color))

So you'd replace YOURFONT.ttf with the path to the font you want to use (like "Fonts\\Expressway.tff") and DESIRED-SIZE with the font size you want. You could also change THINOUTLINE to any other font flag you'd like, or NONE if you don't want any and use the {1,0,0} fields to adjust the color.

Treeston has a guide here for turning a code snippet into an addon.

[Keosen]

Thank you very much ill try that.
At the moment i'm using this
/run RaidWarningFrame:SetScale(0.8)

But it does not change the size of the font so i thought it was a different frame than raidWarningFrame.

[Attaxor]

Ive been working on a fix for a while but i cannot seem to solve the bars overlapping >.< If anyone know which line of code that is on i love you longtime

[shanthi]

Ive been working on a fix for a while but i cannot seem to solve the bars overlapping >.< If anyone know which line of code that is on i love you longtime

You don't need to adjust any code for that. Go to Bar Setup in the configuration screen you have in that screenshot and adjust the "Offset Y" sliders for the small bars (and the huge bars, if you use those) in order to put more space between them.

[Attaxor]

You don't need to adjust any code for that. Go to Bar Setup in the configuration screen you have in that screenshot and adjust the "Offset Y" sliders for the small bars (and the huge bars, if you use those) in order to put more space between them.

Thanks, setting the Y offset to 23 on both bars is how its ment to be, if anyone else who is trying to replicate Damia's old layout i can upload the DBT-Template, DBT.lua and frameborder.tga somewhere.

[Krevaan]

I've been using wowinterface.com/downloads/info22399-BgDBM-Skin.html for a while now. Everytime they update DBM just copy the files back into your DBM folder. Not sure if it's the same bars or what you are looking for, but it's pretty nice.

[wakkolol]

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:

1. Introduction
2. Description
3. Configuration
4. - Icon border
5. - Bar size
6. - Name and timer text
7. "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:

			<!-- 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:

					<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:

<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>

						<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.

<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

[Keosen]

Can you post a screenshot with the outcome?

[wakkolol]

yea, sure. sorry about the delay.

my layout:
i.imgur.com/mkP2qvO.jpg

Damia's layout:
i.imgur.com/Y6WXzYV.jpg

[Qubis]

Can anyone explain me why my timers dissapeared, since the new DBM updates i can't see my text on the bars or timers. When i press the "start test" i can see the text for 0.2 sec, then it fades out.


i believe i used Quse Boss Styles, then edited abit in the LUA to get my final result.