[v3!] TopbarPlus v3.0.0 | Construct intuitive topbar icons; customise them with themes, dropdowns, captions, labels and much more

When I remove the playerlist (for a custom one) the icons overlap
Some kind of solution for this?

5 Likes

Overlap with your custom playerlist or other icons? Can you send images and/or a stripped down place file of the only the icons and bug?

7 Likes

It was fixed only mysteriously, I think I was using the old module or there was a script that prevented the playerlist.

2 Likes

This is great! I had no idea there was a new release until I looked back at the original documentation. It was gone! So hyped to use this.

2 Likes

How to give this credit correctly?

Right now I put it like this in a credits section:


And what about linking this link, do I have to put it in the game or in the description or in the creation group?
:sweat_smile: :ticket:

2 Likes

That’s absolutely fine! Linking is not so easy in-game so don’t worry about that

9 Likes

Wow, this is really good. Just one issue, what if I wanted to tween the binded Ui? Because, so far, I’ve only seen the option to make something Visible.

3 Likes

Instead of using the :bindToggleItem method you can utilise the icon.deselected and icon.selected events:

icon.deselected:Connect(function()
    -- fade frame in using TweenService 
end)

icon.selected:Connect(function()
    -- fade frame out using TweenService 
end)
11 Likes

I’ve been waiting for this to come out. Pretty neat stuff. Is there any way to select or deselect an icon without firing the select/deselect/toggle events?

3 Likes

Without forking the code not currently. What would be your use case for this?

4 Likes

I’m a fan of this, it’s so well integrated you can’t tell that it’s been added externally!

Looks like it was built into the game haha.

6 Likes

I’d like to keep the state of a menu externally and allow the menu to control the state. For example, I make a top bar icon that toggles the Store menu, but the Store gui also has an X to close it; so the top bar icon needs to be put in its “deselected” state when a user hits the X, but I don’t want to execute the gui closing code twice.
Honestly, it’s not a huge use case, and it’s easy enough to work around. I was just wondering if it already had that functionality so I could make my code a little prettier :stuck_out_tongue:

4 Likes

I imagine you have a slightly different configuration however if you were to set it up something like the following it should only print ‘deselected!’ and ‘selected!’ once:

local shopMenu = gui.Shop
local shopIcon = Icon.new()
	:setImage(4882429582)
	:setLabel("Shop")
	:notify()
	:setTip("Open Shop (v)")
	:bindToggleKey(Enum.KeyCode.V)
	:setCaption("Shop")
	:setOrder(2)
	:bindEvent("selected", function()
		print("selected!")
		shopMenu.Visible = true
	end)
	:bindEvent("deselected", function()
		print("deselected!")
		shopMenu.Visible = false
	end)
	
shopMenu.CloseButton.MouseButton1Click:Connect(function()
	shopIcon:deselect()
end)

17 Likes

Could you turn this into an easy plugin to use? The stuff in the scripts looks hard lol. Thanks!

1 Like

I likely won’t have time myself to create a plugin although anyone else is welcome to contribute to the development of one.

We’ll aim to release some tutorials to help out beginners. If anyone out there fancies making tutorials in the meantime we can feature these on the thread and site.

5 Likes

Thanks! :blush:
Yeah it’d be wonderful if some people could make a plugin! Or you could even make a tutorial on it! :smile:

1 Like

Love this module a lot although I have a bit of a problem

How would I make it so that if a ReplicatedStorage.StringValue.Value changes it changes the Icon’s Label as well? I have a StringValue for song text that I would like to place on the top of the screen which works but when the song changes the title stays the same.

Code:

local player = game:GetService("Players").LocalPlayer
local playerGui = player.PlayerGui
local replicatedStorage = game:GetService("ReplicatedStorage")
local iconModule = replicatedStorage.Icon
local Icon = require(iconModule)
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)


local Hi = replicatedStorage:FindFirstChild("MusicTitle").Value

-- Apply BlueGradient Theme
IconController.setGameTheme(Themes.BlueGradient)

local Ye = Icon.new()
:setLabel('Song: ' .. Hi)
:setOrder(3)
:bindEvent("selected", function()
   print("selected!")
end)
:bindEvent("deselected", function()
   print("deselected!")
end)

I’ve tried a bunch of solutions for example a value changed function but nothing worked.

Hi.Changed:Connect(function()

How do I go about making this work? Anything would be appreciated :smiley:

3 Likes

Is ‘Hi’ the StringValue or StringValue.Value?

If it’s the StringValue the following should work:

Hi.Value.Changed:Connect(function()
   Ye:setLabel("Song".. Hi.Value.Value)
end)
6 Likes

‘Hi’ is an StringValue.Value. How should I go about making it work? Also where should I place the function, I’m assuming it’s the end although I might be wrong.

3 Likes

I’ve gone ahead and made it so that its just StringValue and not StringValue.Value, here is my code:

local playerGui = player.PlayerGui
local replicatedStorage = game:GetService("ReplicatedStorage")
local iconModule = replicatedStorage.Icon
local Icon = require(iconModule)
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)


local Hi = replicatedStorage:FindFirstChild("MusicTitle")

-- Apply BlueGradient Theme
IconController.setGameTheme(Themes.BlueGradient)

local Ye = Icon.new()
:setLabel('Song: ' .. Hi.Value)
:setOrder(3)
:bindEvent("selected", function()
	print("selected!")
end)
:bindEvent("deselected", function()
	print("deselected!")
end)

Hi.Value.Changed:Connect(function()
	Ye:setLabel("Song".. Hi.Value.Value)
end)

I keep getting this error

Players.KasimAkr.PlayerScripts.TopbarPlusClient:16: attempt to index nil with ‘Connect’

3 Likes