Modifying slides styling with cssclasses does not work

[aLazar]

What I’m trying to do

I wanted to change the styling of some elements in the presentation slides. I created the following snippet which worked:

.reveal h1 {
    font-size: 1.25em;
    text-transform: none;
}

.reveal h2 {
    font-size: 0.8em;
    text-transform: none
}

.reveal h3 {
    font-size: 0.65;
    text-transform: none
}

.reveal .slides p {
    text-align: left;
    font-size: x-large;
}

.reveal ul {
    display: block;
    font-size: x-large;
}

.reveal ol {
    display: block;
    font-size: x-large;
}

However this snippet applies itself to all notes, but I want to be able to apply it to specific notes.

Things I have tried

I’ve tried creating a cssclass like so:

.basic.reveal h1 {
    font-size: 1.25em;
    text-transform: none;
}

Adding basic to cssclasses does nothing. I tried looking on the internet and couldn’t find a solution. I’m probably missing something, perhaps because I’m trying to change the slides rather than the note itself.

[ariehen]

cssclasses are applied to the .markdown-source-view (Source mode and Live Preview) and .markdown-preview-view (Reading view) elements. See https://forum.obsidian.md/t/using-cssclasses-in-snippets/100577 for a few more details.

I don’t see those in slides, unfortunately, so I don’t think you can apply any cssclass to them (without a plugin).

---

You could have a look at https://www.ebullient.dev/projects/obsidian-slides-extended/themes. It appears you can write your own theme file and apply it from the YAML/Properties.

[aLazar]

I’ve tried the extension and although it did not work well with my css snippet, I managed to find a workaround using the FrontMatter configurations.

Thanks for the help.