Skip to content

Custom stylesheet

Back Philipp Written by Philipp

Custom stylesheet

CSS (Cascading Style Sheets) is the language used throughout the extension to define how the sidebar looks and behaves visually. It controls things like colours, backgrounds, borders, spacing, fonts and the layout of individual elements.

CSS is declarative, meaning you describe what an element should look like rather than how to change it step by step. You select an element using a CSS selector and then specify the properties you want to change.

The extension already comes with its own set of CSS rules for styling the sidebar. Your custom stylesheet is applied on top of these default styles, allowing you to override them and customize the appearance beyond what is possible through the built-in settings. For example, you can change colours, hide elements, adjust spacing or completely change the appearance of individual parts of the sidebar.

Examples

The following CSS changes the sidebar's background colour to black:

section#sidebar {
    background: #000000 !important;
}

Here, section#sidebar selects the sidebar element, background defines its background colour, and !important ensures that your custom style takes priority over the default styling.

Hide the bookmark counter

You can hide the bookmark counter displayed in the sidebar header:

section#sidebar > header > h1 {
    visibility: hidden;
}

Here, > means that the element must be a direct child of the previous element. The selector targets the h1 inside the sidebar header and hides it while keeping the space it occupies.

Finding the right CSS selectors

Want to customize something else? You can use your browser's Developer Tools to find the CSS selectors of individual sidebar elements.

  1. Open the sidebar and press F12 (or Cmd + Option + I on macOS) to open Developer Tools.
  2. Click the Inspect Element tool and select the part of the sidebar you want to customize.
  3. Look at the highlighted HTML element to identify its tag, classes or ID.
  4. Use these to create your own CSS rules.

For example, an element with id="sidebar" can be targeted using #sidebar, while an element with class="folder" can be targeted using .folder.

Tip: You can experiment with CSS directly in Developer Tools before adding your rules to the custom stylesheet.

If you run into any problems, need assistance, or have questions about customizing your sidebar, please feel free to contact me. I'm happy to help!