Dataview and CSS

Help
3

So, if one wants to style the table using a CSS snippet, for both live preview and reading mode, one could adapt the query to look like this:

```dataview
TABLE WITHOUT ID col1 as "Deadline", col2 as "Project #_"
WHERE projecttitle
FLATTEN projectdeadline as projcol1
FLATTEN "_<span class='title'>" + projecttitle + "</span>_<br>" + projectsub as projcol2
FLATTEN list(true, false) as alternateLine
FLATTEN choice(alternateLine, projcol1, "") as col1
FLATTEN choice(alternateLine, projcol2, "") as col2
```

And add a CSS file like the following:

a[href^="#_"] {
    display: none;
}

body.theme-dark table:has([href^="#_"]) {
    /* Define the colors I've used in this example */
    --my-bg-header: var(--color-base-40);
    --my-bg-rows: var(--color-base-20); 
    --my-border-color: #a0a0a0;
    --my-title-color: #b070b0;
    
    /* Some styling to be applied to the header row */
    & thead > tr {
        background-color: var(--color-base-40); 
        border: 1px solid var(--my-border-color);

        & th {
            color: var(--my-title-color);
            border: 1px solid var(--my-border-color);
        }
    }

    /* Hide the result counter, since we doubled the lines... */ 
    & span.dataview.small-text {
        display: none;
    }

    /* Styles the project title class */
    & span.title {
        color: var(--my-title-color);
    }

    /* resets the background-color to outside color */ 
    & tr:nth-child(even) {
        background-color: inherit;
    }
        
    /* Sets a background-color and border for the cells with text */ 
    & tbody tr:nth-child(odd) td {
        background-color: var(--color-base-20);
        border: 1px solid var(--my-border-color); 
    } 
}

To get an output like this:

image
image1240×231 16.9 KB

Note that since we now use a CSS snippet to style, we can leave out some of the styling from within the query, and make that a little cleaner. I use one tag in the header, #_, to mark the entire table, and in addition since I was lazy and didn’t want to merge cells I used a <span class="title"> around the project title to target just that text.

Bonus tip: How to add a custom CSS snippet
  • Goto Settings > Appearance and scroll down to “CSS snippets” section, and hit the folder icon on the far right. This opens up a file explorer window, in the folder vault/.obsidian/snippets, which is were you want to save your css snippet
  • In this new window create a file, like myCss.css, where you copy the CSS into. Make sure this actually is a text file, and that the name ends in .css
  • Back in Obsidian, you should now see your myCss in the list of CSS snippets. If not, hit the refresh button
  • Final step is to click the enable button to the right of your file, and now your new CSS should be in effect
  • If you later on make changes in the CSS snippet file, the effect should be immediate. If not, try disabling and re-enabling the snippet, or in some strange cases, you would need to reload Obsidian. In 99% of the cases, the changes are immediate, though.

See also the post below:

5 Likes