Plain border snake, thought it was cool, trying to replicate in full

I added a very basic list component, part manual, the website had a list so I wanted it look similar,

project, including link, this is just to represent the page, still working on layout -

lists is really nice! :slight_smile:

By the way: Realmac Software team — we need this for the CMS as well.

https://forums.realmacsoftware.com/t/checking-cms-background-works/52672?u=upssjw

I included here

I saw that.

I just don’t quite understand how your setup for the typography component works.

When I create a bulleted list in a .md file, it does generate a “list,” but without any bullets.

How does this work on your end?

what does your md look like for that part

I just basically used the code in the project above without the properties

---
# ======================================================
# đź§ľ BASIC PAGE SETTINGS
# ======================================================
title: "lorum ipsum"

site:
    pfad: "news"
    slug: "lor"
   

# ======================================================
# đź“… PUBLISHING INFO
# ======================================================

published: true
featured: true
draft: false
status: "published"

author: "lorum-ipsum"
site_name: "lorum-ipsum"

date:
    published: "2025-11-15"
    modified: "2025-11-15"

# ======================================================
# đź“° HEADLINES
# ======================================================
headline:
    short: "Lorem ipsum dolor sit amet"

    long: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
    
    subtitle: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."

# ======================================================
# đź“° DESCRIPTION
# ======================================================

description:
    short: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."

    long: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
    
    subline: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."

# ======================================================
# 🖼️ BANNER & IMAGE
# ======================================================

image:
    src: https://www.mydomain.com/resources/images/blog/800x450/shopping-billa-oeffnungszeiten.webp
    title: "Lorem ipsum dolor sit amet"
    alt: "Lorem ipsum dolor sit ame"
    copyright: ""
    type: remote
---




### Lorem ipsum dolor sit ame Lorem ipsum dolor sit ame Lorem ipsum dolor sit ame

Lorem ipsum dolor sit ameLorem ipsum dolor sit ameLorem ipsum dolor sit ameLorem ipsum dolor sit ameLorem ipsum dolor sit ameLorem ipsum dolor sit ameLorem ipsum dolor sit ameLorem ipsum dolor sit ame
<br>
<strong><u>Wien & Umgebung:</u></strong>
- 1150 Wien, Europlatz 1–3 – 05:30–23:00  
- 1300 Wien Flughafen, Terminal 1 – 05:30–20:00  
- 1300 Wien Flughafen, Terminal 3 – 06:00–22:00  
- 1300 Wien Flughafen, Ausfahrtsstraße – 06:30–22:00  
- 1020 Wien, Olympiaplatz 2 – 10:00–18:00  
- 1070 Wien, Mariahilfer Straße 38–48 – 10:00–18:00  
- 1200 Wien, Handelskai 94–96 – 10:00–18:00  
- 1100 Wien, Columbusplatz 7–8 – 10:00–18:00  
- 1230 Wien, Breitenfurter Straße 372 – 10:00–18:00  
- 1150 Wien, Gablenzgasse 5–13 – 10:00–18:00  
- 1150 Wien, Europaplatz 3 (WBHF) – 10:00–18:00  
- 1140 Wien, Albert-Schweizer-Gasse 6 – 10:00–18:00  
- 1210 Wien, Ignaz-Köck-Straße 1 – 10:00–18:00  
- 2201 Gerasdorf, G3 Platz 1 – 10:00–18:00  
- 2301 Groß-Enzersdorf, Wiener Straße 12 – 10:00–18:00  
<br>
<strong><u>Niederösterreich & Burgenland:</u></strong>
- 2700 Wr. Neustadt, Stadionstraße 12 – 10:00–18:00  
- 2410 Hainburg, Pressburger Reichsstraße 1 – 10:00–18:00  
<br>
<strong><u>Oberösterreich:</u></strong>
- 4400 Steyr, Kasernengasse 1A – 10:00–18:00  
- 4020 Linz, Wegscheiderstraße 3 – 10:00–18:00  
- 4040 Linz, Blütenstraße 12–23 – 10:00–18:00  
- 4600 Wels, Ginzkeystraße 27 – 10:00–18:00  
- 4810 Gmunden, Druckereistraße 8 – 10:00–18:00  
<br>
<strong><u>Salzburg & Salzburger Land:</u></strong>
- 5020 Salzburg, Münchner Bundesstraße 116 – 10:00–18:00  
- 5569 Zell am See, Kitzsteinhornstraße 40 – 10:00–18:00  
<br>
<strong><u>Steiermark:</u></strong>
- 8055 Seiersberg-Pirka, SC Seiersberg – 10:00–18:00  
- 8605 Kapfenberg, Siegfried-Marcus-Straße 7 – 10:00–18:00  
- 8605 [Kapfenberg](/steiermark/kapfenberg/), Wiener Straße 35A – 10:00–18:00  
- 8051 Graz, Wiener Straße 351 – 10:00–18:00  
- 8940 Liezen, Salzburgerstraße 1 – 10:00–18:00  
<br>
<u><strong>Kärnten:</u></strong>
- 9800 Spittal/Drau, Villacher Straße 79–83 – 10:00–18:00  
- 9500 [Villach](/kaernten/villach/), Bruno-Kreisky-Straße 25 – 10:00–18:00  
<br>
<strong><u>Tirol:</u></strong>
- 6300 Wörgl, Salzburger Straße 32 – 10:00–18:00  
<br>

#### Fazit

Lorem ipsum dolor sit ame Lorem ipsum dolor sit ame Lorem ipsum dolor sit amev Lorem ipsum dolor sit ame vLorem ipsum dolor sit ame

Elements CMS unable to read markdown lists at the moment?, every time Elements updates CMS I add those bit to try, when it eventually reads markdown lists etc I will try that

The Elements CMS supports markdown lists, it’ll convert it to HTML on preview/export. It’s just that we haven’t added list support to the Typography settings in the Theme Studio (yet!).

For now you can write your own CSS to style the lists how you want.

1 Like

I do have another list component no need to go into html just edit in the list in edit mode, I have been modifying it so a bit all over the place now

The code I used here was from the cms page, just 5 mins to add and add properties missing a few things, just for me to set the page up to copy

@dan

Have you got a project for others to use Dan or see

All you need to do is either add the Tailwind classes to your Typography component, or add some custom CSS to your project’s template.

Here are some example tailwind classes you could use on the Typography’s CSS Classes:

[&_ul]:list-disc
[&_ul]:pl-4
[&_ul]:mt-3
[&_ul]:mb-3
[&_ul_li]:my-1
[&_ul_li]:marker:text-gray-500

Or:

[&_ul]:list-disc
[&_ul]:pl-5
[&_ul]:space-y-2
[&_ul_li]:leading-relaxed
[&_ul_li]:text-gray-800

For ordered lists:

[&_ol]:list-decimal
[&_ol]:pl-5
[&_ol]:space-y-2
[&_ol_li]:my-1

And if you want tighter spacing:

[&_ul]:list-disc [&_ul]:pl-4 [&_ul_li]:my-0.5

Alternatively you can add the following to your project template’s <head> section:

ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

ul li {
  margin: 0.25rem 0;
  line-height: 1.5;
  color: #333;
}

ol {
  list-style-type: decimal;
  padding-left: 1.25rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

ol li {
  margin: 0.25rem 0;
  line-height: 1.5;
  color: #333;
}

I’d recommend the Tailwind classes approach, but the choice is yours :slight_smile:

2 Likes

Woohoo! That looks much better already :slight_smile: Thanks!

Oh wait, @ben

I added some internal links to my list, like here for example:

<br>
<strong><u>Styria:</u></strong>  
- 8605 [Kapfenberg](/steiermark/kapfenberg/), Wiener Straße 35A – 10:00–18:00  
- 8051 Graz, Wiener Straße 351 – 10:00–18:00  
<br>
<u><strong>Carinthia:</strong></u>  
- 9800 Spittal/Drau, Villacher Straße 79–83 – 10:00–18:00  
- 9500 [Villach](/kaernten/villach/), Bruno-Kreisky-Straße 25 – 10:00–18:00  
<br>

The link output itself works fine. BUT the link color and hover color are not being applied in the list.

When I add a link normally in the text, it displays correctly according to what I set in the typography theme.

FYI: For future reference I’ve added the details on list styling to the manual (just util we have support for it in the Typography Component).

You’ll need to specify link colours for list items. The list classes only touch:

  • ul
  • li
  • the list marker

They never touch a, so Tailwind has no reason to apply Typography link colours inside lists.

Something like this might work (not tested, just guessing here):

[&_ul_a]:text-blue-600
[&_ul_a:hover]:text-blue-800
[&_ul_a]:underline-offset-2
[&_ul_a:hover]:underline

Try adding that and let me know how you get on.

Thank you very much for that, Dan!

Now we’re slowly but surely getting to the point where I can move all my ALLOY blogs over to Elements.

It requires more coding than I expected, but I can handle that and I’m fine with it — even though it’s probably not an option for all users.

I’m curious to see what update will be released this week… I already have a suspicion. In one of your videos I think I spotted one or two new CMS components.

Not wanting to dampen your enthusiasm, however, we don’t have any new CMS components ready to ship.

We do have some very nice updates to the Form and Image Slider, more news on that very soon :slight_smile:

Dan says: fixes plus new additions to the CMS ^^ and I’ve spotted some “new” CMS components in one of Dan’s videos. But you’re probably several builds ahead :wink:

anyway, i’m happy to take whatever updates come.

working on my list component, indented lists

1 Like

a little over the top now

a bit more over the top