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

ForeverHD · May 14, 2020, 11:00am

The fake chat icon should automatically align to the original core guis position:

I’ll message you to try and find out what’s causing that.

Blockzez · May 14, 2020, 12:14pm

Is it possible to make this right aligned for RTL languages like Arabic and Hebrew?

ForeverHD · May 14, 2020, 12:56pm

Great suggestion, I’ll look at exploring a property and/or method to achieve this.

kingerman88 · May 14, 2020, 1:03pm

In your themes GIFs you were able to change the roblox icon, is this possible through use of a script? Or is it only possible through the use of changing your own client/modifying it through studio once in game?

Also I was also able to get this bug through this code

local StarterGui = game:GetService("StarterGui")
StarterGui:SetCore("TopbarEnabled", false)

Really cool module!

Blockzez · May 14, 2020, 1:35pm

How do I remove this? Now it’s appearing on every Roblox game without anything modified.
OS: Windows 10 Enterprise

~~image3840×65 7.19 KB~~

Looks like Roblox updated this again :(, if it ain’t broke don’t fix it.

ForeverHD · May 14, 2020, 2:41pm

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

IAmPinleon · May 14, 2020, 3:38pm

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.

ForeverHD · May 14, 2020, 4:06pm

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

a1134333c9e4d2a49af4af3d4ffbeb75

TheReal4Cedar123 · May 14, 2020, 4:26pm

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

demoyd3 · May 14, 2020, 4:56pm

Forever, you are godly
thank you so much!

WooleyWool · May 14, 2020, 5:03pm

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

IAmPinleon · May 14, 2020, 5:19pm

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

DevHumor · May 14, 2020, 6:43pm

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!

pvod · May 15, 2020, 4:36am

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

ForeverHD · May 15, 2020, 9:53am

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.

thorstrucked · May 16, 2020, 5:46am

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

Nice work!

VortexColor · May 16, 2020, 6:25am

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!

VortexColor · May 16, 2020, 6:45am

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

WooleyWool · May 16, 2020, 8:12pm

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:

marcowrites · May 16, 2020, 10:16pm

This is incredibly useful. Thanks!