A Simple Modification to TfTHacker's Dashboard++ Snippet

[hu4d]

I first learned of the wonderful Dashboard++ snippet via this post on the forum.

Since then, it’s been a key part of my vault and workflow. I’ve made a simple modification to the CSS to make it so that the parent list items are bolded, but the children are not. Find that this helps with reading it and quickly getting your eyes to where they need to be.

You can see above that “Top of List” is bolded where it would typically be the normal font weight.

This change can be made by adding font-weight: bold; to the section .dashboard div > ul { ... }, as shown below

.dashboard div > ul {
    list-style: none;
    display: flex;
    column-gap: 50px;
    flex-flow: row wrap;
    font-weight: bold; /* add this line */
}

This however bolds the entire list! To undo that, copy and paste in this entire section anywhere within the file:

.dashboard div > ul > li > ul {
    font-weight: normal;
}

I’d like to add that I am almost completely unfamiliar with CSS and slapped this together by reading StackOverflow for about 20 minutes. If there’s a better way to achieve this please let me know!

[TfTHacker]

I like this! Good job. If it is possible, please consider adding it to the discussion forum on the Github Repo here:

TfTHacker/DashboardPlusPlus Show And Tell · Discussions

Others can benefit from your efforts.

[hu4d]

Done!

[TheWillyM4AK]

Thank you. I really like your modification. I am going to keep it. And you have encouraged me to try modifying the CSS snippet.

There was something that was bothering me a lot. The little space between the “Top of List” and the end of the list above. This happens when there are many lists within a Heading.

I think the original CSS snippet was designed to use headings as horizontal space dividers constantly. But in some dashboards, I have headings with many lists, and I would like to keep them that way because thematically it makes sense.

To be more precise, I am referring to the lack of space above Pintura and Carabanchel. For me, visually, it has a big impact as it breaks the hierarchy of spaces. There should be more space between blocks than between the contents of the block.

I was able to modify it easily by adding a line in:

.dashboard div > ul > li {
    min-width: 250px;
    width: 15%;
    margin-top: 10px; /* add this line */
}

This is the result with 10px. For me, it is a great improvement.