UI Niggle - Borders on components

Hi,
I’m hoping this is a simple one…
In my menu bar I have some icons within groups to enable them to keep their locations. Although all of the borders are set to none, whenever I switch to another app and then switch back again, the tab that is currently selected shows a border around it.
How can I stop this happening as it looks a bit rubbish from a UI perspective?


Thanks.

You have to add this snippet of CSS to your page.

* {
outline:none !important;
}

To add the CSS, you can use a plugin such as CSS tools.

Why wouldn’t you style the selected icon anyways? … Your user would need to know where they are.

Perhaps a flat color background for the selected group and a white to the icon?

@tim12333 css suggestion is excellent btw :+1:t2:

… many ways to do things in Bubble :grinning:

Thanks for the response. I have never used CSS before so apologies for my thickness! I have added the CSS Tools plugin and added your suggested CSS to an action as part of my page load Workflow but this doesn’t seem to do anything. I am sure I am missing a step somewhere?

Thanks. I agree styling the icons would be nice but I have zero knowledge on how to do this! Is there a good article/post somewhere that covers this?

Remove the <script> stuff, and add <style> </style> around the CSS.

So it should look like

<style>
* {
outline:none !important;
}
</style>

That should work, if not try the CSS tools plugin by Zeroqode without the style tags, as I’m not familiar with the plugin you have.

@cmarchan Even if the element is styled with borders, this problem will still happen. I do agree though, some kind of styling on the selected element would be useful.

I should note that outline and borders are not the same thing. With this CSS applied, you can still use borders on your elements.

And to answer the additional question @myholidayguide
It looks like those icons are images that you uploaded yourself and are not apart of the Bubble icon pack.

To color those, you’ll have to use conditionals to show a different uploaded image (same icon just different color)

That’s perfect Tim. The CSS now works so that’s great.

Understand re the conditions on the icons.

What would best practice be for those rather than the route I’ve chosen currently?

Thanks.