Make slides look like in Obsidian

[galettof]

Hello, I am new to making slides in Obsidian (still fairly new to Obsidian itself) and this plugin looks very nice.

I am looking for a way to make slides that keep formatting as close as possible to what my Obsidian notes look like by default. Here are some more details of what I am looking for.

• Maintain the same fonts in the slides as in the notes (I understand size will have to be adjusted to fit slides and that is okay).
• Maintain the same text formatting (some themes turn headers into all uppercase letters in the slides).
• Maintain the same text alignment. My notes are left-aligned or justified but slides appeared to centered by default. Setting center=false in the front matter does not appear to make a difference nor do a number of css based solutions that I found online.
• Maintain the same color and icons for callouts (this is important to me as I have spent some time customizing callouts for my own use).

I see that templates change the appearance of slides so maybe this is matter of templates. In that case, I wish there was a template that kept as much as possible of the formatting/styling as what I have when I type regular notes in Obsidian, or perhaps one that applied as few customizations as possible. Either way, I am not particularly well-versed in css.

Thank you in advance for any suggestions.

[galettof]

Actually, I just realized that the appearance of the built-in callouts is changed, while my own custom callouts are not rendered at all. 😞

[ebullient]

The dev console works against the preview view. You can also send it to a separate browser and use the dev console there.

the classes are pretty similar, but you'd have to add something if you wanted to reuse obsidian-like variables:

<div class="callout callout-color-default">
<div class="callout-title">
<div class="callout-icon">

<p><svg class="svg-inline--fa fa-pencil" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pencil" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"></path></svg><!-- <i class="fas fa-pencil-alt"></i> Font Awesome fontawesome.com --></p>
</div>
<div class="callout-title-inner">

<p>Note</p>
</div>
</div>
<div class="callout-content">

<p>This is a callout</p>
</div>
</div>

[galettof]

Thank you, much appreciated!

[ebullient]

Actually.. I do use variables for colors: https://github.com/ebullient/obsidian-slides-extended/blob/main/src/scss/layout/_callouts.scss

[ebullient]

I just added the type as a data attribute, which should make it a little easier to fuss with colors.

[galettof]

Great, thank you!