Help needed with separately styling of dataview query fields

[veitch]

What I’m trying to do

I’m putting all my quotations into Obsidian and I figured dataview would be a good way as I could then put random ones about the place or search for them using tags etc.

the problem is
a) They look dire
c) I can’t find a way of giving the different fields css selectors.

Things I have tried

Understanding dv.container but could make head nor tail of it.
I’ve tried creating my own css snippets using things I’ve found spelunking through the minimal and AnuPpuccin themes.

I’ve tried selecting by nth child etc. Nothing seems to work.

The only thing that helped was making some CSS myself but I quickly ran into problems when I wanted to style the fields differently.

@Craig had a few ideas in a post but I couldn’t follow quite what was happening.

I’ve now been trying for four hours. I have gone from this:

To this

the difference is mainly that my system setting has changed from light to dark in the time I’ve been working on it.
Any help would be greatly appreciated.
I know nothing about js. I should probably mention that.

I have gone from this

[ariehen]

Not really sure, but curious… Is that one Dataview block creating everything we see here? Or a few? The bottom image looks like some kind of multi-column markdown CSS(?).

It might be easier to style the multi-column stuff or put some of the dataview in callouts (fairly easy to style), but I’m just guessing.

[JimK]

Hi @veitch

See if this helps you any. It is for table dataviews but some of it may help with what you are doing. I pieced it together from a post by Flexit and some help from @ariehen and a bit from a post by scholarInTraining.

/* Light Mode */
.theme-light {
	--dvTotalCount: #555

}
/* Dark Mode */
.theme-dark {
	--dvTotalCount: #333
}

/* 
Adapted from Yellow cab table by Flexit
https://forum.obsidian.md/t/css-stylesheet-for-dataview-table/56905
*/
.tableDV table {
	border-collapse: collapse;
}
.tableDV table th {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 700;
}
/* Header */
.tableDV table thead th {
	padding: 5px 10px;
	background-color: #aa720b !important;
	color: #000000;
	}
/* Cell padding High wide*/
.tableDV td,
.tableDV th {
	border: 1px solid #000000;
	padding: 0px 3px;
}
/* Table Row Text and table border lines */
.tableDV table td {  
	font-family: 'Arial Black';
	font-size: 18px;;
	color: #000000;
	word-wrap: break-word;
	border-left: 1px solid #000000 !important;
}
/* Hover over Header highlight */
.tableDV thead th:hover {
    background-color: #ffba00 !important;
}

/* alternating rows */
.tableDV tbody tr:nth-of-type(odd) {
    background-color: #EBDDCFff;
}

/* alternating rows */
.tableDV tbody tr:nth-of-type(even) {
    background-color: #EBDDCFbb;
}

/* Hover over Table Rows highlight */
.tableDV tbody tr:hover td,
.tableDV tbody tr:hover td strong,
.tableDV tbody tr:hover td a {
	background-color: #555 !important; 
	color: yellow;
}

/* << EDITING link color INTERNAL >>  */
.cm-s-obsidian span.cm-hmd-internal-link {
  font-weight: 400;
  color: #ffba00  !important;
}

/* << READING link color INTERNAL >>  */
.markdown-preview-view .internal-link {
  font-weight: 400;
  color: #ffba00  !important;
}

/* Color the links
ariehen
https://forum.obsidian.md/t/change-link-color-but-not-button-color/56939 */

body {
  --link-color: #000;
  --link-external-color: #0f0;
}*/ 

body :is(.block-language-dataview) {
  --link-color: #000;
  --link-external-color: #Ff0;
}

/*
Total Count color in heading scholarInTraining
*/
.dataview.small-text {
	color: var(--dvTotalCount) !important;
}

Here is what it looks like:

[veitch]

Thanks!