A Simple Modification to the CSS to Bold the First Item in Each List

[who-took-hu4d]

Crosspost from the Obsidian Forums

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!

Inside this collapsible is a version of the file with the changes already made if you don't feel like doing the modification yourself :)

.dashboard {
    font-family: inherit;
    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;
}

/* Get rid of the parent bullet */
.dashboard div.markdown-preview-section > div > ul > li > div.list-bullet {
    display: none !important;
}

/* Remove the indentation guide lines */
.dashboard.markdown-rendered.show-indentation-guide li > ul::before,
.dashboard.markdown-rendered.show-indentation-guide li > ol::before {
  display: none;
}

div.markdown-preview-section > div > ul.has-list-bullet > li {
    padding-left: 0p !important;
}

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

/* un-bold list items */
.dashboard div > ul > li > ul {
    font-weight: normal;
}

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

/* Dataview support */
.dashboard ul.dataview {
    row-gap: 0px !important;
    list-style-type: disc !important;
}