Tweaks

Tweaks

A collection of small CSS snippets for Obsidian

CSSAny theme
# Obsidian Tweaks
A collection of small CSS snippets and themes for Obsidian.

Obsidian is a markdown editor designed to act as a personal knowledge base and note-taking software. Obsidian is great, but it has a few quirks that make using certain features of it (the slideshow plugin, for example) a bit frustrating. Luckily, Obsidian has native support for adding custom CSS to any part of the program. This repository is a collection of CSS files that I've written to enhance my Obsidian experience.

You can check out Obsidian [here](https://obsidian.md/).


Feel free to contribute to this repository if you'd like.

Below is an explanation of what each stylesheet does.

# Snippets

### Scrollable Slides
---
Obsidian has a core plugin that will automatically create slideshows from your notes using the `---` symbol as a delimiter for the slides. One issue this plugin has, however, is that the slides are not responsive. If you put too much content on a slide, it simply overflows and content is hidden beneath the slide's container div. The Scrollable Slides stylesheet automatically adds a scrollbar to overflowing slides so that content is not simply clipped when overflowing. 

### Slide Image Margins
---
Occasionally, the slideshow plugin places images in such a way that the bottom portion of them are cut off. This stylesheet sets the margins of images in slideshows to 0 so that they display fully on the slide. This stylesheet is not needed if you're using the Scrollable Slides snippet.

### Purple Code Markdown
---
By default, code markdown that isn't assigned to be styled as a particular language is displayed in a bright red text. The Purple Code Markdown snippet changes that default color to Obsidian's text accent color (a purple tone) to better match the rest of the UI.

### Full Width Slides
---
Slideshow slides do not normally take up the full width of their container div. Full Width Slides makes each slide as wide as its container div.

### Full Height Slides
---
Similar to Full Width Slides, Full Height Slides makes slides take up the entire height of their container div.

### Better Latex Errors
---
Obsidian normally shows Latex errors as text highlighted with a tight and bright yellow background. This snippet changes the error text to be much clearer by making the background color a softer color, making the error text bold and easier to read, and adding padding to the text so the background color interferes less with the recognition of letters.

### Purple Slide Controls
---
This snippet changes the color of the slide controls (the progress bar and the left/right arrow buttons) to a purple color to better match the rest of the interface.

### Purple Slide Links
---
Changes the link color in slideshows to match the link color in other parts of Obsidian.

# Themes

### Hyperlegible Font
---
This theme changes the default Obsidian font to [Atkinson Hyperlegible](https://fonts.google.com/specimen/Atkinson+Hyperlegible), a font designed to be legible to those with low vision.

### Extra Dark
---
Turns the default Obsidian dark theme to a much darker one, making most backgrounds pitch black.

### Screenplay
---
The Screenplay theme makes Obsidian look like a screenplay/script.
- Use `#` for scene titles
- Use `##` for intercuts
- Use `###` for character names in dialog sections
- Use `>` for character dialog
- Use `####` for transition text

![Screenplay theme screenshot](/.github/screenplay.png)

Related

How to Install

  1. Download the CSS file below
  2. Move it to your vault's .obsidian/snippets/ folder
  3. Open Obsidian → Settings → Appearance → CSS Snippets → Enable it
Download snippet.css

Stats

Stars

45

Forks

6

Last updated 44mo ago

Categories