CSS for Presentation Slides

On this post, please share any CSS code which you used to enhance/modify the SLIDES feature in Obsidian.

1 Like

This changes the font size of all elements in presentation mode.

.reveal {
  font-size: 1em;
}

This changes the font size of tables.

.reveal table {
  font-size: 0.2em;
}

This changes the size and font colour of the headings.

.reveal h1 {
  font-size: 5em;
  color: #B22222;
}
.reveal h2 {
  font-size: 5em;
  color: #B22222;
}
.reveal h3 {
  font-size: 4em;
  color: #B22222;
}
.reveal h4 {
  font-size: 3em;
  color: #B22222;
}
.reveal h5 {
  font-size: 2em;
  color: #B22222;
}
.reveal h6 {
  font-size: 1.5em;
  color: #B22222;
}

This changes the font size of the paragraphs, colours them black and justifies them.

.reveal p {
    font-size: 1em;
    color: black;
    text-align: justify;
}
14 Likes

Great! I just need now to scale the images to the slide. There is a command in CSS called contain. How I can write a snippet to make it work?

Thankyou very much

@Chetachi sorry to tag you here. Just wanted to grab your attention to this post.

Slide Show plugin is really a boon in Obsidian. But this is the most ignored feature.
Do you have any improvement ideas for this mode?
(Btw I like your theme very much, it is awesome).

Thank you for this.

I was really trying to make a presentation but the fact that I can’t fit 3 bullet points in a slide is a bit frustrating (if we consider the fact that many other things work so well)—thanks for this snippet that make it possible.
Also would it be possible to make the colour constant with the theme?

I also tried to fit all the content in the slide, and the only way (yet not fully) was to decrease the zoom to the lowest (while in presentation mode). So, my question is that if it would be possible to autofit content to the slide?

Thank you :slight_smile:

But in which css file should I write it? Could’nt find something about it. slide.css? And in which folder? Thanks in advance.

Just open css snippets folder, create an empty any-title-you-like.css file using notepad application, and copy paste the code and save.
then, go back to obsidian’s appearance setting and toggle the any-title-you-like.css file. And you are done! :grinning_face_with_smiling_eyes:

2 Likes