CSS for Presentation Slides

FAQ
#1

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

#2

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;
}
10 Likes
#3

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?

#4

Thankyou very much

#5

@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).

#6

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: