Forum Academy Marketplace Showcase Pricing Features

Styling pure HTML content with CSS - Impossible?

Need help
#1

Hi,

I have the following situation. I want to have a blog on bubble driving traffic to my Bubble Webapp. Since bubble is not a suitable CMS system I use airtable to create the content for blogposts and push new/updated blogpost content to Bubble via a Zapier Integration. This works like a charm.

The Problem:
We all know that the main part of a post is the actual body which is typically written in Markdown language. Since bubble does not have a markdown parser and available markdown plugins focus only on the markdown editor, I use a Zapier transformation to convert markdown into HTML and push the HTML code to bubble as a text.

So actually it should be so easy for Bubble to display html content properly (headings, bullet-points and so on) as it can be identified via HTML tags.

This is my sample content I get from Zapier which I am not able to display anyhow properly in Bubble. I tried two options for about a whole weekend:

  1. Reference the text body (which is HTML content) directly in the HTML element >> This worked only when ticking the checkbox “Display as i-Frame” in the HTML element. >> I want to avoid this
  2. Reference the text body in a text element and assign CSS styling to headings >> Nothing ever happened to my actual text. Not sure, what I am doing wrong here, but after trying for a whole weekend it seems to be rocket science or I am just stupid. Maybe you have an idea. Sample content below.

I am a large Heading

I am a very beautiful quote and this quote will never end

I am a medium Heading

  1. I am number One

  2. I am number Two [ ] I am a checkbox [ ] I am another checkbox I am bold I am italic and bold ~~I am a strikethrough~~

  3. I am a bullet

  4. I am another bullet
#2

Since my sample was rendered in HTML here (unfortunately not in my bubble app :smile:) find the screenshot below image|311x500

#3

I got it working now (with the HTML element but WITHOUT using the iFrame option).
The solution was to defining a div class in the html element which needs to be referenced by .classname (the one you defined with “…” in the div class of the html element) in the html header section on the page.

1 Like
#4

Great that you solved your own issue! Just curious as to why you say Bubble isn’t a good CMS system?

#5

Hi,

I am not saying that you could not build a CMS system with bubble. However, since I need the CMS for generating content and the main purpose of my bubble app is not to create content but to display content in various forms, it makes more sense for me to use an external CMS.
While you could setup input screens, review screens and content management screens (your own “backend”) you get all of this out-of-the-box with other providers (I.e. easily switching between various views such as Kanban, Gant and stuff like that. For sure this costs some money, but I try to avoid rebuilding what exists already… Cheers!

#6

Ah okay, that sounds reasonable.

Personally i always build some form of CMS for my clients cause i honestly find integrating other systems with Bubble not worth the costs or complications.

#7

Actually, integrating via API is like pulling data from the bubble database (at least for the Airtable API). However, it slows down performance quite a bit so I was not happy with it. But using Zapier makes integrations so easy. I actually integrated Airtable via Zapier for creating (or if record exists in bubble > updating) in an hour or so. Well, that costs like $30 a month… However, if you have basic requirements it can also makes a lot of sense to build it in bubble.