Skip to main content

Styling

Bookshelf aims to feel like a natural extension of Obsidian, mimicking its look and feel as closely as possible. However, you might want to customize it and give it your own personal touch. Obsidian allows you to add CSS snippets to modify it's appearance to your liking (see the CSS snippets documentation for more details).

Bookshelf comes with a few CSS variables to make this even easier.

For example, if you want the book cards in the gallery to have less padding and a more rounded look, you can use the following snippet:

.obsidian/snippets/bookshelf.css
body {
--bookshelf--gallery-card--padding: 5px;
--bookshelf--gallery-card--border-radius: 20px;
}

Reference

Library

VariableDescription
--bookshelf--library--header--backgroundHeader background
--bookshelf--library--header--paddingHeader padding
VariableDescription
--bookshelf--gallery-card--paddingCard padding
--bookshelf--gallery-card--border-radiusCard border radius
--bookshelf--gallery-card--background-colorCard background color
--bookshelf--gallery-card--shadowCard shadow
--bookshelf--gallery-card--image--border-radiusCover image border radius