Obsidian Publish CSS Tips

Eric

Using CSS in Obsidian Publish

Before getting into the tips, you'll need to first configure your own CSS for your Obsidian Publish site. Currently, this is done by adding a file called publish.css in the root of your vault. Then publish that file. I've included my full CSS for my own Obsidian Publish at the end of this article.

At the moment, there is no built-in option to add a logo to your Obsidian Publish site. However, you can do this with some simple CSS.

  1. Copy the following CSS to your publish.css file.
  2. Update the URL to point to the full URL of your logo.
  3. Publish your updated publish.css file to the root of your Obsidian Publish site.
.site-body-left-column-site-name {
  text-align: center;
}
.site-body-left-column-site-name::before {
  background: none;
  display: block;
    content: url({full-url-to-your-logo.png});
  width: 100%;
}

Hide specific folders and files in the navigation

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. Visitors can still access these files through links or even search.

You may want to do this if:

  1. You want cleaner left navigation.
  2. You want to keep the search box.
  3. You only want to hide specific folders or pages. Otherwise,  you can toggle the navigation to be completely off through your Obsidian Publish settings.

Here is how you do it.

  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;
}

We 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 Structure Notes pages where I already have links to all of the content and the Backlinks would just show duplicate links.

  • Within Obsidian, open the page where you want to hide the Backlinks. You'll need to add some YAML Frontmatter.
---
cssclass: hidebacklinks
---

Add this to the very top of the your page. It includes three dashes --- then the cssclass portion is is the key piece. This is where you name the [[CSS]] class that you want to use. In my case I simply named it hidebacklinks.

Next, you need to add some CSS to your publish.css file.

/* HIDE BACKLINKS */

.hidebacklinks .backlinks {
	display: none;
}

Example CSS

Here is my full Obsidian Publish CSS. Add this to your publish.css file and customize it as needed. Or just pull out the pieces you want to use.

.theme-light {
  --fontsizetiny: 13px;
  --fontsizenormal: 17px;
  --heading-title-color: #000c2d;
  --bulletpointlinecolor: rgb(217 216 216);
  --section-header-color: #b2bac6;
  --background-primary: #f2f0ec;
  --background-primary-alt: #fffdf8;
  --background-secondary: #fffdf8;
  --background-secondary-alt: #f2f0ec;
  --background-accent: #fff;
  --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;
  --text-accent: #21a2d1;
  --text-accent-hover: #21a2d1;
  --text-accent-unresolved: #555454;
  --text-color-external: #d15021;
  --interactive-accent: #21a2d1;
  --interactive-accent-rgb: 123, 108, 217;
  --interactive-accent-hover: #21a2d1;
  --shadow-color: #dfdfdf;
  --font-family-preview: Mulish, -apple-system, BlinkMacSystemFont, Segoe UI,
    Helvetica, Arial, sans-serif;
}

/* LOGO */
.site-body-left-column-site-name {
  text-align: center;
}
.site-body-left-column-site-name::before {
  background: none;
  display: block;
  content: url(https://fulurltoyourlogo.png);
  width: 100%;
}

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

/* || IMAGES */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* || MODAL */
.modal {
  background-color: var(--background-secondary-alt);
}

/* || IFRAMES */
iframe {
  display: block;
  border-style: none;
  margin: 0 auto;
}

/* || LINKS */
.internal-link.is-unresolved {
  color: var(--text-accent-unresolved);
  opacity: 0.8;
}

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

a {
  text-decoration: none !important;
  opacity: 1;
  font-weight: 600;
}
a:hover {
  text-decoration: underline !important;
  opacity: 0.8;
}

/* || Code */
.markdown-preview-view code,
.cm-s-obsidian span.cm-inline-code {
  color: var(--fontcolorcode);
  border: 1px solid rgb(229 229 229);
  background-color: var(--background-secondary-alt);
  border-radius: 5px;
}

/* || Graph */
.graph-view.color-fill-unresolved {
  color: #d15021 !important;
}
.graph-view.color-fill {
  color: #21a2d1;
}
.graph-view.color-fill:hover {
  color: var(--text-accent-hover);
}
.graph-view.color-fill-tag {
  color: #a2d121 !important;
}
.graph-view.color-fill-attachment {
  color: #a2d121 !important;
}

/* QUOTE BLOCKS */
.markdown-preview-view blockquote {
  border-radius: 10px;
  border: 1px solid #d15021;
  padding: 10px;
  background: #f2f0ec !important;
  box-shadow: 5px 5px 5px var(--shadow-color);
}

blockquote p {
  display: inline;
}

/* GENERAL */
.markdown-preview-view .markdown-embed,
.markdown-preview-view .file-embed {
  border-bottom: none !important;
}

.markdown-embed-link,
.file-embed-link {
  color: var(--interactive-accent);
}
div.markdown-preview-view {
  font-family: var(--font-family-preview);
}

.site-body-left-column,
.site-body-left-column:before {
  background-color: var(--background-primary);
  border-right: none !important;
}

.published-container .markdown-preview-view {
  user-select: text;
  background-color: var(--background-secondary);
  font-size: var(--fontsizenormal) !important;
  line-height: 33px;
}

.published-container .backlinks {
  border: 1px solid var(--bulletpointlinecolor);
  background-color: var(--background-secondary-alt);
  border-radius: 5px;
}

.published-section-header {
  color: var(--section-header-color);
}

.graph-view-container {
  border: none;
  box-shadow: none;
  background-color: var(--background-primary);
}
.outline-view-outer .collapsible-item-self.mod-active {
  background-color: var(--background-primary);
}