RafaelGB/obsidian-db-folder

[Bug]: Can't restyle with a custom css snippit

greggh opened this issue · 2 comments

greggh commented

Contact Details

greggatghc@gmail.com

What happened?

I am trying to restyle the DB Folder look because it doesn't match my theme. I am using the Border theme with one of its custom presets. It gives a transparent look to a lot of Obsidian. I have tried targeting every class I see in the style.css in the plugins folder, and doing it in my own db_folder.css in the snippets folder. Nothing seems to change the style at all.

Screenshot 2024-01-03 213920

What platform were you using?

Desktop

Version of the plugin

3.5.0

Relevant log output

No response

Are you using the latest version of the plugin in your Obsidian vault?

  • I have verified that I am on the latest version

Are you check if there is a similar issue?

  • I have verified that there are not similar issues
greggh commented

For anyone finding this later. I figured it out with a custom CSS file. Named it db_folder.css in the snippets folder. Pasting the file below. Everything at is 0,0,0,0.0 is of course transparent. You'll see the one that ends with an opacity of 0.3, that's for the alternating row colors. Just darkens it up a little. The color and stroke at the end are for the column heading icons and text. It's a messy bit of CSS, but it works.

.database-plugin__td {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

.database-plugin__th {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

.database-plugin__footer-group {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

.database-plugin__sticky_first_column .database-plugin__th:nth-child(2) {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

.database-plugin__row-shadow {
	background-color: rgba(0, 0, 0, 0.3) !important;
}

#Daily\ Notes\/Habit\ Tracker\.md > div.database-plugin__scroll-container.database-plugin__scroll-horizontal > div > div.database-plugin__thead.database-plugin__sticky-top > div {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

#Daily\ Notes\/Habit\ Tracker\.md > div.database-plugin__scroll-container.database-plugin__scroll-horizontal > div > div.database-plugin__tbody > div > div.database-plugin__td.database-plugin__row-context-menu.data-input {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

#Daily\ Notes\/Habit\ Tracker\.md > div.database-plugin__scroll-container.database-plugin__scroll-horizontal > div > div.database-plugin__tbody > div > div {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

#Daily\ Notes\/Habit\ Tracker\.md > div.database-plugin__scroll-container.database-plugin__scroll-horizontal > div > div.database-plugin__tbody > div > div.database-plugin__td.database-plugin__row-context-menu.data-input > div > div {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

#Daily\ Notes\/Habit\ Tracker\.md > div.database-plugin__scroll-container.database-plugin__scroll-horizontal > div > div.database-plugin__tfoot > div > div:nth-child(2) {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

#Daily\ Notes\/Habit\ Tracker\.md > div.database-plugin__scroll-container.database-plugin__scroll-horizontal > div > div.database-plugin__thead.database-plugin__sticky-top > div > div > div {
	color: #CCCCCC !important;
}

#Daily\ Notes\/Habit\ Tracker\.md > div.database-plugin__scroll-container.database-plugin__scroll-horizontal > div > div.database-plugin__thead.database-plugin__sticky-top > div > div > div > div > span > svg {
	stroke: #AAAAAA !important;
}
greggh commented

Forgot to "close with comment"