How to Add and Use CSS Code Snippets in Obsidian App

Obsidian is a powerful note-taking app that uses Markdown formatting to allow you to easily create notes, documents, and wikis. One of the great features of Obsidian is the ability to customize the look and feel of the app using Cascading Style Sheets (CSS) code snippets. Here is a guide on how to add and use CSS snippets in Obsidian.

What are CSS Snippets

CSS snippets are small pieces of CSS code that allow you to customize the appearance of elements within Obsidian. For example, you could use a CSS snippet to change the font, text color, background color, or other styling of specific parts of Obsidian’s interface.

CSS snippets override the default Obsidian theme and allow you to put your personal touch on the app. You can tweak everything from colors to spacing, sizes, borders, and much more.

Adding CSS Snippets

Adding custom CSS snippets is easy in Obsidian. Here are the steps:

  1. Open Obsidian and go to Settings > Appearance > CSS snippets
  2. Click the folder icon next to CSS snippets to open the Snippets folder
  3. Create a new file in the Snippets folder with a .css extension, for example my-theme.css
  4. Add your custom CSS to this file
  5. Save the file
  6. Back in Settings, enable your new snippet file using the toggle switch
  7. Click Reload for the changes to take effect

That’s it! Your CSS snippet will now apply its styling to Obsidian.

Using CSS Selectors

To target a specific part of Obsidian to style, you need to use CSS selectors. Some examples include:

  • .theme-light – Targets the light theme
  • #graph – Targets the graph view
  • .markdown-preview-view – Targets the preview mode
  • button – Targets all buttons

See the Obsidian CSS class reference for a full list of classes.

Here is an example snippet to change the font and add a background color:

/* Changes font to Arial */
.markdown-preview-view {
  font-family: Arial; 
}

/* Adds background color to preview mode */
.markdown-preview-view {
  background-color: #f5f5f5;
}

Tips for Using Snippets

Here are some tips for working with CSS snippets:

  • Start small and test one style at a time
  • Use the browser Inspector tool to find elements and style names
  • Refer to the CSS reference for available classes
  • Use !important to override other CSS rules
  • Put snippets in logical sections using comments
  • Be consistent with spacing, naming, etc.
  • Avoid overly specific selectors like IDs

With some practice, you can create beautiful custom themes for Obsidian using nothing but CSS!

Example CSS Snippets

Here are a few useful CSS snippets to try out:

Change font

.markdown-preview-view {
  font-family: "Helvetica", sans-serif;
}  

Add background image

“`css
.workspace-leaf-content[data-type=”markdown”] {
background-image: url(‘path/to/image.jpg’);
background-size: cover;
background-position: center;
}

### Style blockquotes

css
blockquote {
border-left: 5px solid #adb5bd;
padding-left: .5rem;
font-style: italic;
color: #6c757d;
}

### Change link colors

css
a {
color: #6c63ff;
}

a:hover {
color: #923db3;
}
“`

So those are the basics of working with CSS snippets in Obsidian! With some creativity, you can entirely tailor Obsidian’s interface to suit your exact preferences.