Need help with styling

Neville · 2024-08-21T11:04:36.151+00:00

Hey all, Toddle newbie here coming from Webflow and Wized.I need some help with styling please.With my Webflow experience, I know I can style all my elements the same just by adjusting the class. For example, if I want all my elements to have a 1.6 line height, I change it once and it's done everywhere.I'm trying to figure out how to do this in Toddle, but so far no luck. Doing this with components is a bit silly, because I would have to build a lot of components even for things as simple as a . I've looked at adding classes to elements, but that only works for the specific element.Worst case I can override the styles by adding a Style element (wrapped in a component) to each page, and override the styles there. However this is manual coding and all the advantages of visual design are lost.I think there may be something in the future with Themes, but not sure. can you point me in the right direction please? Thanks in advance for any help!

Neville
1 year ago
Hey all, Toddle newbie here coming from Webflow and Wized.

I need some help with styling please.

With my Webflow experience, I know I can style all my elements the same just by adjusting the class. For example, if I want all my <p> elements to have a 1.6 line height, I change it once and it's done everywhere.

I'm trying to figure out how to do this in Toddle, but so far no luck. Doing this with components is a bit silly, because I would have to build a lot of components even for things as simple as a <p>. I've looked at adding classes to elements, but that only works for the specific element.

Worst case I can override the styles by adding a Style element (wrapped in a component) to each page, and override the styles there. However this is manual coding and all the advantages of visual design are lost.

I think there may be something in the future with Themes, but not sure.

@Andreas Møller can you point me in the right direction please?

Thanks in advance for any help!
Tod
1 year ago
Great energy @Neville! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
Max
1 year ago
You should definitely be using components. There is nothing silly about it 😁
This will create a very clean and scalable design system
Max
1 year ago
I personally prefer the component approach to CSS styling. I've never worked on a project where centralized CSS became a problem at some point
Andreas Møller
1 year ago
Webflow added components as well didn’t they?
@Andreas Møller
Webflow added components as well didn’t they?
Max
1 year ago
You are right. But it seems that they work completely different from Toddle components. Looks like they are just duplicates without attributes. But I just quickly scanned the docs
Neville
1 year ago
Thanks guys, that is helpful. I've just run a quick test to see how this could work, and I can certainly see the potential of components.

However, I have a problem which may be an edge case:

The app that I am building is a document library management system. I have a VBA add-in in Word that takes the Word source and turns it into HTML. The Word document and resulting HTML are in very well-defined formats, so I can generate the HTML reliably.

This HTML content is stored in a Xano back end, and the user can search the library and view the documents. This is obviously where the styles are so important.

I could have used Toddle components for this if the Toddle HTML had actually contained the name of the component as I defined it in Toddle. For example, I created a component called "QA Block" which consists of a couple of divs with some content in each. I could modify the HTML generation in my VBA to generate the component name, but that does not appear in the Toddle page.

So I think I'm stuck with adding CSS to my "view document" page?
@Neville
Thanks guys, that is helpful. I've just run a quick test to see how this could work, and I can certainly see the potential of components.

However, I have a problem which may be an edge case:

The app that I am building is a document library management system. I have a VBA add-in in Word that takes the Word source and turns it into HTML. The Word document and resulting HTML are in very well-defined formats, so I can generate the HTML reliably.

This HTML content is stored in a Xano back end, and the user can search the library and view the documents. This is obviously where the styles are so important.

I could have used Toddle components for this if the Toddle HTML had actually contained the name of the component as I defined it in Toddle. For example, I created a component called "QA Block" which consists of a couple of divs with some content in each. I could modify the HTML generation in my VBA to generate the component name, but that does not appear in the Toddle page.

So I think I'm stuck with adding CSS to my "view document" page?
Lucas G
1 year ago
It wouldn't work that way (the having the doc output a toddle component)
If I understand correctly, you have HTML saved in your database
Neville
1 year ago
correct
Lucas G
1 year ago
And you basically need a doc viewer
Neville
1 year ago
yep - that uses the specific styles
Lucas G
1 year ago
Would you be able to use somethin glike the HTML block package
You could make tweaks to it to have the HTML rendered how you need it
Neville
1 year ago
I will have a quick look at it - but I suspect the challenge will be similar. Here's a screenshot of what the final content looks like
Lucas G
1 year ago
Ultimately, I feel like you'll eventually want to store the data in regular columns in a database and not just store HTML from a doc. That would be your ideal scenario as you'd have the most control over your layouts
That said, the HTML component could have it's own scoped classes
They would act as 'pseudo' global classes, assuming you always use the same ones
The component would be able to render it
Neville
1 year ago
Thanks Lucas. Each document in the Xano back end is a record in the documents table, and each doc has one or more versions (draft, published, archived). Each version has multiple content types (HTML, Word and PDF) each stored as attachments - so I think that bit is handled correctly.
Neville
1 year ago
I took a look at the HTML Block package - as I suspected I would have to do a lot of work.

Just so you guys know, I have the styles working about 80% because I was able to export the Webflow CSS and am adjusting that. It gets me most of the way there, but not all the way.

So this is not a big issue, but it does highlight what I think is one of Toddle's few limitations - styling is not easy to do or maintain. Hope there's a better solution for that in the future! Other than that, my app dev work is about 100x faster in Toddle than my previous tech stack.
Lucas G
1 year ago
Well the idea is that you'd use components so updating the component will always update entire app
Meaning maintaining things becomes a whole lot easier
In this case what I was saying was that if you already have set classes that are always used, the component can have its own 'stylesheet' basically
Max
1 year ago
I agree with @Lucas G. Ideally, I would store the documents in a structured manner. I'd do it as JSON if they vary a lot in structure. Then you have more control over how you process it. HTML is not too easy to work with. If you want to go with HTML, the <style> tag is probably your best option. What did you experience that did not work?
Andreas Møller
1 year ago
Honestly the style tag is not a terrible choice for this scenario. You would do the same thing in almost any case if you are rendering HTML directly from the server. You can still use the html-block component, adn just add the style tag next to it.

Need help with styling

Neville

Tod

Max

Max

Andreas Møller

Max

Neville

Lucas G

Neville

Lucas G

Neville

Lucas G

Neville

Lucas G

Neville

Neville

Lucas G

Max

Andreas Møller