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!
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].
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.
cssclasses:
- list-cards
Any list item on that note will now generate those boxes. Try the below on your note to check.
- [[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.
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();
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.
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.
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:
.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:
.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 browser extension/add-on).
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)?
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).
