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

Resources Community Resources
#343

How are you setting iconBackgroundColor? icon:setTheme, icon:set(propertyName,...), through the theme module, etc?

Also how does it interfere with your theme? What’s your desired look vs what actually happens?

1 Like
#344

What type of theme is there and how can I make one ???

#345

I’m using :set("iconBackgroundColor", Color3.fromRGB(255, 0, 0)).
The icon becomes black: image
It is a selected icon that is locked from clicks.
Here’s the full constructor:

RedTeamCounter = Icon.new()
			:setMid()
			:setImage(7275142787)
			:setLabel("Red Team: 0%")
			:setSize(50)
			:setTopPadding(12)
			:setCornerRadius(0.2, 0)
			:select()
			:lock()
			:setOrder(4)
			:setEnabled(true)
			:set("iconBackgroundColor", Color3.fromRGB(255, 0, 0)),

I want the icon to be colored red.

#346

We have a section dedicated to explaining themes here:

#347

Setting the gradient back to white should solve that:

:set("iconBackgroundColor", Color3.fromRGB(255, 0, 0))
:set("iconGradientColor", ColorSequence.new(Color3.fromRGB(255, 255, 255)))
1 Like
#348

Thanks that works.

However, I’m still getting an issue with dropdowns not resizing appropriately.
This works fine:
image
But when the second icon’s label gets changed it doesn’t resize:
image
Only the top-most icon seems to be adjusted for.
Is there a way to have the icon adjust size for the largest icon inside the dropdown?

Another slight bug is that whenever you hover over a locked icon using :lock(), the click mouse icon appears until you move your mouse:
image

#349

Thanks for the report. For a quick fix to the former, you can do the following:

:bindEvent("toggled", function(icon)
	icon:_updateIconSize()
end)

I’ll then have permanent fixes for both of those in the next update.

1 Like
#350

Hello, I come to seek help or a tutorial type, how can I do the opening and closing video?

#351

If you’re looking to create a sliding UI toggle like that in the video, you can achieve it with TweenService and listening to icon events such as icon.selected and icon.deselected.

It’s well worth checking out the docs for more info and examples:

#352

Add this to the code for fix:

local humanoid = game.Players.LocalPlayer.Character.Humanoid
humanoid.HealthChanged:Connect(function(health)
	if health == 0 then
	    	nanobloxIcon:deselect()
	    	nanobloxIcon:lock()
	end
end)
#353

Humanoid is not a valid member of Model “Workspace.KINGfarihin”

#355

Do :WaitForChild() instead of ‘.’

#356

hi so like i have a tweensize for the gui how can i put it in the topbar script?


function openGui()
	open = true
	script.Parent.Parent.Frame:TweenSize(UDim2.new(0, 400,0, 337), "Out", "Quint", 1, true)
end

function closeGui()
	open = false
	script.Parent.Parent.Frame:TweenSize(UDim2.new(0,0,0,0), "Out", "Quint", 1, false)
end

script.Parent.MouseButton1Down:Connect(function()
	if open then
		closeGui()
	else
		openGui()
	end
end)
2 Likes
#357

Do it like this:

yourIcon:bindEvent("selected", function()
    openGui()
end)

yourIcon:bindEvent("deselected", function()
    closeGui()
end)
1 Like
#358

There is a blue line under openGui and closeGui

#359

I have my own GUI placed in the middle of the topbar, which has the potential to overlap with TopbarPlus icons (especially on smaller screens). Is there any way to integrate it into TopbarPlus?

#360

How to change the top bar icon position?

#361

Ben said that he won’t add a feature like that, he wants to keep the concept of this module.

1 Like
#362

Can you share an image of this?

#363

Pretty much what taehyung said, although you can use the following to modify icon offsets: