Topbar+ v1 (deprecated) | Add additional functionality and themes to your topbar

@Aiden_12114 @kingerman88 :createFakeChat now calls the update method to fix this. I’ve also key bind support so the Enum.KeyCode.Slash now toggles the chat menu.

This is a fake icon unfortunately I used to create the gif examples before the official new topbar was released.

@TheGamer101 announced a fix for this coming shortly:

5 Likes

I added some print statements and a wait() initialization.

These didn’t work however:

wait(1)
-- Require the IconController
local replicatedStorage = game:GetService("ReplicatedStorage")
local topbarPlus = replicatedStorage:WaitForChild("Modules"):WaitForChild("Topbar+")
local iconController = require(topbarPlus.IconController)

-- Create a shop menu
local player = game.Players.LocalPlayer
local gui = script.Parent.Core
print(not not gui)
print(not not gui.Chat)

local theme = {
    -- TOGGLE EFFECT
    ["toggleTweenInfo"] = TweenInfo.new(0.35, Enum.EasingStyle.Quad, Enum.EasingDirection.Out),

    -- OBJECT PROPERTIES
    ["button"] = {
        selected = {
            ImageTransparency = 0.3,
            ImageColor3 = Color3.fromRGB(0, 170, 255),
        },
        deselected = {
            ImageTransparency = 0.3,
        },
    },
    ["image"] = {
        selected = {
            ImageColor3 = Color3.fromRGB(255, 255, 255),
        },
        deselected = {
            ImageColor3 = Color3.fromRGB(255, 255, 255),
        },
    },
    ["notification"] = {
        selected = {
            Image = "http://www.roblox.com/asset/?id=4882430005",
            ImageColor3 = Color3.fromRGB(255, 255, 255),
        },
        deselected = {
            Image = "http://www.roblox.com/asset/?id=4882430005",
            ImageColor3 = Color3.fromRGB(0, 170, 255),
        },
    },
    ["amount"] = {
        selected = {
            TextColor3 = Color3.fromRGB(0, 170, 255),
        },
        deselected = {
            TextColor3 = Color3.fromRGB(255, 255, 255),
        },
    },
}

-- Create an icon called 'Shop', with image '4882429582' and order of 1
local chat = iconController:createIcon("Chat", 5023984820, 1)
chat:setToggleMenu(gui:WaitForChild("Chat")) -- Set the shop menu to be toggled by the icon
chat:setTheme(theme)

Expected output:

true
true

NOTE: The script is located in StarterGui.

2 Likes

The example you provided appears to be working fine. What are you trying to achieve?

a1134333c9e4d2a49af4af3d4ffbeb75

3 Likes

This is really good! How can I get it to work tho? Also can you add this new addition to the Zone+ Playground?

Forever, you are godly
thank you so much!

Now that’s a game changer! It looks way better than what we’ve whipped up. Thank you!

2 Likes
Before I tested out something

I’m making a custom chat and I don’t want to use :createFakeChat(). So when I found this topic, I decided to use this module to make a topbar button for it. When I press the button I want it to make the custom chat appear.

Also here is my normal script in ServerScriptService:

require(4874365424) -- Initiate Topbar+

Literally all that is in the script.

WAIT… I just noticed something let me try it out.

Nvm, it works now. I had put the wrong frame (gui.Chat was just the background).

Now I’m wondering if there’s a limit on how many buttons you can have on the top bar…

Otherwise, I’m going to use it!

2 Likes

Awesome! I always thought the topbar could use some more work on it so this is perfect.

1 Like

Topbar+ has a separate playground you can find here, including coded examples (located under StarterPlayerScripts) to help you get started. You can also explore further resources at the docs.

5 Likes

I was literally thinking about this the other day while looking at the new topbar post again.

Nice work!

2 Likes

Yes this is great. My custom toolbar icon broke due to the topbar update but i am glad to see that someone makes a module for this so i don’t have to update my stuff. Really great! :wink: :+1:

2 Likes

Is there any way you can add the backpack icon to the topbar with this module?

1 Like

I think I spotted a bug. When the player resets or dies, none of the buttons that were added work except the chat and roblox icon.

Here’s the error I receive:

1 Like

This is incredibly useful. Thanks!

Similar to the fake chat, you can achieve most of this, by doing:

View code
-- LOCAL
local player = game:GetService("Players").LocalPlayer
local playerGui = player.PlayerGui
local gui = playerGui:WaitForChild("TestGUIs")
local replicatedStorage = game:GetService("ReplicatedStorage")
local starterGui = game:GetService("StarterGui")
local topbarPlus = replicatedStorage:WaitForChild("HDAdmin"):WaitForChild("Topbar+")
local iconController = require(topbarPlus.IconController)


-- CREATE ICONS
-- Fake Chat
local icon = iconController:createFakeChat()
icon:notify()

-- Fake backpack
local icon = iconController:createIcon("_Inventory", nil, 1)
icon:setToggleFunction(function()
	local isSelected = icon.toggleStatus == "selected"
	-- Toggle the backpack on/off here
end)
local inventoryTheme = {
	image = {
		selected = {
			Image = "rbxasset://textures/ui/TopBar/inventoryOn.png"
		},
		deselected = {
			Image = "rbxasset://textures/ui/TopBar/inventoryOff.png"
		}
	}
}
icon:setTheme(inventoryTheme)
icon:setImageSize(36)
starterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)

However, I can’t find any API to toggle the backpack/inventory itself, leaving the only options to fork the core gui or create your own custom.

For example, for the fake chat, I do:

local chatMainModule = players.LocalPlayer.PlayerScripts:WaitForChild("ChatScript").ChatMain
local chatMain = require(chatMainModule)
icon:setToggleFunction(function()
	local visibility = icon.toggleStatus == "selected"
	chatMain.CoreGuiEnabled:fire(visibility)
	chatMain:SetVisible(visibility)
end)

Unfortunately, there doesn’t appear to be a method to do this for the backpack. If anyone does find one, please do let me know and I’ll update the Topbar+ examples.

5 Likes

For the toggle menus to persist, you must ensure the GuiObject has ‘ResetOnSpawn’ set to false , or that you are calling Icon:setToggleMenu(guiObject) every time the player respawns.

I’ve updated the docs and its examples to include this information:
https://1foreverhd.github.io/HDAdmin/projects/topbarplus/icon/#settogglemenu

2 Likes

:+1: works perfectly, amazing creations like always :smiley:

just a question, but how do you notify another player’s icon, I’m having trouble making chat message notifications lol, just seem to notify the person that chatted

is there a download button here somewhere?