How can I add css to a page or my entire application?

[GB44]

How can I add css to a page or my entire application? E.g.

a {
   outline: 0;
}

[J805]

Is this what you need help with? What causes these ant lines?

I think I used this plugin: https://bubble.io/plugin/css-tools-1504424270272x619283445634039800

Hope that helps!

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

• One-on-One Tutoring
• eLearning Hub
• Video Tutorials
• No-Code Classes

[mangooly]

Hi @GB44,

If you want to add CSS to the whole application, using your example, you can add it here,

If you want to add CSS to a particular page, you have to open the settings popup (Click anywhere on a page) and include the CSS in the HTML header section,

PS. Remember: You might have to add ‘!important’ to ignore Bubble styling.

eg. a { outline: 0!important; }

[GB44]

@GB44

a {
   outline: 0;
}

The setting worked! Great info re that and the page-specific <header> tagging. Thanks!

[GB44]

Thanks! @mangooly’s answer was what I was hoping for - a solution with no plugin required.

[GB44]

@mangooly @Bubble - Weird - On mobile I see the css flash up at the top of screen before the app screen appears. That sound familiar? Def not good.

[mangooly]

Hi @GB44,

Can you be more specific? Do you mean the CSS code? Thats most probably because there is an error in the CSS, some tag isn’t closed or property missing.

Can you share a video or something, not exactly sure what you mean.

[GB44]

My bad. I forgot the tags.

[GB44]

@GB44

outline: 0;

Hi @mangooly, I think it works on Chrome but not Safari?

I also tried:

a, a:active, a:focus {
   outline: none;
}

[mangooly]

Hi @GB44,

Welcome to the world of CSS.

You are using the < SCRIPT > tag when you should be using the < STYLE > tag for CSS.
Hope that helps.

Regards

[GB44]

That’s embarrassing. I knew that! Still not working. See below with view source showing the script tag in place. I even added !important. And I even tried seeing if I could change it to white with this red outline test. Is it possible it’s a different element that is getting the outline?

The outline appears to mirror my containing group for that icon and text. I have a left and right border for that group - and the dotted lines appear on top of those left and right borders.

Here’s the page url if that helps - Your Marketing swipe list | SwipeListed

[mangooly]

Hi @GB44,

Just saw this now, didn’t get a notification. You need to identify the group container in the html and add the styling to that. I also recommend you add an id to that container so that you can apply the right styling to that particular group container.

Eg.

[samnichols]

Just adding my little note: If you’re not yet on a paid plan, anything you apply to the or tags won’t apply. You can, however, add an HTML element to the page itself and add your script/stylesheets to at least test if your styles are applying and your JS is working.

[gary.homewood]

@mangooly Continuing the discussion from How can I add css to a page or my entire application?:

I have successfully added CSS to my application by adding a style tag to the Settings > Script/meta tags in header section as detailed above.

For more than a handful of rules, I imagine this will become difficult to maintain. Are there any performance considerations I should be aware of? How would I link a whole CSS stylesheet?