Are you a fan of mindmap-style note-taking and organization tools like Roam Research? Do you want to emulate their outliner workflows in Notion? While Notion provides users with a multitude of features, it doesn’t have an inherent feature to add Indentation Lines for bullet points or numbered lists.

But fear not; with just a few simple steps using a CSS modifier extension like Stylebot, you can Add Indentation Lines to your lists in Notion.

In this tutorial, we’ll guide you on how to enable this feature and enjoy a more structured view of your lists in Notion.

Let’s get started!

Step 1: Install Stylebot

Stylebot is a browser extension that allows you to modify the appearance of websites using CSS.

The first step is to install the Stylebot extension in your browser.

Step 2: Access Stylebot Options

Navigate to any of your Notion pages.

Once you are on a Notion page:

1. Click on the Stylebot icon in your browser’s toolbar.
2. From the drop-down menu, select “Open Stylebot”.

Step 3: Add CSS Code

In the Stylebot interface:

1. Click on “Code” on the bottom bar.
2. A text box will appear where you can enter the CSS code.
3. Copy the following CSS code and paste it into the text box:

/* Adds indentation lines to bulleted list items within bulleted lists */
div.notion-selectable.notion-bulleted_list-block
> div > div > div.notion-selectable.notion-bulleted_list-block {
  border-left: 1px dashed #484848;
  margin-left: -15px;
  padding-left: 10px;
}

/* Adds indentation lines to numbered list items within bulleted lists */
div.notion-selectable.notion-bulleted_list-block
> div > div > div.notion-selectable.notion-numbered_list-block {
  border-left: 1px dashed #484848;
  margin-left: -15px;
  padding-left: 10px;
}

/* Adds indentation lines to numbered list items within numbered lists */
div.notion-selectable.notion-numbered_list-block
> div > div > div.notion-selectable.notion-numbered_list-block {
  border-left: 1px dashed #484848;
  margin-left: -15px;
  padding-left: 10px;
}

/* Adds indentation lines to bulleted list items within numbered lists */
div.notion-selectable.notion-numbered_list-block
> div > div > div.notion-selectable.notion-bulleted_list-block {
  border-left: 1px dashed #484848;
  margin-left: -15px;
  padding-left: 10px;
}

/* Adds indentation lines to bulleted list items within to-do blocks */
div.notion-selectable.notion-to_do-block
> div > div > div.notion-selectable.notion-bulleted_list-block {
  border-left: 1px dashed #484848;
  margin-left: -15px;
  padding-left: 10px;
}

Each block targets a specific type of list item within a certain type of list or block (e.g., a bulleted list item within a numbered list), and applies the same CSS styling to add a dashed line to the left.

 The CSS provided only covers a subset of all possible combinations of Notion blocks. If you use other types of blocks in your lists (like headers, quotes, todos, etc.), you would need to add additional CSS rules for them. Also, the provided CSS solution doesn’t fully support Notion’s dynamic elements like toggles. Although it adds lines to bulleted lists within toggles, it doesn’t support indented toggles.

Step 4: View the Changes

Now, navigate back to your Notion page and refresh the webpage. You will notice that the bullet points or numbered lists now have indentation lines.

Conclusion

In this tutorial, we’ve covered how to add indentation lines to bullet points or numbered lists in Notion using the Stylebot extension.

With just a few simple steps, you can customize Notion to better suit your personal preferences and note-taking style.

Some downsides:

• Does not work on mobile devices: Stylebot is not available on mobile browsers. Explore Arc Browser if you’re interested in this.
• Manual setup required: CSS changes are local to each browser. You need to set up Stylebot and add the CSS code on each device you use to access Notion. Using Stylebot’s Google Drive sync can avoid this.
• Might break with Notion updates: While Notion is generally quite stable, it is possible for them to make changes to their website that could affect the CSS code.
• Potential privacy concerns: Some users might be uncomfortable with adding a browser extension that has access to their webpage data.

Enjoy a more structured view of your lists in Notion!