Giving Juked (Interrupt Bar) Simple borders/edges

[mewe]

For the past week I've been trying to find a way to give my Juked bar an improved look. I was inspired by the NAO Tournaments, and the looks would really fit my UI better. Here is an example of what I mean (for better view, watch fullscreen in HD, around 12:45 into the video):
http://www.youtube.com/watch?v=vhDG8...ailpage#t=453s
In each corner of the video you can see the CDs of each team, what I'm simply after is the rounded edges of the CD icons. Because this is how Juked looks originally http://www.curse.com/addons/wow/juked ; plain flat without edges.

So I've looked around and trying to understand how to modify LUA files. I got Notepad++, but I can't figure out exactly where, or what, to add in the file. And with little (next to none) experience in coding, I'm stuck. Although you might say that if I don't know what I'm doing I shouldn't even bother trying, I got the impression that it wouldn't be that hard to find a solution for this.

All help and suggestions are welcome.

[Haleth]

You'll have to find the relevant function that creates the frame (if it's in a function at all, could just be loose in the code) and use SetBackdrop on it, like this:

frame:SetBackdrop({
	bgFile = "Interface\\AddOns\\YourAddon\\SomeTexture",
	edgeFile = "Interface\\AddOns\\YourAddon\\SomeOtherTexture",
	edgeSize = YourBorderSize,
	insets = {left = someNumber, right = someNumber, top = someNumber, bottom = someNumber},
})

You might have to reposition the contents of the frame to allow the border to show, because borders cannot extend the frame itself. You could also create a separate frame, attach it to the main frame, and let it stick out a little.

[mewe]

Thanks for your reply.
So I tried to add the code you suggested (I also looked for example here: http://www.wowwiki.com/API_Frame_SetBackdrop)
I figured it would be easier to experiment on the original Interrupt Bar since it has a lot less code than Juked, and after looking through everything, my best guess was that the code for the border would be placed within this portion:

local function InterruptBar_AddIcons()
    local x = -45
    local y = 0
    local r = 0
    for _,ability in ipairs(order) do
        local btn = CreateFrame("Frame",nil,bar)
        btn:SetWidth(30)
        btn:SetHeight(30)
        if x < (InterruptBarDB.columns * 30 - 45) then
        btn:SetPoint("CENTER",bar,"CENTER",x,y)
        else
        x = x-(InterruptBarDB.columns * 30)
        y = y-30
            btn:SetPoint("Center",bar,"Center",x,y)
            
        end
        btn:SetFrameStrata("LOW")
        
        local cd = CreateFrame("Cooldown",nil,btn)
        cd.noomnicc = true
        cd.noCooldownCount = true
        cd:SetAllPoints(true)
        cd:SetFrameStrata("MEDIUM")
        cd:Hide()
        
        local texture = btn:CreateTexture(nil,"BACKGROUND")
        texture:SetAllPoints(true)
        texture:SetTexture(abilities[ability].icon)
        texture:SetTexCoord(0.07,0.9,0.07,0.90)
    
        local text = cd:CreateFontString(nil,"ARTWORK")
        text:SetFont(STANDARD_TEXT_FONT,18,"OUTLINE")
        text:SetTextColor(1,1,0,1)
        text:SetPoint("LEFT",btn,"LEFT",2,0)
        
        local backdrop = {
        bgFile = "Interface/Tooltips/UI-Tooltip-Background", 
        edgeFile = "Interface/Tooltips/UI-Tooltip-Background",
        tile = true,
        tileSize = 16,
        edgeSize = 16,
        insets = {
            left = 4,
            right = 4,
            top = 4,
            bottom = 4
            }
        }
        
        btn.texture = texture
        btn.text = text
        btn.duration = abilities[ability].duration
        btn.cd = cd
        
        bar[ability] = btn
        
        x = x + 30
    end
end

Lines 36 to 48 is the code that I added myself. But it didn't affect the addon's appearance, the buttons are still "border-less".
I apologize if I do obvious mistakes, I don't know much. But I'm here to learn more about addons and how they work, so bear with me

[Haleth]

You declared a local backdrop variable, but you didn't actually call the function to set the backdrop.

Try this instead:

btn:SetBackdrop({
        bgFile = "Interface/Tooltips/UI-Tooltip-Background", 
        edgeFile = "Interface/Tooltips/UI-Tooltip-Background",
        tile = true,
        tileSize = 16,
        edgeSize = 16,
        insets = {
            left = 4,
            right = 4,
            top = 4,
            bottom = 4
            }
        })

[mewe]

Perfect, it works Thanks a lot, now it just needs some tweaking. I would like to have a little bit of spacing between each icon, because as it is now, some of the boarders are overlapping each other. To space the icons, I guess there is some value in the beginning of the portion I posted in my previous post that needs some changing. Although, I can't figure out which. I would love to get some guidance in this as well if it's not too much to ask

[Haleth]

Hmm, looking at the code I assume you mean horizontal spacing. It's a little confusing, but you could change '30' to something a little higher at the code at the top (for the x values only).

[mewe]

Thank you, Haleth, for all the help. I've gotten really close to the result I want, and I feel I've also learned quite a bit about basic coding This is how it all looks at the moment: http://img3.imageshack.us/img3/2522/...0412103656.jpg

If I should be really picky, the only last thing that I would like to have fixed is the black corners of some of the icons. If you look closely, specifically Feral Charge, Kick, Psychic Scream and Skull Bash, you can see there are black corners peeking outside the borders. But since this only applies to some of the icons, I guess it has to do with their individual texture that Blizzard created, and would be pretty messy to modify.

However, I feel happy with the result anyway. And I appreciate the knowledge base WoWInteface.com has been for me

[Phanx]

Originally Posted by mewe ... I guess it has to do with their individual texture that Blizzard created, and would be pretty messy to modify.

Yep. Blizzard has changed their icon templates in every expansion so far (not sure if they've changed again in MoP).

If you want them all to look the same, you can either modify* the textures yourself, or install a package of pre-modified icons, such as CleanIcons - Original.

* By "modify", I don't mean modify the actual texture; I mean edit a copy of the texture and save it inside the appropriate directory tree in your WoW program file so that it overrides the original texture loaded from the game's MPQ data archives.

[mewe]

Brilliant! Thank you for the tip, Phanx. It now looks exactly like I want it to
/salute

[Haleth]

What I always do to get a nice border around my icons is to use SetTexCoord(.08, .92, .08, .92) on the textures. This crops them just enough to hide any default border that might be 'integrated' into the icon. Then, I just add my own.