Forum Academy Marketplace Showcase Pricing Features

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

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

a {
   outline: 0;
}

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! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

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

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; }

3 Likes

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

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

1 Like

@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.

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.

My bad. I forgot the tags.

1 Like

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

Screen Shot 2020-10-06 at 7.58.10 PM

I also tried:

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

Hi @GB44,

Welcome to the world of CSS. :slight_smile:

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

Regards

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 - https://swipelisted.bubbleapps.io/version-test/

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.

image

1 Like