[Bug]: Can't restyle with a custom css snippit
greggh opened this issue · 2 comments
Contact Details
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.

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
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;
}
Forgot to "close with comment"