UL and OL, Font not Inherited

Looks like <ul> and <ol> does not inherit the project’s default font.
At least not the font weight and the color.
Is this as expected, or could something be wrong? :smiley:
(It’s easy enough to fix, by defining ul and ol in the Class Library.)

2 Likes

Yes, the default font selection does not include list items.

@Norm does this have any reason? Why is the default font not placed on body, but on p, h1-6, etc.?

3 Likes

Shouldn’t matter until you add a class to change the items in the ul or li, as bootstrap doesn’t add any typography styles to lists. So p, h1-6 etc will inherit.

I just did a test to confirm, and it inherits for me.

Are you sure you dont have a custom class defining it? Check the browser inspector.

Although it would be nice to be able to edit existing classes without Blocs messing it up and removing spaces, what’s the deal with that? The ability to add spaces should be default?

CleanShot 2023-12-10 at 07.43.57@2x

try adding ,li p

CleanShot 2023-12-10 at 07.45.04@2x

1 Like

So, the lists I’m seeing this on, is inside VoltCMS articles, not sure if anything there might override default inheritance.

So, I removed my ol and ul classes. (I was unable to define one ol, ul entry in Class Manager, as the latter became .ul, so I have one entry for each. And yes, would be nice to be able to just create with spaces and rename to classes with spaces.)

As for the color, it seems it’s inherited from .d-block:
bilde

Not sure if this mean font is inherited from body:
bilde

I set font and color in Project Settings:

URL to lab site, without my classes to override ul:

URL to the production site, where I defined ul and ol to have #ffffff and the same font as my project:

Oh right, I see you have not used typography tags in your list, that explains it. Bootstrap does apply typography to the body tag, which Blocs doesn’t, as @jannis mentioned above. This usually doesn’t matter, as Blocs brics use typography tags.

I assume you have just added html here, not used the Blocs list bric (which I assumed you did)

By the way, for diagnosing stuff, it’s best not to use combine all. :smile:

eg.

Bootstrap has this for the body tag

And the default var for font family… (you have to follow the rabbit trail as var(–bs-body-font-family) has var(–bs-font-sans-serif) :laughing:)

So text that isn’t in a typography tag is going to inherit that.

1 Like

Maybe I should wrap the volt-blog bric in something to make it inherit typography stuff :thinking: :nerd_face:

Just add a body class, it would create a fall back.

1 Like

As in add my own class with font and color, and apply that to body?
Or as in apply some existing BS class to the bric? :smiley:

Just add it to the class manager.

1 Like

… And define color and font for this, as well, I assume … :slight_smile:
Edit: Which I just tried …

But somehow that didn’t work:
bilde

Confusing … :thinking: I guess I’m too tired … :yawning_face:

Probably just Blocs adding some styling somewhere.

Probably easier to just make sure your content is in tags.

If I remember correctly Blocs wraps list items in a paragraph tag?

1 Like

That why I think he’s used a code widget to add some content here.

Well, this text with the UL is a Volt blog article.
There is a code block, but that’s not wrapping the Volt Blog Bric:
bilde

The code block just fetches category, if set:

<h2 style="text-transform:uppercase"><?php
if (isset($_GET['category'])) {
    echo $_GET['category'];
    echo " ";
} ?>Blog Post(s):</h2>

If digging more is interesting, I’ll publish a version without the combined CSS … :smiley:
Edit: I published a non-combined/minified version (at the first of the two URL’s I shared above).

BTW, if I share the URL to my site using SMS or whatever, it seems google etc. fetches the featured image of my latest blog post as illustration. Is there a place I can define default opengraph image for my site/main URL? (Never now if my latest post has a nice image) :wink: