Skinning Blizzard Default Frames

[Layback_]

For some overhaul UIs like Elv and Tuk, they have created a custom skin (or design(?)) for game menus and some other Blizzard default frames.

I was also expecting to create custom skinned menus, but was not sure of what would be the best practice to do so.

So, if anyone has an experience of creating a customized menus or at least have some knowledge regarding such topic(?), could I get some advice or explanation on how I would achieve this?
(Like process that I should follow: Disable default UI designs, create new design, blah blah blah)

Thank you.

[Aftermathhqt]

Originally Posted by Layback_ For some overhaul UIs like Elv and Tuk, they have created a custom skin (or design(?)) for game menus and some other Blizzard default frames. I was also expecting to create custom skinned menus, but was not sure of what would be the best practice to do so. So, if anyone has an experience of creating a customized menus or at least have some knowledge regarding such topic(?), could I get some advice or explanation on how I would achieve this? (Like process that I should follow: Disable default UI designs, create new design, blah blah blah) Thank you.

Best way is to look at ElvUI & Tukui, they got some amazing functions that are going to help you a lot.

Then its just about looking for each frame name and being!

1. You want to create a border function
2. You want to create a backdrop function which you use the border in too
3. A button function that removes the old textures and adds new.
4. A close button function that removes old texturesand adds new.
5. A scroll frame close button, that removes textures and adds new.

[Layback_]

Originally Posted by Game92 Best way is to look at ElvUI & Tukui, they got some amazing functions that are going to help you a lot. Then its just about looking for each frame name and being! 1. You want to create a border function 2. You want to create a backdrop function which you use the border in too 3. A button function that removes the old textures and adds new. 4. A close button function that removes old texturesand adds new. 5. A scroll frame close button, that removes textures and adds new.

Yeah, I tried to have a look at Elv and Tuk's functions, but I could've not found where they are located

I thought that they would be defined in API.lua file, but seems they are not D:

[Aftermathhqt]

Originally Posted by Layback_ Yeah, I tried to have a look at Elv and Tuk's functions, but I could've not found where they are located I thought that they would be defined in API.lua file, but seems they are not D:

In Tukui they are defined in API.

[syncrow]

Originally Posted by Layback_ I thought that they would be defined in API.lua file, but seems they are not D:

Take a look at

ElvUI\Core\toolkit.lua

[Aftermathhqt]

Heres my functions to remove textures/hide frames.

A.Func = function() return end

A.Kill = function(Object)
    if Object.UnregisterAllEvents then Object:UnregisterAllEvents() end
    Object.Show = A.Func
    Object:Hide()
end
 
A.StripTexture = function(Object, Kill)
    for i = 1, Object:GetNumRegions() do
        local Region = select(i, Object:GetRegions())
        if Region:GetObjectType() == "Texture" then
            if Kill then A.Kill(Region) else Region:SetTexture(nil) end
        end
    end
end

Heres my skinning API

local A, C, L = select(2, ...):unpack()
 
local BorderColor = unpack(C.General.BorderColor)
 
A.Mult = 768/string.match(A.Resolution, "%d+x(%d+)")/C.General.UIScale
A.Scale = function(ScaleObject) return A.Mult*math.floor(ScaleObject/A.Mult) end
 
A.CreateBorder = function(self, ButtonOverlay, OverlayButtonWidth, OverlayButtonHeight, LeftSize, RightSize, BottomSize, TopSize, SLeftSize, SRightSize, SBottomSize, STopSize)
    if not self.HasBorder then
        self.ABorder = CreateFrame("Frame", nil, self)
        self.ABorder:SetFrameLevel(self:GetFrameLevel() + 5)
        self.ABorder:SetPoint("TOPLEFT", self, "TOPLEFT", LeftSize or 0, TopSize or 0)
        self.ABorder:SetPoint("BOTTOMRIGHT", self, "BOTTOMRIGHT", RightSize or 0, BottomSize or 0)
        self.ABorder:SetBackdrop({
            edgeFile = "Interface\\Buttons\\WHITE8x8", edgeSize = A.Scale(1.5),
        })
        self.ABorder:SetBackdropBorderColor(BorderColor, BorderColor, BorderColor)
 
        self.ABorderShadow = CreateFrame("Frame", nil, self)
        self.ABorderShadow:SetFrameLevel(self.ABorder:GetFrameLevel() - 1)
        self.ABorderShadow:SetPoint("TOPLEFT", self, "TOPLEFT", LeftSize or 0, TopSize or 0)
        self.ABorderShadow:SetPoint("BOTTOMRIGHT", self, "BOTTOMRIGHT", RightSize or 0, BottomSize or 0)
        self.ABorderShadow:SetBackdrop({
            edgeFile = "Interface\\Buttons\\WHITE8x8", edgeSize = A.Scale(2),
        })
        self.ABorderShadow:SetBackdropBorderColor(0, 0, 0, 1)
        
        self.ABorderShadow2 = CreateFrame("Frame", nil, self)
        self.ABorderShadow2:SetFrameLevel(self.ABorder:GetFrameLevel() - 1)
        self.ABorderShadow2:SetPoint("TOPLEFT", self, "TOPLEFT", SLeftSize or -0.8, STopSize or 0.8)
        self.ABorderShadow2:SetPoint("BOTTOMRIGHT", self, "BOTTOMRIGHT", SRightSize or 0.8, SBottomSize or -0.8)
        self.ABorderShadow2:SetBackdrop({
            edgeFile = "Interface\\Buttons\\WHITE8x8", edgeSize = A.Scale(2),
        })
        self.ABorderShadow2:SetBackdropBorderColor(0, 0, 0, 1)
    
        if ButtonOverlay then
            self.AShadowOverlay = self:CreateTexture(nil, "OVERLAY")
            self.AShadowOverlay:SetPoint("CENTER", self, 0,0)
            self.AShadowOverlay:SetWidth(OverlayButtonWidth or 33)
            self.AShadowOverlay:SetHeight(OverlayButtonHeight or 33)
            self.AShadowOverlay:SetTexture(C.Media.BorderOverlay)
            self.AShadowOverlay:SetVertexColor(0, 0, 0, 0.80)
        end
        
        self.HasBorder = true
    end
end
 
A.ColorBorder = function(self, R, G, B)
    self.ABorder:SetBackdropBorderColor(R, G, B)
end
 
A.Skin = function(self)
    self:SetBackdrop({
        bgFile = "Interface\\Buttons\\WHITE8x8",
        insets = {top = 1, left = 1, bottom = 1, right = 1},
    })
    self:SetBackdropColor(unpack(C.General.BackdropColor))
 
    A.CreateBorder(self)
end
 
A.SkinButton = function(self, SmallerButton)    
    self:SetNormalTexture("")
    self:SetHighlightTexture("")
    self:SetPushedTexture("")
    self:SetDisabledTexture("")
 
    if self.Left then self.Left:SetAlpha(0) end
    if self.Middle then self.Middle:SetAlpha(0) end
    if self.Right then self.Right:SetAlpha(0) end
    if self.LeftSeparator then self.LeftSeparator:Hide() end
    if self.RightSeparator then self.RightSeparator:Hide() end
    
    if SmallerButton then
        A.CreateBorder(self, nil, nil, nil, nil, nil, 1, -1, nil, nil, 0.8, -0.8)
        
        self:SetBackdrop({
            bgFile = C.Media.Texture2,
            insets = {top = 2, left = 1, bottom = 2, right = 1},
        })
    else
        A.CreateBorder(self)
        
        self:SetBackdrop({
            bgFile = C.Media.Texture2,
            insets = {top = 1, left = 1, bottom = 1, right = 1},
        })
    end
    self:SetBackdropColor(unpack(C.General.PanelColor))
    
    self:HookScript("OnEnter", function() A.ColorBorder(self, A.ClassColor.r, A.ClassColor.g, A.ClassColor.b) end)
    self:HookScript("OnLeave", function() A.ColorBorder(self, BorderColor, BorderColor, BorderColor) end)
end
 
A.CloseButton = function(self, OffsetX, OffsetY, CloseSize) 
    self:SetSize(CloseSize or 18, CloseSize or 18)
    self:ClearAllPoints()
    self:SetPoint("TOPRIGHT", OffsetX or 0, OffsetY or 0)
    
    self:SetNormalTexture("")
    self:SetPushedTexture("")
    self:SetHighlightTexture("")
    self:SetDisabledTexture("")
    
    self:SetBackdrop({
        bgFile = "Interface\\Buttons\\WHITE8x8",
        insets = {top = 1, left = 1, bottom = 1, right = 1}, 
    })
    self:SetBackdropColor(unpack(C.General.BackdropColor))
    
    A.CreateBorder(self)
 
    local ACloseButtonFont = self:CreateFontString(nil, "OVERLAY")
    ACloseButtonFont:SetFont(C.Media.Font, 12.5, "THINOUTLINE")
    ACloseButtonFont:SetShadowOffset(1, -1)
    ACloseButtonFont:SetShadowColor(0, 0, 0)
    ACloseButtonFont:SetPoint("CENTER", 1.5, 1)
    ACloseButtonFont:SetText("x")
    
    self:HookScript("OnEnter", function(self) ACloseButtonFont:SetTextColor(1, 0, 0) A.ColorBorder(self, 1, 0, 0) end)
    self:HookScript("OnLeave", function(self) ACloseButtonFont:SetTextColor(1, 1, 1) A.ColorBorder(self, BorderColor, BorderColor, BorderColor) end)
end

And heres where i've skinned a few objects.

local A, C, L = select(2, ...):unpack()
 
local ASkin = CreateFrame("Frame", nil, UIParent)
ASkin:RegisterEvent("ADDON_LOADED")
ASkin:SetScript("OnEvent", function(self, event, AddOn)
    if AddOn == "AftermathhUI" then
    
        -- Frames
        
        local Frames = {
        "GameMenuFrame",
        "StackSplitFrame",
        "ReadyCheckFrame",
        }
    
        for i = 1, #Frames do
            local SkinFrames = _G[Frames[i]]
            if SkinFrames then
                A.Skin(SkinFrames)
            end
        end
        
        -- Buttons
        
        local Buttons = {
        "StackSplitOkayButton",
        "StackSplitCancelButton",
        "ReadyCheckFrameYesButton",
        "ReadyCheckFrameNoButton",
        }
        
        for i = 1, #Buttons do
            local SkinButtons = _G[Buttons[i]]
            if SkinButtons then
                A.SkinButton(SkinButtons)
            end
        end
        
        local SmallButtons = {
        "GameMenuButtonHelp",
        "GameMenuButtonWhatsNew",
        "GameMenuButtonOptions",
        "GameMenuButtonUIOptions",
        "GameMenuButtonKeybindings",
        "GameMenuButtonMacros",
        "GameMenuButtonAddons",
        "GameMenuButtonLogout",
        "GameMenuButtonQuit",
        "GameMenuButtonContinue",
        "GameMenuButtonStore",
        }
        
        for i = 1, #SmallButtons do
            local SkinSmallButtons = _G[SmallButtons[i]]
            if SkinSmallButtons then
                A.SkinButton(SkinSmallButtons, true)
            end
        end
        
        -- Headers
        
        local Headers = {
        "GameMenuFrame"
        }
        
        for i = 1, #Headers do
        local Title = _G[Headers[i].."Header"]
            if Title then
                Title:SetTexture("")
                Title:ClearAllPoints()
                if _G["GameMenuFrameHeader"] then
                    Title:SetPoint("TOP", GameMenuFrame, 0, 7)
                else
                    Title:SetPoint("TOP", Headers[i], 0, 0)
                end
            end
        end
        
        -- ReadyCheck
        
        ReadyCheckFrame:HookScript("OnShow", function(self) if UnitIsUnit("player", self.initiator) then self:Hide() end end)
        select(2, ReadyCheckListenerFrame:GetRegions()):Hide()
        
        -- Static Popup
        
        for i = 1, 4 do
            local AStaticFrame = _G["StaticPopup"..i]
            for k = 1, 3 do
                A.SkinButton(AStaticFrame["button"..k])
            end
            A.Skin(AStaticFrame)
        end
        
        -- StackSplitFrame
        
        StackSplitFrame:GetRegions():Hide()
    
        -- QueueStatusFrame Tooltip
    
       local AQueueStatusFrame = _G["QueueStatusFrame"]
        A.StripTexture(AQueueStatusFrame)
        A.Skin(AQueueStatusFrame)
    
        -- GarrisonAlertFrame
    
        local AGarrisonMissionAlertFrame = _G["GarrisonMissionAlertFrame"]
        A.StripTexture(AGarrisonMissionAlertFrame)
        A.Skin(AGarrisonMissionAlertFrame)
 
        local AGarrisonShipMissionAlertFrame = _G["GarrisonShipMissionAlertFrame"]
        A.StripTexture(AGarrisonShipMissionAlertFrame)
        A.Skin(AGarrisonShipMissionAlertFrame)
        
        -- New RecipeAlertFrame
        
        hooksecurefunc(NewRecipeLearnedAlertSystem, "setUpFunction", function(frame, ...)
            frame:GetRegions():Hide()
            frame.Icon:SetDrawLayer("OVERLAY", 7)
 
            --local IconOverlay = CreateFrame("Frame", nil, frame)
            --IconOverlay:SetAllPoints(frame.Icon)
            --A.CreateBorder(IconOverlay, nil, nil, nil, 4, -4, 4, -4, 4.8, -4.8, 4.8, -4.8)
            
            A.Skin(frame)
        end)
        
        -- BattlePet Tooltip
    
        local AFloatingBattlePetTooltip = _G["FloatingBattlePetTooltip"]
        AFloatingBattlePetTooltip.BorderRight:Hide()
        AFloatingBattlePetTooltip.BorderLeft:Hide()
        AFloatingBattlePetTooltip.BorderBottom:Hide()
        AFloatingBattlePetTooltip.BorderBottomLeft:Hide()
        AFloatingBattlePetTooltip.BorderBottomRight:Hide()
        AFloatingBattlePetTooltip.BorderTop:Hide()
        AFloatingBattlePetTooltip.BorderTopLeft:Hide()
        AFloatingBattlePetTooltip.BorderTopRight:Hide()
        AFloatingBattlePetTooltip.Background:Hide()
    
        A.Skin(AFloatingBattlePetTooltip)
        A.CloseButton(AFloatingBattlePetTooltip.CloseButton, -4, -4, 14)
    end
    
    if AddOn == "TinyDPS" then
        A.CreateBorder(tdpsFrame)
    end
end)

[Layback_]

Originally Posted by syncrow Take a look at

Awesome! I found it!

[Layback_]

Originally Posted by Game92 Heres my functions to remove textures/hide frames. code was here...

This is awesome !!

Just a quick question here. For A.Func function, do you really have to return? Can't it be just like:

A.Func = function() end

[Aftermathhqt]

Originally Posted by Layback_ This is awesome !! Just a quick question here. For A.Func function, do you really have to return? Can't it be just like: A.Func = function() end

Yes, it gotta be like that =)

[Layback_]

Originally Posted by Game92 Yes, it gotta be like that =)

Aight!

Thank you so much for your help!

[Phanx]

No, it doesn't have to be like that. These are the same:

function() return end

function() end

Both are valid functions that do nothing and effectively return nil.

[Layback_]

Originally Posted by Phanx No, it doesn't have to be like that. These are the same: function() return end function() end Both are valid functions that do nothing and effectively return nil.

Haha, that's what I thought so!

Thx for your confirmation

[Layback_]

All righty,

I was making some modifications on GameMenuFrame and approached with some issue.

Please have a look at this image first.



As you can sse, the shadow for GameMenuFrame is bit pushed to the right while the temporary frame above it is drawn properly.

Both frames are made of exactly same functions which are:

local function SetBase(self)
    local tex = LSM:Fetch("background", "backdrop");
 
    self:SetBackdrop({
        bgFile = tex,
    });
    self:SetBackdropColor(1, 1, 1, 1);
end
 
local function SetBorder(self, target, size)
    local object = target or self;
    local tex = LSM:Fetch("background", "backdrop");
    local s = size or 1;
 
    local border = CreateFrame("Frame", object:GetName() .. "Border", self);
    border:SetFrameLevel(self:GetFrameLevel());
    border:SetPoint("TOPLEFT", object, -s, s);
    border:SetPoint("TOPRIGHT", object, s, s);
    border:SetPoint("BOTTOMLEFT", object, -s, -s);
    border:SetPoint("BOTTOMRIGHT", object, s, -s);
    border:SetBackdrop({
        edgeFile = tex,
        edgeSize = s,
    });
    border:SetBackdropBorderColor(0, 0, 0, 1);
 
    object.border = border;
end
 
local function SetShadow(self, target, size)
    local object = target or self;
    local tex = LSM:Fetch("border", "fer13");
    local s = size or 2;
 
    if self:GetFrameLevel() <= 1 then
        self:SetFrameLevel(self:GetFrameLevel() + 1);
    end
 
    local shadow = CreateFrame("Frame", object:GetName() .. "Shadow", self);
    shadow:SetFrameLevel(self:GetFrameLevel() - 1);
    shadow:SetPoint("TOPLEFT", object.border or object, -s, s);
    shadow:SetPoint("TOPRIGHT", object.border or object, s, s);
    shadow:SetPoint("BOTTOMLEFT", object.border or object, -s, -s);
    shadow:SetPoint("BOTTOMRIGHT", object.border or object, s, -s);
    shadow:SetBackdrop({
        edgeFile = tex,
        edgeSize = s,
    });
    shadow:SetBackdropBorderColor(1, 1, 1, 1);
 
    object.shadow = shadow;
end

and here are actual function calls:

local testFrame = _G["GameMenuFrame"];
testFrame:StripTexture(); -- From Game92, Thank you!
testFrame:SetBase();
testFrame:SetBorder();
testFrame:SetShadow();
 
testFrame = CreateFrame("Frame", "testFrame", UIParent);
testFrame:SetSize(50, 50);
testFrame:SetPoint("CENTER", 0, 220);
testFrame:SetBase();
testFrame:SetBorder();
testFrame:SetShadow();

I've checked with all other frames that utilizes same approach and looked like GameMenuFrame was the only one that causes this issue (and those GameMenuButtonXXXX as well).

[Phanx]

1. System Options > Advanced > Disable "Use UI scale"

2. Make sure the GameMenuFrame's position offsets and dimensions are all integers:

/dump GameMenuFrame:GetPoint()
/dump GameMenuFrame:GetSize()

(Note that due to floating-point stupidity, the numbers you'll see from these commands won't look like integers, but as long as they're really close, it's fine; eg. 0.9999999994324324 is actually 1.)

[Layback_]

Originally Posted by Phanx 1. System Options > Advanced > Disable "Use UI scale" 2. Make sure the GameMenuFrame's position offsets and dimensions are all integers: /dump GameMenuFrame:GetPoint() /dump GameMenuFrame:GetSize() (Note that due to floating-point stupidity, the numbers you'll see from these commands won't look like integers, but as long as they're really close, it's fine; eg. 0.9999999994324324 is actually 1.)

Hi Phanx,

Just checked "Use UI Scale" and it was already disabled. Also I checked size and point using dump, but they were set to proper numbers (as you said they were like stupid floating-point numbers though...).

Additionally, I had a close look via Photoshop (using 'fstack' command) and the size and point was perfect.
It's just a graphic in WoW that is being distorted

[Phanx]

Are you (a) using non-fullscreen windowed mode or (b) using something other than your monitor's native resolution?

[Layback_]

Originally Posted by Phanx Are you (a) using non-fullscreen windowed mode or (b) using something other than your monitor's native resolution?

I'm actually using a Fullscreen Windowed Mode at the moment.

[Layback_]

Originally Posted by Phanx Are you (a) using non-fullscreen windowed mode or (b) using something other than your monitor's native resolution?

Just checked with another PC with fullscreen mode and the same issue is occurring

[Lombra]

Maybe it's an issue with the texture graphic? I notice you're using a different texture for the shadow.

[Layback_]

Originally Posted by Lombra Maybe it's an issue with the texture graphic? I notice you're using a different texture for the shadow.

Hmmmmmm....

I don't think that's an issue here as all other frames are working fine with that texture.

Here I attached that texture file