Saturday, January 1, 2022

Obsidian - Making slide down bar for Presentation mode


Obsidian's presentation mode only shows one page, and you cannot go to the next page.

If you copy the following CSS snippet and put it in the .obsidian -> snippets -> obsidian.css file, a slide bar will appear on the right side where you can slide down for all slides.


▶ obsidian.css


/*
CSS snippet that adds scrollbars on Obsidian slideshow slides in cases where content
would normally overflow and be hidden
*/

/* Apply styles to containing divs for slides */
.slides {
/* Set overflows to allow for auto vertical scroll bar and no horizontal scroll bar */
overflow-x: hidden !important;
overflow-y: auto !important;

/* Enable pointer events so users can click and drag on scrollbars */
pointer-events: auto !important;
}

/* Apply styles that apply directly to slides */
.slides > section {
/* Create flex container to arrange auto-generated elements by Obsidian on each slide */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

/*
Snippet to make slideshow slides take up full height of slides' container div
*/
.slides {
height: 100% !important;
}

/*
Snippet to make slideshow slides take up full height of slides' container div
*/
.slides {
height: 100% !important;
}

/*
Stylesheet to change the color of the slide controls to purple to better match the rest of the interface
*/

/* Change progress bar color to be purple */
.progress span {
background-color: var(--text-accent) !important;
}

/* Change default slide control button colors to purple */
.reveal .controls {
color: var(--text-accent)
}

/* Set control hover color to be a slightly lighter purple */
.reveal .controls:hover {
color: var(--text-accent-hover)
}

.slides-close-btn {
color: #48474494;
}


No comments: