Help with a CSS for Live Preview

Custom CSS & Theme Design
,
1

Hello, everyone.

I use a CSS that works perfectly in the reading mode of Obsidian, but I haven’t found a way to make it work in Live Preview mode.

I am completely inexperienced in programming and “made this CSS” by piecing together snippets from this very forum. It might seem like the simplest thing in the world to solve, but for someone who doesn’t understand the subject, it is extremely difficult, even after seeing countless topics on the forum.

I would appreciate any help you can provide.

Here is the code:

ul li, ol li {
    font-size: 0.8em; /* Applies the font size to all list items */
    color: #3A3A49;   /* Sets the text color */
    --bold-color: #E59D74;
    --italic-color: #9D4A4A;
    --bold-modifier: 100;
}

/* Specific styles for dark mode */
@media (prefers-color-scheme: dark) {
    ul li, ol li {
        color: #ABABAB;  /* Text color for dark mode */
        --bold-color: #FEDCB8;
        --italic-color: #D5A5A5;
        --bold-modifier: 100;
    }
}

By the way, I use the Minimal Theme and the Hider, Minimal Theme Settings, and Style Settings plugins, which I believe are the only ones that affect the app’s appearance.

Thank you in advance.

2

Ignoring whatever css you have now, can you simply explain what you are trying to achieve in the editor (source mode and live preview) and reading view?

1 Like
3

I am just trying to reduce the size of the text in the lists.

4

I am just trying to reduce the size of the text in the lists.

5

In the editor (source mode and live preview), this would be the simplest to take care of the list font size.

.HyperMD-list-line {
    font-size: 0.8em;
}

Screenshot 2025-01-12 at 9.52.28
Screenshot 2025-01-12 at 9.52.281444×734 28.6 KB

Tested in the default and Minimal themes.

If you wanted to change the color as well:

.HyperMD-list-line {
    font-size: 0.8em;
    color: limegreen;
}

or separated by color scheme:

.theme-light .HyperMD-list-line {
    font-size: 0.8em;
    color: limegreen;
}

.theme-dark .HyperMD-list-line {
    font-size: 0.8em;
    color: hotpink;
}
6

Thank you very much for your help, Ariehen.

It worked!

7

Ariehen, I would like to ask a question. Is it possible to set the lists in a document to remain collapsed by default, or is that something that can only be achieved through a plugin? I ask because I use extensive documents with multiple large lists that I would like to keep collapsed for better visibility of these documents, and only open them when I want to see their content, but I haven’t found any way to do this.

Thanks

1 Like
8

I’m not sure about keeping lists collapsed, but a list within a callout can be collapsed as default I know.

And I do believe aection should keep their status when being reopened. But not sure if the same can be done for lists.