How to create a price list [Video]

Hi! I just published my first Sparkle tutorial …
In this tutorial we are going to take a look on how to create a price list in Sparkle using just one text element. This is a bit advanced because it requires a few lines of custom CSS.
I’ve added the custom CSS link in the video description.

Part 1

Part 2


This is great! Thanks so much!
Very timely for me because I have to produce a new restaurant menu this week.

Might you be able to paste your css code into this blog post, please?
I could probably copy it out of the video, but ….

Thanks so much!

1 Like

Hi @macmancape … Thanks!
Here is the CSS used.

Part 1

Part 2


Nice work. Thank you for sharing.
I’m not good in writing code, but have you considered to use CSS GRID?

… I use CSS Grid Layout Module and CSS Properties (and no Javascript) to layout tables that wrap columns depending on screen width, which further changes to a card based on layout for small screens.

Maybe Mr Duncan can tell us more about this method to design a table (without using “table”)

Mr. F.

1 Like

Hi! Thanks!
Depends on what you want to achieve, CSS grids are great for “grids” (or to maybe create/simulate a table) … in my example I’ve used CSS flexbox because that’s what I need it.

The idea was to enhance the output Sparkle generates without braking the layout, but rely on the powerful visual experience of the text element that Sparkle provides.

I’ll try to see if there is a way to “create” a table from the text element, but I don’t want to go completely overboard and create completely new elements from code because this is outside Sparkle area/scope.

1 Like

Thanks a lot @luciandesign I did exactly your tutorial, but I did not get those dots. Maybe I did something wrong. I guess I have to retry it. Do you have any suggestions what I might have done wrong? Thanks in advance

Hi @geneprofi I’ve attached my Sparkle file for this tutorial (I know that is was a bit complex) … Let me know if it works.

Thanks a lot @luciandesign in fact I did it exacly like you did, and at the end I checked it once again with your script, but mine is without the orange dots… I comes like this

Hi @geneprofi OMG … you are right the output Sparkle generates is a bit different (the first SPAN tag is missing) … this is why is not working.
You can force Sparkle to create a SPAN tags inside the P tag by making the space between the Title and the Price tag with the “Menu body” text style.

Here is your updated Sparkle file:

I think in the end I will remove this tutorial because the output is not consistent and it will create more confusion. You can write to me in private.

Thanks a lot Lucian, thats really great, in fact I re-did it more than once. btw. your other onepager is really a wonderful tool. Thanks once again. Eugene