CSS customizing - provide selectable information in DIV attributes

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

4 Likes

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 :slight_smile:

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. :wink:

@Erica I agree about data-content. Title might have a nasty side effect of displaying a label on a mouse hover with some browsers.

I will move this to the developer category.

1 Like

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

  1. querySelectorAll on the documentItem-title
  2. match the innerHTML, I would do an exact match (no need for regular expressions)
  3. If a match is find, go to adjacent sibling div class
  4. 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

image

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.

Let me know if you need any help on this

@Vincent_Tang this is excellent advice. Thank you!

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.

Its a complicated problem to add CSS customization that way, because you would need a unique class for whatever your selecting.

You can still dump javascript on the page, that’s what I did with my script

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

I use dynalist mobile extensively (hours in a day), so its important what I do on desktop i can do in mobile.

So having hooks into my own data via div attributes or some other CSS selector path would be great.

2 Likes