Dashboard++ — a simple organization and navigation method for Obsidian Vaults

[kennygo]

I have created hompage following the steps. I am not able to see my topics shown in different columns. I see many posts here did not face this issue, I guess it might be my css problem? I copy my note as below, appreciate anyone can advise what did I done wrong. I am using minimal theme also.

---

cssclass: dashboard, max
banner: “https://images.unsplash.com/photo-1461173890990-f128607276ff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80”
banner_x: 0.5
banner_y: 0.479

ABC

• One
• Two
• Three

Vault Info

• Recent file updates
  $=dv.list(dv.pages('').sort(f=>f.file.mtime.ts,"desc").limit(4).file.link)

• Tagged: favorite
  $=dv.list(dv.pages('#favorite').sort(f=>f.file.name,"desc").limit(4).file.link)

• Stats

  • File Count: $=dv.pages().length
  • Personal recipes: $=dv.pages('"Family/Recipes"').length

css code as below (same as copy from GitHub):
/* Updated 2022-02-28 */

.dashboard {
padding-left: 25px !important;
padding-right: 25px !important;
padding-top: 20px !important;
}

.dashboard .markdown-preview-section {
max-width: 100%;
}

/* Title at top of the document */
.dashboard .markdown-preview-section .title {
top: 60px;
position: absolute;
font-size: 26pt !important;
font-weight: bolder;
letter-spacing: 8px;
}

.dashboard h1 {
border-bottom-style: dotted !important;
border-width: 1px !important;
padding-bottom: 3px !important;
}

.dashboard div > ul {
list-style: none;
display: flex;
column-gap: 50px;
row-gap: 30px;
flex-flow: row wrap;
}

.dashboard div > ul > li {
min-width: 250px;
width: 15%;
}

[taqyon]

Can you please attach screenshot?

[Dan2]

Gotta love anyone who watches Joe vs The Volcano

[kennygo]

Hi, please see screenshot below.

[kennygo]

I downloaded Dashboard sample vault and copy css files into my vault. It is working now. I guess my css file could be corrupted. Thanks everyone.

[larosajohnson]

I’ve been toying around with this setup over the weekend. Was curious to know if anyone has been able to get it working with live preview. If so, what tips/tricks did you use to make it happen?

[Komma]

Even though this question was from a while ago, I’ve seen it being asked several times now.
I just found a workaround:
I have a “Dashboard - code” page, which is just your normal Dashboard note.
Then I have a “Dashboard” page, where I embed the “Dashboard - code” (![[Dashboard - code]]) and that’s it.
The Dashboard can be edited by hovering over the link and using the hover edit plugin. Or just go to the Dashboard - code page and edit it there.

It’s not ideal but that way I can stay with Live Preview mode on every page and still access the dashboard like a preview. I previously tried with the force view mode plugin but that always got me into source mode instead of live preview, when I switched to another note.

[issam-Dev]

I have the same problem with Blue Topaz theme

[issam-Dev]

I find a solution for this :

for blue topaz theme add "wide-page" to cssclass in front matter :

---
cssclass: dashboard , wide-page
---

for other theme use this css file and do the same previous steps

[khukharev]

I have 100% the same issue.
However, I tried re-downloading the css file, but it didn’t help. Is the file up-to-day with Obsidian 1.0.*?
I use default theme if that matters at all.

[den]

@TfTHacker Hey! Thank you very much for this snippet.

I would like to ask you. I created DataviewJS query that is outputting everything based on your formatting of Dashboard. But the Dashboard CSS is not applied to it. The dataviewJS query is creating automatic MOC from metadata.

The question is how to make your Dashboard CSS to be applied also to Dataview object?

[TfTHacker]

You can use dataview queries with Dashboard++, I do all the time. The key is that the list is rendered at the right indentation level. If you have a way to share the snippet with me, I can do some troubleshooting.

You could post it to: TfTHacker/DashboardPlusPlus · Discussions · GitHub

[den]

I sent you DM with code. If we made it to work. We can post it there. I think many people will benefit to know about right formatting in order to Dasboard++ CSS to kick in.

[TfTHacker]

Hey folks, I recently updated the repository holding the sample for Dashboard++ and some CSS fixes.

This is still the number one article I have written, with a few thousand people reading it monthly.

[streetRAT]

Could you please share the code so i can also test it?

thanks

[streetRAT]

Sorry, I meant @den I am trying to get a tag based MOC working but am having some issues.

thanks (:

[hbcy]

Hello there, I’ve just started using Obsidian, so my question is rather basic. I’m trying to built the Dashbard++ in my vaults, but I cannot write down the;

---

cssclass: dashboard

part. I get the following screenshot when I do that:

When I copy&paste the command, I still cannot get the same end result:

Could someone please explain to me what I should do?

P.S. I used to have the Book Search plugin, and I thought the result I get on the first screenshot because of that Book Search plugin was interfering. I removed it, but I still could not make it work.

Thank you so much for your time!

[webinspect]

The cssclass property was recently deprecated, Obsidian won’t let you use it anymore.

cssclasses does the same thing though, so you should be able to use that. The only difference is that cssclasses accepts multiple classes instead of only one.

[hbcy]

Thank you @webinspect , but that did not solve my problem

[Sojourner42]

First off, thank you for the dashboard css, it’s pretty much exactly what I needed in a dashboard.
I’ve noticed that it isn’t as easy to read as the rest of my notes, and didn’t think too much of it (figured it might have been a dataView thing, but there wasn’t a font option for that that I saw).

Just now I was playing around with the various fonts, and noticed that it was using the interface font, and not the note font (reading/editing, or source). My question is how can I make it inherit the reading/editing font?

I assume (as a workaround) I could just put the font family in the css where it says inherit, but then if/when I change the reading/editing font, it won’t update. For now I’ve just made my interface font the same as my reading/editing font (though this is far from ideal).

.dashboard {
    font-family: inherit;
    padding-left: 25px !important;
    padding-right: 25px !important;
    padding-top: 20px !important;
}