Way to differentiate between internal note and files with cutstom CSS?

It looks like the non-Joplin resource links have a type="x", so you can select based on this. Here is an example of a calendar attachment:

<a type="text/calendar" data-from-md="" data-resource-id="" title="cal.ics" href="#" onclick="..." ><span class="resource-icon fa-file"></span>cal.ics</a>

You can see it has type="text/calendar", so I am able to style it with

a[type="text/calendar"]{
color: red !important;
}

To color the icon associated with that type, I can use

a[type="text/calendar"] span{
    background-color: red !important;
}

I haven’t gone through to figure out what all the resource types are, but it worked for styling calendar events and PDFs (type=“application/pdf”).

styled-resource-links

1 Like