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

Variable	Description
--bookshelf--library--header--background	Header background
--bookshelf--library--header--padding	Header padding

Gallery

Variable	Description
--bookshelf--gallery-card--padding	Card padding
--bookshelf--gallery-card--border-radius	Card border radius
--bookshelf--gallery-card--background-color	Card background color
--bookshelf--gallery-card--shadow	Card shadow
--bookshelf--gallery-card--image--border-radius	Cover image border radius