# Obsidian Publish resources

**URL:** <https://forum.obsidian.md/t/obsidian-publish-resources/74582>\
**Category:** Themes & CSS snippets\
**Tags:** custom-css, ui-ux, publish\
**Created:** [January 8, 2024, 11:08pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582 "2024-01-08T23:08:03Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kneecaps](https://forum.obsidian.md/user_avatar/forum.obsidian.md/kneecaps/32/59271_2.png) [@kneecaps](https://forum.obsidian.md/u/kneecaps)\
**Post date:** [January 8, 2024, 11:08pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/1 "2024-01-08T23:08:03Z")

</div>

howdy, after discussion on the discord we felt that a forum post would be the best way to start collecting css snippets, tweaks, and visual resources for obsidian publish websites. if you have some css or js to share, we would love to see it!

i’ll start us off:

```auto
.markdown-rendered p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: -0.05em;
    text-justify: distribute;
    text-align-last: left;
}

```

the above justifies webtext (note: only in some browsers, firefox and safari confirmed working) without the massive spaces in-between words. another note is that ‘“distribute” has been deprecated in favor of “inter-character”’ [@cawlinteffid].

an example can be seen on my website: [https://kneecaps.org/](https://kneecaps.org/)

**Mod Edit** : We now have a Status page for displaying Publish’s current server status. [https://status.obsidian.md](https://status.obsidian.md)

---

<div class="post-metadata">

**Author:** ![ariehen](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ariehen/32/46932_2.png) [@ariehen](https://forum.obsidian.md/u/ariehen)\
**Post date:** [January 9, 2024, 12:13am UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/2 "2024-01-09T00:13:31Z")

</div>

Here are two good topics on setting custom fonts for Publish:

> [@Setup custom font - Obsidian Publish](https://forum.obsidian.md/t/setup-custom-font-obsidian-publish/60600):
>
> What I’m trying to do I have a website published using Obsidian Publish. I would like to have a custom Google Font. Currently, I have the custom css in my publish.css file. I am trying to import Google Font Modern Antiqua into the CSS. However, the Google Fonts is for importing CSS into the head of the HTML file. As far as I know my custom theme does not have a HTML file. So, I am not sure how to go about importing the custom font… Things I have tried One idea I had was to download the font a…

> [@Change font in Obsidian Publish](https://forum.obsidian.md/t/change-font-in-obsidian-publish/69456):
>
> Hello everyone, I have a question regarding changing the font in Obsidian Publish. I use the “Inter” font in the application, along with a CSS to change the weight of the titles. I applied the same CSS for weight in Publish, but I also used one to change the font. The issue is that when I change the font in Obsidian Publish, it no longer adjusts the weight. Does anyone know how to resolve this? body { --h1-size: 1.7em !important; --h2-size: 1.55em !important; --h3-size: 1.4em !important; …

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [January 9, 2024, 12:33am UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/3 "2024-01-09T00:33:23Z")

</div>

You can remove the Obsidian Publish footer in your publish.css with:

```css
.published-container {
    --footer-display: none;
}

```

---

<div class="post-metadata">

**Author:** ![kneecaps](https://forum.obsidian.md/user_avatar/forum.obsidian.md/kneecaps/32/59271_2.png) [@kneecaps](https://forum.obsidian.md/u/kneecaps)\
**Post date:** [January 9, 2024, 12:52am UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/4 "2024-01-09T00:52:29Z")

</div>

as an addon/alternative:

```auto
.site-footer a {
	opacity: 0;
	transition: 700ms;
}

.site-footer:hover a {
	opacity: 1;
	transition: 700ms;
}

```

will make it appear on hover

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [January 9, 2024, 6:38am UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/5 "2024-01-09T06:38:27Z")

</div>

Excalidraw has some support for Obsidian Publish.

[![](https://img.youtube.com/vi/JC1E-jeiWhI/maxresdefault.jpg "Excalidraw-Publish: Make interactive visual websites with Obsidian-Publish and the Excalidraw Plugin") ](https://www.youtube.com/watch?v=JC1E-jeiWhI)

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [January 10, 2024, 7:49pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/6 "2024-01-10T19:49:21Z")

</div>

To use the list cards found on our help documentation.

It is easiest to grab a copy of one of Kepano’s minimal publish themes: [Minimal for Obsidian Publish - Minimal Documentation](https://minimal.guide/publish/download)

You can also extract the `.list-cards` selectors if you do not wish to use Minimal.

Once added to your publish.css, add the following to the top of the note you will publish.

```yaml
cssclasses:
  - list-cards

```

Any list item on that note will now generate those boxes. Try the below on your note to check.

```markdown
- [[Introduction to Obsidian Sync|Obsidian Sync]]
	- A safe and secure way to synchronize your notes across any device and OS.
- [[Introduction to Obsidian Publish|Obsidian Publish]]
	- Publish your notes as a wiki, knowledge base, documentation, or digital garden.

```

---

<div class="post-metadata">

**Author:** ![MelectronVolt](https://forum.obsidian.md/user_avatar/forum.obsidian.md/melectronvolt/32/39021_2.png) [@MelectronVolt](https://forum.obsidian.md/u/MelectronVolt)\
**Post date:** [January 13, 2024, 7:48pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/8 "2024-01-13T19:48:06Z")

</div>

Here is a way to enlarge image by clicking on it for publish.

publish.css

```auto
.markdown-preview-view .internal-embed img {
  cursor: zoom-in;
}

.markdown-preview-view .internal-embed.zoomed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100; /* Below the image, covers the viewport */
  display: flex;
  justify-content: center;
  align-items: center;
}

.markdown-preview-view .internal-embed.zoomed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-primary);
  z-index: -1; /* Behind the content of .internal-embed */
}

.markdown-preview-view .internal-embed.zoomed img {
  cursor: zoom-out;
  max-height: 100vh;
  max-width: 100vw;
  height: auto;
  width: auto;
  object-fit: contain;
}

```

publish.js

```auto
function initialize() {
  document.querySelectorAll('.markdown-preview-view .internal-embed img').forEach(img => {
    // Ensure we don't add multiple event listeners to the same image
    if (!img.classList.contains('zoom-event-attached')) {
      img.addEventListener('click', function() {
        this.parentNode.classList.toggle('zoomed'); // Toggle on parent
      });
      img.classList.add('zoom-event-attached');
    }
  });
}

// Observer to watch for changes in the DOM
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.addedNodes.length > 0) {
      initialize();
    }
  });
});

// Start observing the document body for added nodes
observer.observe(document.body, {
  childList: true,
  subtree: true
});

// Run initialize at the start to catch any images already in the DOM
initialize();

```

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [February 16, 2024, 9:12pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/9 "2024-02-16T21:12:25Z")

</div>

Updated the thread name so I can add some plugin love here.

Komenstaub maintains a plugin to be able to copy your note’s public url from context menu.

> **[GitHub - kometenstaub/copy-publish-url: Copy or open the Obsidian Publish URL...](https://github.com/kometenstaub/copy-publish-url)**
>
> Copy or open the Obsidian Publish URL of a note. You can also open its Git commit history on GitHub. - kometenstaub/copy-publish-url

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [February 19, 2024, 10:58pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/10 "2024-02-19T22:58:23Z")

</div>

## Templater fun

### Breadcrumbs

This quick template snippet can be used to print out the file path breadcrumb on your note, for use within Obsidian. This is a way to add some really navigation for Publish users who disable the navigation sidebar.

```js
<%* if (tp.file.folder(true).contains("/")) { %>[[<% tp.file.folder(true).replaceAll("/", "]] / [[") %>]] <%* } else { %> [[<% tp.file.folder(true) %>]] <%* } %> / [[<% tp.file.title %>]]

```

Note, that this will also print out folder notes as a link as well.

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [March 2, 2024, 10:45pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/11 "2024-03-02T22:45:00Z")

</div>

## Callouts

### Tabbed callouts

A use pointed out to me that this tabbed callout snippet by @sailKite works in Publish!

> <https://gist.github.com/sailKiteV/e1124244161e2ab5ac3045562beee4ae#live-preview>
>
> There are more than three files. show original

---

<div class="post-metadata">

**Author:** ![JordanTheITGuy](https://forum.obsidian.md/user_avatar/forum.obsidian.md/jordantheitguy/32/17475_2.png) [@JordanTheITGuy](https://forum.obsidian.md/u/JordanTheITGuy)\
**Post date:** [March 6, 2024, 10:59pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/12 "2024-03-06T22:59:51Z")

</div>

If you would like to make your Obsidian Publish website look a little bit more like a traditional blog, well you can. Here is a guide writting on Obsidian Publish, for Obsidian Publish on how to create a worklow that lets you create content in a way that looks like a blog with traditional hero cards and descriptions for your readers using some small CSS edits, and the templater plugin.

[Obisidian Blog Guide - JordanTheITGuy](https://jordantheitguy.com/blogpostsguide)

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [March 13, 2024, 5:57pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/13 "2024-03-13T17:57:27Z")

</div>

## Image tricks

### Zoom

Minimal Theme for Publish was updated to include a custom `publish.js` to create better zooming of images and a more seamless gallery.

> **[Create an image gallery for Obsidian Publish - Minimal Documentation](https://minimal.guide/guides/image-gallery)**
>
> Create an image gallery for Obsidian Publish - Minimal Documentation

---

<div class="post-metadata">

**Author:** ![sailKite](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sailkite/32/30369_2.png) [@sailKite](https://forum.obsidian.md/u/sailKite)\
**Post date:** [March 20, 2024, 6:07pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/15 "2024-03-20T18:07:57Z")

</div>

While the full Properties view is not yet available in Publish, it seems to be a little-known fact that the underlying YAML codeblock / Frontmatter that supports Properties is actually present in the Publish DOM, meaning that it is possible via a little CSS to show at least a basic version of the Frontmatter to readers.

The simplest version of the snippet would be something such as:

```css
.publish-renderer pre.frontmatter.language-yaml {
    /* !important is required to override a style attribute declaration on the element */
    display: block !important; 
}

```

Alternatively, if one wanted to only show particular Frontmatter sections to users, it is a simple adjustment to pivot into a `cssclasses` approach (in this case, expecting a value of `publish-frontmatter`:

```css
.publish-renderer > .publish-frontmatter > .markdown-preview-section > div > .frontmatter {
    /* !important is required to override a style attribute declaration on the element */
    display: block !important; 
}

```

A fun side-effect of the element being in the DOM by default means that users can also override this behaviour on any Publish site, either forcing display or hiding the Frontmatter as desired with their own user styles (such as via the [Stylus](https://add0n.com/stylus.html) browser extension/add-on).

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [March 21, 2024, 7:29pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/16 "2024-03-21T19:29:20Z")

</div>

## Graph, graph, graph!

### Moving the graph

User Franz101 on the discord extended this to move the graph to the bottom on mobile.

```css
@media (max-width: 1000px) {
    .render-container {
      position: relative;
      max-width: 100%;
/* height: 100%;*/
      width: 100%;
/* overflow: hidden;*/
      flex-direction: column;
    }

    .render-container-inner {
    flex-direction: column; /* Stack elements vertically on small screens */
    overflow-y: auto; /* Enable vertical scrolling */
  }

  .graph-view-outer{
    margin-top: 12px !important;
  }

  .site-body-right-column-inner{
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-body-right-column {
    line-height: 1.3;
    width: 100% !important;
    border-top: var(--sidebar-left-border-width) solid var(--sidebar-left-border-color);
  }

  .publish-renderer > .markdown-preview-view > .markdown-preview-sizer {
    margin-right: 0;
  }
  .published-container.has-outline .site-body-right-column,
  .published-container.has-graph .site-body-right-column {
    display: block;
    position: relative;
  }
}

```

### Showing graph on mobile

A common question asked is how to enable Graph view on smaller screens.

Change the `display: none;` to another display item, such as `display: block;`. Note, that this may not look good on all screens so use this wisely.

```auto
@media screen and (max-width: 1000px) {
  .publish-renderer > .markdown-preview-view > .markdown-preview-sizer {
    margin-right: 0;
  }
  .published-container.has-outline .site-body-right-column,
  .published-container.has-graph .site-body-right-column {
    display: none;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Shaiya](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/s/a6a055/32.png) [@Shaiya](https://forum.obsidian.md/u/Shaiya)\
**Post date:** [March 28, 2024, 6:31am UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/17 "2024-03-28T06:31:51Z")

</div>

Hi! I’d love to get my site to justify the margins, but I’m using a RTL format, with an css code that enables me to make some sections LTR. It looks to me like this snippet will make the last line of every text go to the left, which won’t work for me. Do you think its possible to change the code so that the last word aligns in the same direction as the rest of the text (to the right for RTL and to the left for LTR)?

Thanks

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [March 28, 2024, 5:21pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/18 "2024-03-28T17:21:24Z")

</div>

Are you still experiencing this?

---

<div class="post-metadata">

**Author:** ![Shaiya](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/s/a6a055/32.png) [@Shaiya](https://forum.obsidian.md/u/Shaiya)\
**Post date:** [March 28, 2024, 8:07pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/19 "2024-03-28T20:07:05Z")

</div>

Hi! Thanks for asking. I haven’t tried justifying the alignment of the text on the website yet. If I can’t manage I’ll ask for help.

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [June 16, 2024, 12:51am UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/20 "2024-06-16T00:51:59Z")

</div>

## Apache Fun

### Site url ligatures

A very helpful Obsidian Publish user supplied the Obsidian Support box with a method to have their site process ligatures and diacritics in the URL’s properly for their language (French).

The Apache mod\_rewrite rule to achieve this is:

```plaintext
RewriteCond %{REQUEST_METHOD} !=POST
RewriteRule ^(.*)(É|é|È|è|Ê|ê|Ë|ë|À|à|Â|â|Ä|ä|Î|î|Ï|ï|Ô|ô|Ö|ö|Ù|ù|Û|û|Ü|ü|Ç|ç)(.*)$ $1$2$3 [E=Redirect:1,N,R=301]

```

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [June 18, 2024, 6:01pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/21 "2024-06-18T18:01:30Z")

</div>

## Enable Folder Notes with publish.js

The data engineering team made a folder-notes like feature for publish.js a while back.

> [@How to redirect to note when clicking on folder in Publish](https://forum.obsidian.md/t/how-to-redirect-to-note-when-clicking-on-folder-in-publish/38042):
>
> My goal was to have a note for each top-level folder on my publish site that a user would be sent to when the folder name was clicked. With this method I used below, a user can still use the arrow to expand/contract the folder normally. Also, the note is hidden from the nav to reduce clutter. [publish] How I did it: I made notes for each folder with the same name as the folder I hid the notes with css (publish.css) .tree-item-self[data-path^='Concepts/Concepts'] { display: none; } .tree-…

And user @gardener created a general update earlier this year.

> [@How to redirect to note when clicking on folder in Publish](https://forum.obsidian.md/t/how-to-redirect-to-note-when-clicking-on-folder-in-publish/38042/6):
>
> I use the Folder notes plugin and missed this feature with Obsidian Publish. Here is my attempt at a general solution, it should work similarly to the ‘Folder notes’ plugin, that is, if the directory contains a markdown file of the same name, it will hide the markdown file and allow the user to open it through clicking on the top level item. function folderPages() { var siteLeft = document.querySelector('.site-body-left-column'); var siteNav = siteLeft.querySelector('.nav-view-outer');…

You may have to edit these to work for your specific setup, but its a start!

---

<div class="post-metadata">

**Author:** ![Sigrunixia](https://forum.obsidian.md/user_avatar/forum.obsidian.md/sigrunixia/32/52395_2.png) [@Sigrunixia](https://forum.obsidian.md/u/Sigrunixia)\
**Post date:** [June 21, 2024, 6:22pm UTC](https://forum.obsidian.md/t/obsidian-publish-resources/74582/22 "2024-06-21T18:22:27Z")

</div>

## Show frontmatter in Publish

These users have posted ways to use publish.js to show your frontmatter

> [@Render file metadata in Publish](https://forum.obsidian.md/t/render-file-metadata-in-publish/83528):
>
> What I’m trying to do I have files that represent references to external resources. I use tags and url metadata fields. In the app they look great because the url is visible and clickable. But on Publish they don’t. I would like the url at least to be visible. And I would rather keep the information in metadata since the file content might be a summary of the content. Things I have tried I use publish on a custom domain so having a publish.js to achieve this is an option. I see that there is …

> [@Show / Support properties of a note in Obsidian Publish](https://forum.obsidian.md/t/show-properties-of-a-note-in-the-published-pages/68164/6):
>
> I completely agree! For your reference, here is my workaround. publish.js let id; function insertMetaDates() { const frontmatter = app.site.cache.cache[app.currentFilepath].frontmatter; if (!frontmatter) { return; } const created = frontmatter["created"]?.replaceAll("-", "/"); const updated = frontmatter["updated"]?.replaceAll("-", "/"); if (!created && !updated) { return; } const frontmatterEl = document.querySelector(".frontmatter"); if (!frontmatterEl) { re…

> [@Show / Support properties of a note in Obsidian Publish](https://forum.obsidian.md/t/show-properties-of-a-note-in-the-published-pages/68164/34):
>
> Based on @tadashi-aikawa 's solution, I expanded the publish.js code to accommodate more detailed CSS formatting through publish.css and allow more granular selection of properties shown. In the example below I included Aliases, Tags and one string-property (“Type”) - other properties can be added by copy-pasting the Type sections. The CSS file definitely has to be modified to match each theme but hopefully the code is clear enough. Note: as far as I can tell, it doesn’t work with sliding pane…

[Next page](https://forum.obsidian.md/t/obsidian-publish-resources/74582.md?page=2)