Forum Academy Marketplace Showcase Pricing Features

Adding a CSS component

Hi,

I am new to bubble, and I have been trying for a while now to experiment with adding some CSS stylings to my pages, but to no avail. I added inline CSS inside the HTML component, but that is very limited, and sometimes I want to add a style for the entire page.

I tried adding the style in the header, but it didnt work either. Did anyone manage to make such changes? Any advice would be super appreciated.

Cheers

@samednakhla You can definitely put styles in the page header.

If you are looking to add styles just for a particular page, this is where to do that:

page-header

If you want to add styles which you would be able to access from any page, go to Settings > SEO / metatags > Advanced settings > Script/meta tags in the header.

Whichever you end up using, make sure you include the HTML <style> tag like this:

<style>
/* Your CSS goes here */
</style>

Now that you know how, here’s also a word of warning based on my experience. I use this approach quite a lot, but it’s not a panacea. Bubble’s antiquated approach of absolute positioning of elements on the page will quickly make you go crazy once you start applying your custom CSS. A good rule of thumb is that tweaking positioning and responsiveness usually breaks things, whereas changing what the element looks like doesn’t. Fingers crossed their upcoming switch to Flexbox fixes the former for good, but until then, it is what it is.

Thanks @chaostorm , I actually managed to add it shortly after posting just like you showed, and but it doesn’t work very well … just like you said, I am going nuts with the positioning of the elements I am adding on the page, I dont understand how bubble is placing them.

That is some awesome news about Flexbox, any idea when that will be available?

You are welcome!

Based on @josh’s last community update, sometime soon:

The new responsive design engine is basically built, and we’re now doing user testing and iterating based on feedback. Our sense is that it’s a substantial improvement over the status quo, although it’s not a magic bullet and there’s still going to be a learning curve and some elements that aren’t perfectly intuitive. The new system is fairly similar to the old system: you still free-draw elements on one tab, then tweak responsive behavior on another tab. The main difference is that the underlying algorithm is now based on CSS, which makes it much faster and smoother to render. Using the new CSS algorithm, it’s easier for us to tweak features, and we’ve taken advantage of this to make some improvements, such as phasing out hiding rules in favor of a single type of invisibility that can either remove things from the layout or leave the space, letting you adjust margins manually on the responsive tab, and more intuitive layout options. Anyway, we’re still making small adjustments to all of these features, though likely not making any radical changes at this point. Once we’re happy with it, we’ll preview it with template creators so they can start porting things to the new system.