I have been looking into how to modify the file browser, specifically to enable using custom icons in the place of the folder or document icon, based on the title of the document item. This is what I am working toward, but by removing some of the standard Dynalist icons:
Unfortunately, CSS seems to be limited in defining a selector that can look at the content of a DIV tag. Rather you need to often use selectors based on attributes of a tag. Currently, the HTML in Dynalist for the folder structure looks like:
As far as I can tell, there is no way for me with CSS to identify this folder called “Projects -active”. Therefore, it would be nice if additional data could be embedded in the HTML to allow CSS developers to get richer access to the content. So one solution might be to add an attribute like “content” or some other attribute:
This would return any document item with Projects in the title.
Related to this, this is also a challenge when evaluating CSS in document nodes, but I don’t see a solution to that without really blowing up the size of the documents.
Basically this change would enrich the underlying HTML to make it easier to manipulate with custom CSS.
Interesting idea. This is not hard for us to do, and because this increases the page size based on the number of files rather than the number of nodes, it’s not that bad.
Although, I think data-content or title attribute would be a little better since they are more standard
To anyone who’s reading: like the OP’s post if you want something like this!
P.S. The “Developers” category might be a better place for posts like this to attract.
You can’t use CSS to select specific a class with specific inner HTML. Actually you can but its very limited, you can pick the last item, the first item, or the nth-item, but that’s about it. If you changed the position of any of your documents it would cause issues
you need to use javascript to pick a specific icon
What you would need to do is
querySelectorAll on the documentItem-title
match the innerHTML, I would do an exact match (no need for regular expressions)
If a match is find, go to adjacent sibling div class
change the ::before pseudoselector to one matching your icon. You can use an emoji in the content field, that’s the easiest way to do it
general gist of it
Doesn’t require dynalist API, you can use a userscript on tampermonkey
If you did this on a folder it would be a tad more complicated though, but not by a whole lot.
In this particular case, I am looking for the DL crew to add some meta data making it easier to get to information via CSS, so that I can better utilize the PRO feature for CSS customization. They don’t allow any javascript. So I am looking for a CSS path that works every where.
I really appreciate that the CSS feature for pro users is supported on all platforms.
How did you dump javascript on your page? Again, I am trying need these customizations to work in the mobile and desktop apps, so I can’t use scriptmoneky.
I agree then the classes have to be specific, but I don’t mind that. The goal is to customize the node, but right now there is no way in css to do that for the folder names or document names.
Tampermonkey lets you inject javascript on any webpage. Its like your own chrome extension
Only works for desktop mode only though unfortunately. I never use dynalist mobile
