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.
Table of Contents
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:
- Open Obsidian and go to Settings > Appearance > CSS snippets
- Click the folder icon next to CSS snippets to open the Snippets folder
- Create a new file in the Snippets folder with a
.css
extension, for examplemy-theme.css
- Add your custom CSS to this file
- Save the file
- Back in Settings, enable your new snippet file using the toggle switch
- 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 modebutton
– 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.