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:
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.
@chaostorm or others:
Thansk for the suggestions here. I have my spinner appearing, but 2 questions:
1 - where should the spinner be placed? inside cell #1 of your repeating group? Or outside/just before the repeating group
2 - what’s the recommended approach to have the spinner display only until the first cell in your repeating group renders? What’s the conditional and where does it live?
UPDATE: I think I answered my own question. Placed it in front of/outside the repeating group, not visible by default, and conditional to make visible if repeating group “is loading” (which I didn’t realize was a thing until just now) 
@ThatFizzGuy A thing to note on this topic: Bubble has its own spinner it shows while a repeating group is loading, but in most cases you don’t get to see it because the group loads pretty quickly. You can’t really customize the default spinner, though, except for the color (which you can change in Settings > General > Repeating group spinner color).
You did figure out the rest on your own. One thing I’d add is that you may also want to consider hiding the RG while it’s loading to avoid an occasional double spinner situation where the user can see both your custom spinner and Bubble’s default spinner displayed at the same time.
You are welcome!