I have created a script to activate a “reader view” on an Obsidian Publish site 
1 Like
I have created a javascript to activate a hotkey for the search on an Obsidian Publish website. On the page there are different code options (on Mac, I personally prefer to use command-k).
Also, there is a version that focuses the input search when loading the web.
Another type of resource: a collection of Obsidian Publish websites 
4 Likes
There is a nice plugin that several of us in the #obsidian-publish Discord channel have been trying to make it easier to Publish our dataview items.
2 Likes
Here is an example post workflow detailing this.
So, an example post workflow that uses this plugin:
- Open “Echo” Master vault
- Open Vault I will want to Publish in, in a different Obsidian Window. Selecting this vault in the vault profiler/switcher should automatically open in a second Obsidian window.
- Work on a file in my “Echo” Master vault. Lately its mostly been with my Arbiters TTRPG things, so my work is in
Root/Arbiters/ - Once done, switch to Arbiters window.
- CMD+P for command palette select Dataview Publisher, Update Dataview Publish Blocks and Open Publish Panel
- Quick review that the right changes are going to be published
- Select Add Linked items if I added attachments
- Publish.
You can use BuiltWith to find Obsidian Publish sites 
1 Like
Hiding data in Publish only
This is useful for things like small comments, but not suitable for sensitive private information.
Markdown comment method
%%
Hide me!
%%
Custom Callout Method
.callout[data-callout=scratch] {
--callout-icon: lucide-eye-off;
--callout-color: 255, 105, 180;
}
.published-container .callout[data-callout=scratch] {
display: none;
visibility: hidden; /* remove if your users use screen readers */
}
Why wouldn’t you use the markdown comment method to hide large chunks of a note? I have notes that I want to publish most of but hide certain sections (sometimes just a word here and there, but other times several paragraphs). Just now learning how Publish works – I haven’t set up a site yet for this. But I’m working on setting up vault structure for my own needs and for future publishing.
The markdown comment method will hide the notes in reading view in the application, as well as on the page when it is published.
The callout method allows you to still see the notes in the application, but make it “invisible” only when it’s on the Publish site.
Ahh – Ok. Thanks for the clarification. Now I see that your prior note emphasized not to use hiding within the note for sensitive information – but what I want to hide is more superfluous or somewhat private versus overly sensitive.
That’s a great distinction between the comment method vs the callout method as to what appears in Reading view.
I haven’t found any use case yet for using Reading view on the application, except to check what it might look like when published or turned into a PDF. I work almost exclusively in Live Preview, just switching to source mode now and then to see the formatting.
How would you call the class?
User stephanlevin on Discord shared a method to have a folder of choice start “opened” when the page loads.
setTimeout(() => {
// Find all folder elements
document.querySelectorAll('.tree-item').forEach(folder => {
// Get the label text of the folder
const label = folder.querySelector('.tree-item-inner');
// Change Projects to the folder name of your choice. The folder name must match exactly.
if (label && label.textContent.trim() === 'Projects') {
const icon = folder.querySelector('.tree-item-icon.collapse-icon.is-collapsed');
if (icon) {
icon.click(); // Simulate click to expand
console.log('Expanded 2025 folder');
}
}
});
}, 800);
As a general reminder, these scripts can be fragile and break if you rename the object that is being changed, in this case the folder named Projects.
1 Like
Is there a way for me to edit the default pane width?
Is there a way to replicate this card style on the official help documentation?
I tried following what @Sigrunixia mentioned earlier in the threa with Kepano’s minimal publiush theme and the yaml property on the note but this is the closest i get
Try this in your publish.css
.list-cards {
/* Kepano's List Cards from minimal */
/* Use cssclasses: list-cards */
--list-cards-template: repeat(2, minmax(0, 1fr));
}
.list-cards div > ul {
--link-color: var(--text-normal);
--link-unresolved-color: var(--text-muted);
--link-decoration: none;
--link-decoration-hover: none;
--link-external-color: var(--text-normal);
--link-external-decoration: none;
--link-external-decoration-hover: none;
display: grid;
gap: 8px;
grid-template-columns: var(--list-cards-template);
padding: 0;
}
.list-cards ul > li {
margin-inline: 0;
}
.list-cards div > ul > li {
display: flex;
border-radius: var(--radius-s);
border: 1px solid var(--color-base-25);
flex-wrap: wrap;
margin-inline: 0;
}
.list-cards div > ul > li a {
flex-grow: 0;
}
.list-cards div > ul > li a:after {
content: "";
flex-basis: 100%;
height: 0;
}
.list-cards div > ul > li a:hover {
border-color: var(--color-base-35);
}
.list-cards div > ul > li a {
flex-grow: 1;
padding: 16px;
font-weight: var(--font-semibold);
background: none;
}
.list-cards div > ul > li a:hover {
border-color: var(--color-base-35);
}
.list-cards div > ul ul {
display: block;
width: 100%;
color: var(--text-muted);
font-size: var(--font-smaller);
margin-top: -8px;
padding: 0 16px 16px;
}
.list-cards div > ul ul > li {
display: block;
margin-inline-start: 0;
}
.theme-dark .list-cards div ul > li {
background-color: var(--background-secondary);
}
.list-cards .icon-app {
display: inline-block;
align-self: center;
left: 16px;
width: 24px;
height: 24px;
position: absolute;
background-repeat: no-repeat;
background-size: 24px 24px;
background-position: center;
}
.list-cards .icon-app + a {
padding-left: 52px;
align-self: center;
line-height: 1.15;
}
@media screen and (max-width: 750px) {
.site-header-text {
display: none;
}
.list-cards.list-cards-mobile-full {
/* Use cssclasses: list-cards-mobile-full */
--list-cards-template: repeat(1, minmax(0, 1fr));
}
}
And this in the markdown file.
---
cssclasses:
- list-cards
- list-cards-mobile-full
---
## How to use Obsidian Sync
- [[Set up Obsidian Sync]]
- Set up Sync on all your devices.
- [[Switch to Obsidian Sync|Switch to Obsidian Sync]]
- Prepare your Obsidian vault to use Sync.
- [[Sync settings and selective syncing|Selective sync]]
- Configure which files and settings to sync.
- [[Plans and storage limits]]
- Learn about Sync subscription plans.
- [[Plans and storage limits|Remote vault storage]]
- Manage your remote vault storage.
- [[Version history]]
- View or restore previous versions of a note.
- [[Status icon and messages]]
- Overview of the Sync log and status icons.
- [[Security and privacy]]
- How Obsidian keeps your Sync data safe.
- [[Collaborate on a shared vault|Collaboration]]
- Add team members to a shared vault.
- [[Back up your Obsidian files]]
- Back up your vault using third-party tools.
- [[Sync regions]]
- Move your Sync vault to a different regional server.
- [[Troubleshoot Obsidian Sync]]
- Common syncing issues and solutions.
2 Likes
Thank you, @Sigrunixia - that worked beautifully!
1 Like