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

Resources Community Resources
#42

@AnasBahauddinI978

You can use remote events to achieve this. Wevetments has a great tutorial on this.

Then on the client, simply prompt a notification by doing icon:notify().

@BuilderNoob_Ozgur2nd

You can clone the project from our repository, or more simply take or require the MainModule.

2 Likes
#43

Thank you. I suppose ill just make a backpac gui which is binded to the button

1 Like
#44

Great work! I love your creations ForeverHD!

1 Like
#45

Great system, however my custom decal icons aren’t appearing.

image

I’m changing the icons within the main localscript

image

The icons were approved by moderation perfectly fine.
@ForeverHD

1 Like
#46

You’re retrieving the website ID as apposed to the asset ID. Right click on the image instead in the toolbox and press ‘Copy AssetId’ to grab the real working ID:

image
image682×915 187 KB

For example, the ID in your “Games” example should be 4621599120 instead of 4621599129.

1 Like
#47

Thank you so much! This is great.

1 Like
#48

Updates

Thanks to @Lucke0051 for a lot of these suggestions.

IconController

  • Significantly improved the fakeChat mimicking, including notifications, and automatically hiding/showing the icon when StarterGui:SetCoreGuiEnabled("Chat", bool) is called.

  • All icons now automatically hide/show when StarterGui:SetCore("TopbarEnabled", bool) is called.

  • Added method removeFakeChat.

  • Added method setTopbarEnabled.

  • Added method setDisplayOrder.

Icon

3 Likes
#49

Wow! This is very cool! I can’t wait to use this in my game. Thank you for making this!

1 Like
#50

Is it possible to change the roblox :roblox_light: logo in the corner?

#51

You can also use the Imiji plugin.

#52

Apart from modifying it locally on your device, this isn’t currently possible.

#53

Do you have any size recommendation for the icon that the top bar icon to have? (i.e. : 32x32)

#54

Here is a mint green theme. If you edit it I would like to see what you have edited. So please share it. Thank you!

image
image1585×528 109 KB 

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

    -- OBJECT PROPERTIES
    ["button"] = {
        selected = {
            ImageTransparency = 0.35,
            ImageColor3 = Color3.fromRGB(0, 255, 200),
        },
        deselected = {
            ImageTransparency = 0.35,
			ImageColor3 = Color3.fromRGB(15,15,15)
        },
    },
    ["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(70, 133, 107),
        },
        deselected = {
            Image = "http://www.roblox.com/asset/?id=4882430005",
            ImageColor3 = Color3.fromRGB(55, 145, 103),

        },
    },
    ["amount"] = {
        selected = {
            TextColor3 = Color3.fromRGB(255,255,255),
        },
        deselected = {
            TextColor3 = Color3.fromRGB(255, 255, 255),
        },
    },
}
#55

This is great! Really opens up a whole new world for ui. That being said, especially as someone new to the world of Lua, it’s not very clear on how to go about setting it up. It’d be good to throw together a quick guide on how to set up the whole hierarchy. Right now it appears as though it goes over the individual aspects of the project, but not the overall thing itself. Other than that, great work.

1 Like
#57

Also, I found a bug; if you have chat selected, it allows you to select something else.
@ForeverHD

#58

how big does the image need to be to fit the entire button?

#59

A size between 32x32 to 72x72 pixels is ideal as it more accurately reflects the icon size and has a minimal impact on performance. For Topbar+ specifically, you can set the icons size-offset by doing icon:setImageSize(int). The default value is 20, which is also the size I use for the fake topbar, HD icon, etc).

Thanks for sharing, I’ve added your theme!

@jones582 The about section explains how to setup the project in greater detail than this post, and a video-tutorial with greater emphasis for developers unfamiliar with lua is something I’m looking to explore for future.

The fakeChat by default mimics the Roblox chat therefore doesn’t deselect when other icons are selected.

You can change this by doing:

local fakeChatIcon = topbarController:createFakeChat()
fakeChatIcon.deselectWhenOtherIconSelected = true
#60

You should make a plugin for this.

#61

@Blockzez it was probably a code error. You must have typed something wrong. Otherwise, it could be a ROBLOX studio bug.

#62

It was the update, I didn’t realise the top bar has been changed, thought it was the model, no wonder why Roblox player had also had weird top-bar. I made this mistake, and the fault was on me.