WoWInterface - creating 3px border

WoWInterface (https://www.wowinterface.com/forums/index.php)

- Lua/XML Help (https://www.wowinterface.com/forums/forumdisplay.php?f=16)

- - creating 3px border (https://www.wowinterface.com/forums/showthread.php?t=49922)

creating 3px border

Hey, I'm kind of starting with Lua and I am in the process of building a UI with Lua only addons. What I mean by that is no in game config.

I was wondering if somebody could help me achieve the look f.e. TukUi or qMinimap achieved. It looks like that

A 3px border with black at the outside and grey inside. I looked into the code of qMinimap but I mean nowhere near to understand it.
It would really help if someone could explain to me how to achieve this look/ or how qMinimap does it.

here some of the border code of qMinimap

Atleast I think it is.

Code:

local shadows = {

        edgeFile = "Interface\\Addons\\qMinimap\\media\\glowTex", 

        edgeSize = 4,

        insets = { left = 3, right = 3, top = 3, bottom = 3 }

}

function CreateShadow(f)

        if f.shadow then return end

        local shadow = CreateFrame("Frame", nil, f)

        shadow:SetFrameLevel(1)

        shadow:SetFrameStrata(f:GetFrameStrata())

        shadow:SetPoint("TOPLEFT", -4, 4)

        shadow:SetPoint("BOTTOMRIGHT", 4, -4)

        shadow:SetBackdrop(shadows)

        shadow:SetBackdropColor(0, 0, 0, 0)

        shadow:SetBackdropBorderColor(0, 0, 0, 1)

        f.shadow = shadow

        return shadow

end

function CreateInnerBorder(f)

        if f.iborder then return end

        f.iborder = CreateFrame("Frame", nil, f)

        f.iborder:SetPoint("TOPLEFT", 1, -1)

        f.iborder:SetPoint("BOTTOMRIGHT", -1, 1)

        f.iborder:SetFrameLevel(f:GetFrameLevel())

        f.iborder:SetBackdrop({

          edgeFile = "Interface\\Buttons\\WHITE8x8", edgeSize = 1,

          insets = { left = -1, right = -1, top = -1, bottom = -1}

        })

        f.iborder:SetBackdropBorderColor(0, 0, 0)

        return f.iborder

end

function frame1px(f)

        f:SetBackdrop({

                bgFile =  [=[Interface\ChatFrame\ChatFrameBackground]=],

        edgeFile = "Interface\\Buttons\\WHITE8x8", edgeSize = 1, 

                insets = {left = -1, right = -1, top = -1, bottom = -1} 

        })

        f:SetBackdropColor(.06,.06,.06,1)

        f:SetBackdropBorderColor(.29,.302,.29,1)

CreateInnerBorder(f)        

end



local function StripTextures(object, kill)

        for i=1, object:GetNumRegions() do

                local region = select(i, object:GetRegions())

                if region:GetObjectType() == "Texture" then

                        if kill then

                                region:Hide()

                        else

                                region:SetTexture(nil)

                        end

                end

        end                

end

Yes, it's all there, but to break it down, here's what you'll need to do.

First set the backdrop of the frame to one with a solid texture and a edge size (border size) of 3, and color it black.

Code:

f:SetBackdrop({

        edgeFile = [[Interface\Buttons\WHITE8x8]],

        edgeSize = 3,

})

f:SetBackdropBorderColor(0, 0, 0)

To add the inner border stripe, you'll create a new frame, and set the backdrop on that. (which should appear on top if frame stratas are left untouched) Offset it from the edges by 1, set edge size to 1 and color it gray.

Code:

local iborder = CreateFrame("Frame", nil, f)

iborder:SetPoint("TOPRIGHT", -1, -1)

iborder:SetPoint("BOTTOMLEFT", 1, 1)

iborder:SetBackdrop({

        edgeFile = [[Interface\Buttons\WHITE8x8]],

        edgeSize = 1,

})

iborder:SetBackdropBorderColor(0.5, 0.5, 0.5)

There are other ways to do it, also.

Ok thanks!

The problem i could see with this that the inner Border would only be black when the main frame is black. Correct me If I'm wrong I haven't tried, yet.

No, the "inner" border is the gray stripe. The "main" border is 3 pixels wide, and the inner border runs on top, in the middle of that.

Hm, nice! Thanks.

I still have a problem though. When I add my Backdrop (for the tooltip in this case, I miss the inner black border.)

it looks like this (might have to zoom in to see the borders):

This is what my code looks like

Code:

local tooltips = { GameTooltip, ItemRefTooltip, ShoppingTooltip1, ShoppingTooltip2, ShoppingTooltip3, WorldMapTooltip, }

    for idx, tooltip,f in ipairs(tooltips) do



    -- tooltip:SetBackdrop(cfg.backdrop)





      local f = CreateFrame("Frame", nil, tooltip)



      f:SetBackdrop({

      edgeFile = [[Interface\Buttons\WHITE8x8]],

      edgeSize = 3,

                          })

      f:SetBackdropBorderColor(0, 0, 0)



    local iborder = CreateFrame("Frame", nil, tooltip)

      iborder:SetPoint("TOPRIGHT", -1, -1)

      iborder:SetPoint("BOTTOMLEFT", 1, 1)

      iborder:SetBackdrop({

        edgeFile = [[Interface\Buttons\WHITE8x8]],

        edgeSize = 1,

                          })

      iborder:SetBackdropBorderColor(0.5, 0.5, 0.5)





    tooltip:SetScale(cfg.scale)

    tooltip:HookScript("OnShow", TooltipOnShow)



 end

You should set the main border on the original frame instead creating your own. You don't have to, but in this case the new border frame does not have its points set, so it won't be visible. Since it already has a backdrop, you'll also want to retain the background bit. Try this:

Code:

local tooltips = { GameTooltip, ItemRefTooltip, ShoppingTooltip1, ShoppingTooltip2, ShoppingTooltip3, WorldMapTooltip, }

for idx, tooltip in ipairs(tooltips) do

        tooltip:SetBackdrop({

                bgFile = [[Interface\Tooltips\UI-Tooltip-Background]],

                edgeFile = [[Interface\Buttons\WHITE8x8]],

                edgeSize = 3,

        })

        tooltip:SetBackdropColor(TOOLTIP_DEFAULT_BACKGROUND_COLOR.r, TOOLTIP_DEFAULT_BACKGROUND_COLOR.g, TOOLTIP_DEFAULT_BACKGROUND_COLOR.b);

        tooltip:SetBackdropBorderColor(0, 0, 0)



        local iborder = CreateFrame("Frame", nil, tooltip)

        iborder:SetPoint("TOPRIGHT", -1, -1)

        iborder:SetPoint("BOTTOMLEFT", 1, 1)

        iborder:SetBackdrop({

                edgeFile = [[Interface\Buttons\WHITE8x8]],

                edgeSize = 1,

        })

        iborder:SetBackdropBorderColor(0.5, 0.5, 0.5)



        tooltip:SetScale(cfg.scale)

        tooltip:HookScript("OnShow", TooltipOnShow)

end

Okay, I'm confused now what my actual backdrop is.

I think

Code:

 tooltip:SetBackdrop({

    bgFile = [[Interface\Tooltips\UI-Tooltip-Background]],

is my actual tooltip background. Is there a "bgColor" or something to not use a texture for the backdrop and still keep the edges?
Because using my own texture created something wrong, not the actual color of my texture or what I wanted.

Edit: Im dumb.

Code:

tooltip:SetBackdrop({

    bgFile = [[Interface\Addons\WrathsUI\media\141414.tga]],

    edgeFile = [[Interface\Buttons\WHITE8x8]],

    edgeSize = 3,

  })

  tooltip:SetBackdropColor(TOOLTIP_DEFAULT_BACKGROUND_COLOR.r, TOOLTIP_DEFAULT_BACKGROUND_COLOR.g, TOOLTIP_DEFAULT_BACKGROUND_COLOR.b);

I have to change my SetBackdropColor to white otherwise the texture gets filtered.

Ah, yes. SetBackdrop color will multiply the values passed with the colors of the texture. Full white means use original texture colors. I think it will be set to white when you call SetBackdrop, though, so you shouldn't need to SetBackdropColor there.