Customize Obsidian Publish with CSS

While I'm not using Obsidian Publish at the moment, I still want to share some of the things that I learned while I was.

Hide specific folders and files from the left nav

Using CSS, you can hide specific folders and files in the left navigation on your Obsidian Publish site.

Note: Hiding the folders or pages from the left navigation does not remove them from your site, and visitors can still access these files through links or even search.

You may want to do this if you wish to clean up your left navigation, you want to keep the search box, or you only want to hide specific folders or pages. Otherwise,  you can toggle the navigation to be entirely off through your Obsidian Publish settings.

1. Copy the following CSS to your publish.css file.
2. Update the data-path value to include the name of the file or folder you want to hide. Make a copy of the line for each folder or file you want to add.
3. Publish your updated publish.css file to the root of your Obsidian Publish site.

/* HIDE FOLDERS IN THE LEFT NAV */
.tree-item-self[data-path^='Folder 1'],
.tree-item-self[data-path^='Filename'] {
  display: none;
}

Hide Backlinks from specific pages

Obsidian Publish can hide the backlinks section from the bottom of specific pages while leaving it on other pages. We can do this using YAML Frontmatter and CSS. I do this on my Structured Notes pages, where I already have links to all of the content, and the Backlinks would show duplicate links.

Within Obsidian, open the page where you want to hide the Backlinks. You'll need to add some YAML Frontmatter. In this example, my class name is "hidebacklinks," but it can be anything you want, as long as it matches the class in your publish.css file.

---
cssclass: hidebacklinks
---

Add CSS to your publish.css file.

/* HIDE BACKLINKS */
.hidebacklinks .backlinks {display: none;}

Don't forget to publish the publish.css file to your site. It will likely not work right away; you'll need to wait for the cache to update or do a hard refresh of the page.

My Obsidian Publish CSS

Here is the complete CSS that I used for my site.

.theme-light {
  --background-primary: #f1f1f1;
  --background-primary-alt: #e9e9e9;
  --background-secondary: #f1f1f1;
  --background-secondary-alt: #d3d3d3;
  --background-modifier-border: #ddd;
  --background-modifier-form-field: #fff;
  --background-modifier-form-field-highlighted: #fff;
  --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
  --background-modifier-success: #a4e7c3;
  --background-modifier-error: #990000;
  --background-modifier-error-rgb: 230, 135, 135;
  --background-modifier-error-hover: #bb0000;
  --background-modifier-cover: rgba(0, 0, 0, 0.8);
  --text-accent: #247aa1;
  --text-accent-hover: #247aa1;
  --text-normal: #2e3338;
  --text-muted: #888888;
  --text-muted-rgb: 136, 136, 136;
  --text-faint: #999999;
  --text-error: #800000;
  --text-error-hover: #990000;
  --text-highlight-bg: rgba(255, 255, 0, 0.4);
  --text-highlight-bg-active: rgba(255, 128, 0, 0.4);
  --text-selection: rgba(204, 230, 255, 0.99);
  --text-on-accent: #f2f2f2;
  --interactive-normal: #f1f1f1;
  --interactive-hover: #e9e9e9;
  --interactive-accent: #247aa1;
  --interactive-accent-rgb: 123, 108, 217;
  --interactive-accent-hover: #247aa1;
  --interactive-success: #197300;
  --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
  --scrollbar-bg: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
  --highlight-mix-blend-mode: darken;
  --custom-external: #a14b24;
}

.external-link {
  color: var(--custom-external);
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.markdown-preview-view .tag:not(.token) {
  background-color: var(--text-accent);
  color: white;
  border-radius: 5px;
  padding: 5px 15px 5px 15px;
  text-decoration: none;
  border: none;
  font-size: 0.8rem;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
  margin-bottom: 10px;
}

.site-body-left-column-site-name {
  text-align: center;
}

/* HIDE FOLDERS IN THE LEFT NAV */

.tree-item-self[data-path^='Notes'],
.tree-item-self[data-path^='_Inbox'],
.tree-item-self[data-path^='Log'],
.tree-item-self[data-path^='Notes'] {
  display: none;
}

/* QUOTE BLOCKS */
.markdown-preview-view blockquote {
  border-radius: 0 4px 4px 0;
  border: 1px solid #d39154;
  border-left-width: 5px;
  padding: 10px;
  background: #e6b78b0d !important;
}

blockquote:before {
  font: 14px/20px italic Times, serif;
  content: '“';
  font-size: 3em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

/* CODE BLOCKS */
.theme-light :not(pre) > code[class*='language-'],
.theme-light pre[class*='language-'] {
  background-color: var(--background-primary-alt);
  border: 1px solid var(--background-modifier-border);
}

/* BACKLINIKS */
.published-container .backlinks {
  border: 1px solid var(--background-modifier-border);
}

.hidebacklinks .backlinks {
  display: none;
}