What I’m trying to do
I’m trying to use the cssclasses property and I cannot get it to work. I’ve not found recent related issues.
The css I’m using works; it modifies a dataview table heading. When the css is enabled under Options>Appearance>Snippets
, the table looks like this in Reading mode
:
When the css is disabled under Options>Appearance>Snippets
the table looks like this in Reading Mode
:
So I know the css works. What I don’t know is how to get it to work for the tables in just this page.
my frontmatter looks like this in Live Preview:
---
datecreated: 2025-01-28
cssclasses:
- dataview_tables
---
Things I have tried
I’ve read the help file and it is not clear how to enter the css. It doesn’t say if it should include .css, or if the entire thing has to be put into quotation marks, so I tried them all.
cssclasses: dataview_tables.css
cssclasses: "dataview_tables"
cssclasses: "dataview_tables.css"
Note that the snippet was always disabled in the Settings when I tried all of these. I figured it has to be disabled, otherwise it would apply automatically to all tables.
My snippet code, although it works fine when being applied to all or none of the dataview tables:
/* header row bg colour */
thead {
background-color: #37373a;
}
/* th font weight and size */
.markdown-preview-view th, table.dataview.table-view-table th {
font-weight: 600;
font-size: 0.97em;
border-bottom: none;
border-bottom-width: 1px; /* medium, thin, thick, 1px */
border-bottom-color: grey;
}
/* td and tr font size */
.markdown-preview-view td, table.dataview.table-view-table tr {
font-size: 0.92em;
}
This is all related to my other post Need css for default embed, that I’ve been troubleshooting but the css never works, which brings me to this: maybe it’s less to do with the code I’ve been trying and more to do with how I’m entering the css in the properties.