Dear friends,
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:
<div class="FolderItem-title" contenteditable="false" spellcheck="false">Projects - Active</div>
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:
<div class="FolderItem-title" contenteditable="false" spellcheck="false" content="Projects - Active">Projects - Active</div>
Then something like this CSS could be used as a selector:
div[content*="Projects"] { background-color: grey; }
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.
Thanks for considering this suggestion.
Chris