A Simple Modification to TfTHacker's Dashboard++ Snippet

Share & showcase
,
1

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.

image

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!

3 Likes
2

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

Others can benefit from your efforts.

3 Likes
3

Done!

1 Like